[7425] FE - Session Slider

network-api/networkapi/mozfest/templates/fragments/carousel_navigation.html

@@ -0,0 +1,24 @@
+<div class="swiper-navigation tw-container tx-p-0 tw-relative tw-z-10 tw-mb-5 tw-ml-auto tw-hidden large:tw-flex large:tw-justify-end {% if page.signup != None %} tw-ml-0 tw-container{% endif %}">
+  <div class="tw-flex tw-flex-row tw-justify-between tw-items-center">
+    <div class="swiper-button-prev">
+      <svg class="swiper-button-icon" viewBox="0 0 21 21" fill="none">
+        <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-icon" viewBox="0 0 21 21" fill="none">
+        <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>

network-api/networkapi/mozfest/templates/fragments/session_card.html

@@ -0,0 +1,29 @@
+{% load static wagtailcore_tags %}
+<a class="tw-block tw-group tw-no-underline tw-p-5 tw-border tw-border-gray-60/20 tw-text-[22px]"
+   href="{{ url }}">
+
+  <div class="tw-grid tw-grid-cols-1 medium:tw-grid-cols-5 tw-gap-4">
+
+    <div class="medium:tw-col-span-3">
+      <div class="h3-heading tw-inline-block tw-text-black tw-mb-4 group-hover:tw-underline tw-font-zilla tw-transition">{{ title }}</div>
+      <div class=" tw-text-lg">
+        {{ text|richtext }}
+      </div>
+    </div>
+
+    <div class="medium:tw-order-2 tw-flex-shrink-0 medium:tw-col-span-2">
+      <div class="tw-relative w-full medium:w-[250px] tw-h-[140px] tw-overflow-hidden">
+        <img class="tw-absolute tw-top-1/2 tw--translate-y-1/2 tw-left-1/2 tw--translate-x-1/2 tw-transform tw-w-5 tw-h-5 tw-z-10   {% if animated_thumbnail %} group-hover:tw-opacity-0 tw-transition tw-duration-500 tw-ease-in-out tw-delay-100 {% endif %}"
+             src="{% static '_images/mozfest/play-triangle.svg' %}" alt="">
+        {% if animated_thumbnail %}
+          <video class="tw-absolute tw-object-cover tw-absolute tw-left-1/2 tw-top-1/2 tw-h-full tw--translate-y-1/2 tw--translate-x-1/2" src="{{ animated_thumbnail }}" autoplay loop muted width="500" height="200"></video>
+        {% endif %}
+        {# Thumbnail Image #}
+        <img class="tw-w-full tw-object-cover tw-absolute tw-left-1/2 tw-top-1/2 tw-h-full tw--translate-y-1/2 tw--translate-x-1/2 {% if animated_thumbnail %}group-hover:tw-opacity-0 {% endif %} tw-transition tw-duration-500 tw-ease-in-out tw-delay-100"
+             src="{{ image }}" alt="">
+      </div>
+    </div>
+  </div>
+
+</a>
+

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/session_slider_list_block.html

@@ -1,37 +1,32 @@
-{% extends "./base_streamfield_block.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load static wagtailimages_tags %}
+<div class="tw-mb-6 tw-mt-5 first:tw-mt-0 tw-relative tw-overflow-hidden {% if page.signup != None %} large:tw-mr-[calc(50%-50vw)]{% else %} tw-container{% endif %}">
 
-{% block block_content %}
-  <div class="row">
-    <div class="mb-4">
-      <h3>{{ value.title }}</h3>
+  {# Slider main container #}
+  <div class="swiper tw-px-3 tw-pb-7 tw-mx-0 tw-overflow-hidden tw-container" data-carousel>
+
+    {# navigation buttons #}
+    <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-0 tw-w-full">{{ value.title }}</h2>
+      {% if self.session_items|length > 2 %}
+        {% include 'fragments/carousel_navigation.html' %}
+      {% endif %}
     </div>
-  </div>
-  <div class="row">
-    {% for block in self.session_items %}
-      {% with session_item=block count=self.session_items|length %}
-        {% image session_item.image fill-350x197 as img %}
-        <div class="col-sm-12 {% if count > 2 %} col-lg-4 col-md-6 {% else %} col-md-6 {% endif %} mb-4">
-          <div class="card-regular h-100 d-flex flex-column ">
-            <img src="{{ img.url }}" />
-            <div class="d-flex flex-1">
-              <div class="key-item mx-2 mx-md-3 p-3 w-100 d-flex flex-column">
-                <h3 class="h3-heading mb-2">{{ session_item.title }}</h3>
-                <p>Author Subheading: {{ session_item.author_subheading }}</p>
-                <p>Body: {{ session_item.body }}</p>
-                <p>Video URL: {{ session_item.video.url }}</p>
-                <p>Link: {{ session_item.link.0.value.link_url }}</p>
-              </div>
-            </div>
-          </div>
+
+    {# Additional required wrapper #}
+    <div class="swiper-wrapper">
+
+      {# Slides #}
+      {% for item in self.session_items %}
+        {% image item.image fill-250x140 as img %}
+        <div class="swiper-slide">
+          {% include 'fragments/session_card.html' with title=item.title url=item.video.url image=img.url text=item.body animated_thumbnail=item.video.url %}
         </div>
-      {% endwith %}
-    {% endfor %}
-  </div>
-  <div class="row">
-    <div class="mb-4">
-      <p>Button Label: {{ value.button.0.value.label }}</p>
-      <p>Button Link URL: {{ value.button.0.value.link_url }}</p>
+      {% endfor %}
+
     </div>
+
+    {# Pagination #}
+    <div class="swiper-pagination tw--bottom-[5px] large:tw-hidden"></div>
+
   </div>
-{% endblock %}
+</div>

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"

source/js/components/carousel/carousel.js

@@ -0,0 +1,52 @@
+import Swiper, {
+  A11y,
+  Autoplay,
+  Pagination,
+  Navigation,
+  Keyboard,
+} from "swiper";
+
+Swiper.use([A11y, Autoplay, Pagination, Navigation, Keyboard]);
+
+class Carousel {
+  constructor(node) {
+    this.node = node;
+    this.swiper = new Swiper(this.node, {
+      spaceBetween: 20,
+      watchOverflow: true,
+      centeredSlides: false,
+      simulateTouch: true,
+      slidesPerView: 1,
+      autoHeight: true,
+      keyboard: {
+        enabled: true,
+      },
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      // Responsive breakpoints
+      breakpoints: {
+        992: {
+          slidesPerView: 2,
+          spaceBetween: 30,
+        },
+      },
+    });
+    this.slideTotal = this.node.dataset.slidetotal;
+  }
+}
+
+const MozfestCarousels = {
+  init: function () {
+    document
+      .querySelectorAll(`[data-carousel]`)
+      .forEach((e) => new Carousel(e));
+  },
+};
+
+export default MozfestCarousels;

source/js/main.js

@@ -16,6 +16,7 @@ import {
 import primaryNav from "./primary-nav.js";
 import EmbedTypeform from "./embed-typeform.js";
 import Dropdowns from "./dropdowns.js";
+import MozfestCarousels from "./components/carousel/carousel.js";
 import initializeSentry from "./common/sentry-config.js";
 import YouTubeRegretsTunnel from "./foundation/pages/youtube-regrets/intro-tunnel";
 import RegretsReporterTimeline from "./foundation/pages/youtube-regrets/regrets-reporter/timeline";
@@ -138,6 +139,11 @@ let main = {
     if (document.querySelector("#view-dear-internet")) {
       bindDearInternetEventHandlers();
     }
+
+    // Mozfest pages
+    if (document.querySelector(`.mozfest`)) {
+      MozfestCarousels.init();
+    }
   },
 };
 

source/sass/mozfest.scss

@@ -1,6 +1,11 @@
 // MozFest-specific styling
 // https://www.mozillafestival.org
 
+// Carousel
+@import "../../node_modules/swiper/swiper-vars.scss";
+@import "../../node_modules/swiper/swiper.scss";
+@import "../../node_modules/swiper/components/pagination/pagination.scss";
+
 body.mozfest {
   .primary-nav-container {
     // The following overrides are to make sure
@@ -174,4 +179,43 @@ body.mozfest {
       }
     }
   }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    @apply tw-border-2 tw-text-blue tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
+
+    &.swiper-button-disabled {
+      @apply tw-border-gray-20;
+    }
+
+    &::after {
+      content: "";
+    }
+
+    &:hover {
+      @apply tw-opacity-75;
+    }
+  }
+
+  .swiper-button-icon {
+    @apply tw-text-blue tw-w-4 tw-h-4;
+  }
+
+  .swiper-button-disabled {
+    .swiper-button-icon {
+      @apply tw-text-gray-20;
+    }
+  }
+
+  .swiper-button-prev {
+    @apply tw-mr-5;
+  }
+
+  .swiper-pagination-bullet {
+    @apply tw-w-3 tw-h-3;
+  }
+
+  .swiper-pagination-bullet-active {
+    @apply tw-bg-festival-blue-100;
+  }
 }

tailwind.config.js

@@ -104,7 +104,10 @@ module.exports = {
         purple: "#a66efd",
       },
       festival: {
-        blue: "#0e11bf",
+        blue: {
+          DEFAULT: "#0e11bf",
+          100: "#4C56EC",
+        },
         purple: "#8f14fb",
       },
       "dear-internet": {