Merge pull request #1107 from torchbox/feature/264-video-display

R1-264: VIDEO DISPLAY | Project Page templates

Author: patrickcuagan

rca/project_styleguide/templates/patterns/molecules/image-caption-link/image-caption-link.html

@@ -9,6 +9,6 @@
     {# Image `alt` used to be optional (now required). We leave the conditional in since images uploaded before the update might have their `alt` blank. #}
     <img src="{{ my_image.url }}" width="{{ my_image.width }}" height="{{ my_image.height }}" alt="{% if value.decorative %}{% elif my_image.image.alt %}{{ my_image.image.alt }}{% else %}{{ my_image.image.title }}{% endif %}">
     {% if value.caption %}
-        <p class="image-caption-link">{{ value.caption }}</p>
+        <p class="image__caption">{{ value.caption }}</p>
     {% endif %}
 </div>

rca/project_styleguide/templates/patterns/molecules/image-caption-link/image-caption-link.yaml

@@ -16,7 +16,7 @@ <h2 class="image-video-block__heading heading {% if curriculum %}heading--two{%
         <div class="section__row grid">
     {% endif %}
         {% if image or video %}
-            {% include "patterns/molecules/image-caption-link/image-caption-link.html" with caption=caption modal=modal %}
+            {% include "patterns/organisms/image-video-embed/image-video-embed.html" with modal=modal image=image caption=caption video=video %}
         {% endif %}
     {% if not out_of_grid %}
         </div>

rca/project_styleguide/templates/patterns/molecules/streamfield/blocks/image_block.html

@@ -1,29 +1,28 @@
 {# This is similar to image-video-block. Key difference is that the play button is centered and the caption is below the image. #}
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="image-video-embed">
-    <div class="image-video-embed__container" {% if modal and video %}data-video-modal{% endif %}>
-        {% image image fill-80x37 as image_small %}
-        {% image image fill-900x415 as image_large %}
-
-        {% if video %}
-            <a data-modal-open class="image-video-embed__link" aria-label="Play {{ caption }}" tabindex="0">
+<div class="image-video-embed" {% if modal and video %}data-video-modal{% endif %}>
+    {% image image fill-80x37 as image_small %}
+    {% image image fill-900x415 as image_large %}
 
+    {% if video %}
+        <a data-modal-open class="image-video-embed__link" aria-label="Play {{ caption }}" tabindex="0">
+            <div class="image-video-embed__image-container">
                 {% include "patterns/atoms/image/image--lazyload.html" with image_small=image_small width=900 height=415 image_large=image_large classList='image-video-embed__image' %}
-            
+        
                 <svg class="image-video-embed__play-icon" aria-hidden="true" width="87" height="87" viewBox="0 0 90 85">
                     <path d="M43.5 0C19.575 0 0 19.575 0 43.5C0 67.425 19.575 87 43.5 87C67.425 87 87 67.425 87 43.5C87 19.575 67.425 0 43.5 0ZM34.8 63.075V23.925L60.9 43.5L34.8 63.075Z" fill="white"/>
                     <path d="M34.8 23.925V63.075L60.9 43.5L34.8 23.925Z" fill="#FF5D1C"/>
                 </svg>
-            
-                {% if caption %}
-                    <p class="image-video-embed__caption">{{ caption }}</p>
-                {% endif %}
-            </a>
+            </div>
+        
+            {% if caption %}
+                <p class="image-video-embed__caption">{{ caption }}</p>
+            {% endif %}
+        </a>
 
-            {% include "patterns/molecules/video-modal/video-modal.html" with open_link=False %}
-        {% else %}
-            {% include "patterns/atoms/image/image--lazyload.html" with image_small=image_small width=900 height=415 image_large=image_large classList='image-video-embed__image' %}
-        {% endif %}
-    </div>
+        {% include "patterns/molecules/video-modal/video-modal.html" with open_link=False %}
+    {% else %}
+        {% include "patterns/atoms/image/image--lazyload.html" with image_small=image_small width=900 height=415 image_large=image_large classList='image-video-embed__image' %}
+    {% endif %}
 </div>

rca/project_styleguide/templates/patterns/organisms/image-video-block/image-video-block.html

@@ -16,7 +16,7 @@ <h3 class="section__heading section__heading--primary heading heading--two">
                     <h4 class="introduction introduction--end heading heading--five" property="schema:description">{{ page.programme_description_subtitle }}</h4>
                 {% endif %}
                 {% if page.programme_image %}
-                    {% include "patterns/organisms/image-video-embed/image-video-embed.html" with modal=page.programme_video image=page.programme_image caption=page.programme_video_caption video=page.programme_video out_of_grid="true" heading=false has_meta=false subheading=false copy=false %}
+                    {% include "patterns/organisms/image-video-embed/image-video-embed.html" with modal=page.programme_video image=page.programme_image caption=page.programme_video_caption video=page.programme_video %}
                 {% endif %}
                 <div class="programme-overview__description rich-text">
                     {{ page.programme_description_copy|safe }}

rca/project_styleguide/templates/patterns/organisms/image-video-embed/image-video-embed.html

@@ -1,35 +1,14 @@
 .image-video-embed {
     $root: &;
+    grid-column: 1 / span 2;
     margin-bottom: ($gutter * 2);
 
     @include media-query(medium) {
         margin-bottom: ($gutter * 3);
     }
 
-    &__container {
-        grid-column: 1 / span 2;
-
-        @include media-query(large) {
-            grid-column: 2 / span 3;
-        }
-    }
-
-    &__image {
-        @include z-index(above-gridlines);
-        position: relative;
-
-        #{$root}__link & {
-            opacity: 0.8;
-
-            @include media-query(medium) {
-                opacity: 1;
-                transition: opacity $transition;
-
-                #{$root}:hover & {
-                    opacity: 0.8;
-                }
-            }
-        }
+    @include media-query(large) {
+        grid-column: 2 / span 3;
     }
 
     &__link {
@@ -62,11 +41,33 @@
         }
     }
 
+    &__image-container {
+        position: relative;
+    }
+
+    &__image {
+        @include z-index(above-gridlines);
+        position: relative;
+
+        #{$root}__link & {
+            opacity: 0.8;
+
+            @include media-query(medium) {
+                opacity: 1;
+                transition: opacity $transition;
+
+                #{$root}:hover & {
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+
     &__play-icon {
         @include z-index(above-gridlines);
         position: absolute;
         left: 50%;
-        top: 40%;
+        top: 50%;
         transform: translate3d(-50%, -50%, 0);
         pointer-events: none;
         height: 50px;
@@ -78,7 +79,6 @@
 
         @include media-query(medium) {
             height: 80px;
-            top: 45%;
             width: 80px;
         }
     }

rca/project_styleguide/templates/patterns/organisms/programme_tabs/programme_overview.html

@@ -32,4 +32,13 @@
             }
         }
     }
+
+    &__caption {
+        margin-bottom: ($gutter * 1.75);
+        grid-column: 1 / span 2;
+
+        @include media-query(large) {
+            grid-column: 2 / span 3;
+        }
+    }
 }

rca/static_src/sass/components/_image-caption-link.scss

@@ -66,7 +66,6 @@
 @import 'components/job-titles';
 @import 'components/jump-nav';
 @import 'components/image';
-@import 'components/image-caption-link';
 @import 'components/image-info';
 @import 'components/introduction';
 @import 'components/intro-and-video';