[7533] - FE Mozfest homepage hero (#7589)

* Current events slider styles * Install swiper and style event cards * video play on hover styling * Minor spacing * Mozfest homepage banner start * Homepage header, mobile styling and slideshow styling * Homepage banner cleanup and organization * Link mobile and background image sliders * Add loops for test hero content * Rebase on to BE branch * Thumbnail fixes for hosted cms video * carousel js cleanup * Integrate old video functionality back into branch * Make old functionality work * Change flag to featured again * Revert name to homepage banner handler * Remove carousel.scss * Add spacing back to tailwind config * Remove extra space from main.scss * Add animation for sliding progress bar * Make carousel clickable
MozillaFoundation · Oct 11, 2021 · 26080e5 · 26080e5
1 parent 3aeafb3
commit 26080e5
Show file tree

Hide file tree

Showing 17 changed files with 487 additions and 104 deletions.
diff --git a/network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html b/network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html
@@ -0,0 +1,25 @@
+<div class="tw-flex tw-justify-center tw-items-start tw-flex-col tw-mb-5 medium:tw-flex-row medium:tw-justify-between medium:tw-items-center">
+      <h2 class="font-weight-bold h3-heading tw-font-semibold tw-mb-4">{{ title }}</h2>
+      <div class="tw-flex tw-flex-row tw-justify-between tw-items-center">
+        <div class="swiper-button-prev">
+          <svg class="swiper-button-prev__icon" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M20.75 10.5c0-.70761-.5099-1.28125-1.1389-1.28125H1.38889C.759899 9.21875.25 9.79239.25 10.5c0 .7076.509899 1.2812 1.13889 1.2812H19.6111c.629 0 1.1389-.5736 1.1389-1.2812Z"
+                  fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M10.1664.625269c-.44474-.500359-1.16584-.500359-1.6106 0L.583572 9.59402c-.444763.50038-.444763 1.31158 0 1.81198L8.5558 20.3747c.44476.5004 1.16586.5004 1.6106 0 .4448-.5003.4448-1.3116 0-1.8119L2.99952 10.5l7.16688-8.06277c.4448-.50036.4448-1.3116 0-1.811961Z"
+                  fill="currentColor"/>
+          </svg>
+        </div>
+        <div class="swiper-button-next">
+          <svg class="swiper-button-next__icon" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M.25 10.5c0-.70761.509898-1.28125 1.13889-1.28125H19.6111c.629 0 1.1389.57364 1.1389 1.28125 0 .7076-.5099 1.2812-1.1389 1.2812H1.38889C.759898 11.7812.25 11.2076.25 10.5Z"
+                  fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M10.8336.625269c.4447-.500359 1.1658-.500359 1.6106 0l7.9722 8.968751c.4448.50038.4448 1.31158 0 1.81198l-7.9722 8.9687c-.4448.5004-1.1659.5004-1.6106 0-.4448-.5003-.4448-1.3116 0-1.8119L18.0005 10.5l-7.1669-8.06277c-.4448-.50036-.4448-1.3116 0-1.811961Z"
+                  fill="currentColor"/>
+          </svg>
+        </div>
+      </div>
+    </div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/carousel_hero.html
@@ -0,0 +1,69 @@
+{% load i18n wagtailimages_tags %}
+<div data-mozfest-hero-carousel>
+  <div class="tw-relative tw-pt-[120px] tw-flex tw-flex-col tw-justify-end{% if not page.banner_video_url %} tw-pb-6 medium:tw-pb-[120px]{% endif %}">
+
+    {# Background images slider #}
+    <div class="tw-absolute tw-inset-0">
+      <div class="tw-absolute tw-inset-0 tw-bg-black tw-z-20 tw-opacity-40"></div>
+      <div class="tw-bg-gradient-to-t tw-from-festival-blue-100 tw-via-festival-blue-100 tw-to-festival-purple-100 tw-w-full tw-h-full tw-absolute tw-inset-0 tw-z-10 tw-opacity-75"></div>
+    </div>
+
+    {# Background Images slider #}
+    {% if page.banner_carousel %}
+      <div class="tw-absolute tw-w-full tw-h-full tw-top-0 tw-left-0">
+        <div class="swiper-hero-carousel tw-h-full tw-overflow-hidden">
+          <div class="swiper-wrapper">
+            {% for slide_block in page.specific.banner_carousel %}
+              {% with slide=slide_block.value %}
+                {% image slide.image fill-1600x900 as img %}
+                <div class="swiper-slide tw-bg-cover tw-bg-center tw-bg-no-repeat tw-filter tw-grayscale" style="background-image: url({{ img.url }});"></div>
+              {% endwith %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
+    {# Text slider #}
+    <div class="tw-container tw-relative tw-z-20 tw-text-white">
+      <div>
+        <h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
+        {% if page.banner_video %}
+          <a href="#mozfest-hero-video" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-gray-05">{% trans "Watch last year’s recap video" %}</a>
+        {% endif %}
+      </div>
+
+      <div class="tw-relative tw-pt-[60px] medium:tw-pt-[100px]  tw-hidden medium:tw-block">
+
+        {# pagination progress bars on desktop #}
+        <div class="swiper-hero-pagination tw-bottom-3 tw-relative tw-z-40 tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4"></div>
+
+        {# Text #}
+        {% if page.banner_carousel %}
+          <div class="tw-grid tw-grid-cols-3 tw-gap-3 medium:tw-gap-4">
+            {% for slide_block in page.specific.banner_carousel %}
+              {% with slide=slide_block.value %}
+                <div>
+                  <span class="tw-font-zilla tw-font-bold tw-inline-block h4-heading tw-text-white">{{ slide.heading }}</span>
+                  <p class="tw-text-white">{{ slide.description }}</p>
+                </div>
+              {% endwith %}
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+
+      {# mobile slider #}
+      {% if page.banner_carousel %}
+        {% include 'fragments/hero/hero_mobile_slider.html' with items=page.hero_slides %}
+      {% endif %}
+    </div>
+
+    {# Video block #}
+    {% if page.banner_video_url %}
+      {% include 'fragments/hero/featured_video.html' %}
+    {% endif %}
+
+  </div>
+
+</div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html b/network-api/networkapi/mozfest/templates/fragments/hero/featured_video.html
@@ -0,0 +1,39 @@
+{% load i18n static wagtailcore_tags wagtailimages_tags %}
+<div id="mozfest-hero-video" class="tw-relative tw-z-20 tw-pb-5 medium:tw-pb-[60px] tw-mt-7 medium:tw-mt-[60px]">
+
+  {# Overlay spacer #}
+  <div class="tw-bg-white tw-absolute tw-w-full tw-h-[80%] medium:tw-h-[90%] tw-bottom-0"></div>
+
+  {# Video Container #}
+  <div class="container">
+    {% for block in page.banner_video %}
+      <div style="padding-bottom: 56.25%;" class="embed-responsive tw-bg-black tw-text-black">
+
+        {# Thumbnail and overlay #}
+        <button
+                id="mozfest-home-watch-featured-video-button"
+                aria-label="{% trans "Watch Video" %}"
+                class="tw-bg-black tw-w-full tw-h-full tw-absolute tw-inset-0 tw-group tw-z-10 tw-bg-cover tw-bg-center tw-transition tw-duration-500"
+                {% if block.block_type == 'video_url' %}
+                data-video-url="{{ block.value }}"
+                style="background-image: url({{ page.banner_video_thumbnail }});"
+                {% endif %}
+                {% if block.block_type == 'CMS_video' %}
+                style="background-image: url({{ block.value.thumbnail.url }});"
+                {% endif %}
+        >
+            <span class="tw-relative tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center">
+              {# Opacity layer #}
+              <div class="tw-absolute tw-bg-black tw-opacity-25 tw-inset-0 tw-w-full tw-h-full"></div>
+              {# Play Icon #}
+              <img src="{% static "_images/mozfest/play-circle-grey.svg" %}"
+                   class="group-hover:tw--translate-y-1 tw-relative tw-z-10 tw-transition tw-w-[75px] tw-h-[75px] medium:tw-w-[108px] medium:tw-h-[108px]" alt=""/>
+            </span>
+        </button>
+
+        {# Video #}
+        {{ block }}
+      </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html b/network-api/networkapi/mozfest/templates/fragments/hero/hardcoded_video_hero.html
@@ -0,0 +1,43 @@
+{% load i18n wagtailcore_tags %}
+<div class="banner">
+  <div class="background-wrapper">
+    <div class="overlay"></div>
+    <video class="banner-video" playsinline muted loop preload
+           poster="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video-poster.jpg">
+      <source
+              src="https://s3.amazonaws.com/mofo-assets/foundation/video/mozfest-banner-video.mp4"
+              type="video/mp4">
+    </video>
+
+    <div class="video-control-wrapper dark-theme">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <button class="btn btn-video-control btn-pause btn-secondary d-none">
+              <span>{% trans "PAUSE VIDEO" context "Pause button for video" %}</span>
+            </button>
+            <button class="btn btn-video-control btn-play btn-secondary d-none">
+              <span>{% trans "PLAY VIDEO" context "Play button for video" %}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="homepage-banner-content container">
+    <div class="row">
+      <div class="col-10 col-lg-8 dark-theme">
+        <h1 class="h1-heading">{{ page.banner_heading }}</h1>
+      </div>
+    </div>
+  </div>
+</div>
+
+{# Bottom overlaping spacing bar #}
+<div class="container">
+  <div class="row cutout-wrapper-row">
+    <div class="cutout col-12 pt-4">
+    </div>
+  </div>
+</div>
diff --git a/network-api/networkapi/mozfest/templates/fragments/hero/hero_mobile_slider.html b/network-api/networkapi/mozfest/templates/fragments/hero/hero_mobile_slider.html
@@ -0,0 +1,16 @@
+<div class="swiper-hero-mobile tw-overflow-hidden medium:tw-hidden tw-mt-7">
+
+  <div class="swiper-wrapper">
+    {% for slide_block in page.banner_carousel %}
+      {% with slide=slide_block.value %}
+        <div class="swiper-slide">
+          <div class="swiper-mobile-progress-bar"></div>
+          <span class="tw-font-zilla tw-font-bold tw-inline-block h4-heading tw-text-white tw-mt-4">{{ slide.heading }}</span>
+          <p class="tw-text-white">{{ slide.description }}</p>
+        </div>
+      {% endwith %}
+    {% endfor %}
+  </div>
+</div>
+
+
diff --git a/network-api/networkapi/mozfest/templates/partials/homepage_banner.html b/network-api/networkapi/mozfest/templates/partials/homepage_banner.html
diff --git a/network-api/networkapi/mozfest/templates/partials/intro_section.html b/network-api/networkapi/mozfest/templates/partials/intro_section.html
@@ -0,0 +1,10 @@
+<div class="container">
+  <div class="row cutout-wrapper-row">
+    <div class="cutout pt-4 col-12 col-lg-8">
+      <h1 class="h1-heading mb-0">{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
+      {% if page.intro %}
+        <div class="intro body-large mt-3">{{ page.intro | richtext }}</div>
+      {% endif %}
+    </div>
+  </div>
+</div>
diff --git a/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html b/network-api/networkapi/mozfest/templates/partials/primary_heroguts.html
@@ -1,48 +1,23 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 <div id="hero">
-  <div class="banner">
-    {% if homepage %}
-      {% include "../fragments/hero/large.html" with page=page banner_video_type=banner_video_type %}
-      {% include "./homepage_banner.html" with page=page banner_video_type=banner_video_type %}
-    {% else %}
-      {% include "../fragments/hero/normal.html" with page=page %}
-    {% endif %}
-  </div>
-
   {% if homepage %}
-  <div class="container">
-    <div class="row cutout-wrapper-row">
-      <div class="cutout col-12 pt-4">
-        {% if banner_video_type == "featured" %}
-          {% if page.banner_video %}
-          {# See embedded_video_block.html and wagtail_video_block.html #}
-          {% include_block page.banner_video %}
-          {% endif %}
-          <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-        {% elif banner_video_type != "hardcoded" %}
-          <h1 class="h2-heading mb-0">{% if page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-          {% if page.intro %}
-          <div class="body-large mt-3 mb-0">{{ page.intro | richtext }}</div>
-          {% endif %}
-        {% endif %}
-      </div>
-    </div>
-  </div>
+    {% if banner_video_type == "hardcoded" %}
+      {# Hero with hardcoded video as background #}
+      {% include "fragments/hero/hardcoded_video_hero.html" with page=page banner_video_type=banner_video_type %}
+    {% elif banner_video_type == "featured" %}
+      {# Hero with carousel and featured video below #}
+      {% include "fragments/hero/carousel_hero.html" with page=page banner_video_type=banner_video_type %}
+    {% endif %}
   {% else %}
-  <div class="container">
-    <div class="row cutout-wrapper-row">
-      <div class="cutout pt-4 col-12 col-lg-8">
-        <h1 class="h1-heading mb-0">{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-        {% if page.intro %}
-        <div class="intro body-large mt-3">{{ page.intro | richtext }}</div>
-        {% endif %}
-      </div>
+    <div class="banner">
+      {% include "fragments/hero/normal.html" with page=page %}
     </div>
-  </div>
+    {% include "partials/intro_section.html" %}
   {% endif %}
 
   {% if singleton_page == True %}
     {% include "partials/intro_and_content_divider.html" with wrapper_class="d-md-none" %}
   {% endif %}
 </div>
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/embedded_video_block.html
@@ -2,24 +2,17 @@
 {% load wagtailcore_tags %}
 
 {% block block_row_classes %}
-no-gutters
 {% endblock %}
 
 {% block main_block_class %}
-streamfield-content
-full-width
 {% endblock %}
 
 {% block block_content %}
-<div class="my-2">
-  <div class="embed-responsive embed-responsive-16by9 d-print-none">
     <iframe
       src="{{ value }}"
       frameborder="0"
       class="embed-responsive-item"
       allow="autoplay; encrypted-media"
       allowfullscreen>
     </iframe>
-  </div>
-</div>
 {% endblock %}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "react-ga": "3.3.0",
     "sass": "^1.38.2",
     "shx": "^0.3.3",
-    "swiper": "^6.7.5",
+    "swiper": "^6.8.4",
     "tailwindcss": "^2.2.9",
     "uuid": "^8.3.2",
     "whatwg-fetch": "^3.6.2"

diff --git a/source/images/mozfest/play-circle-grey.svg b/source/images/mozfest/play-circle-grey.svg