[7430] FE - current events slider (#7505)

* Current events slider styles

* Install swiper and style event cards

* Break slider out of container

* Adjust spacing and containers for wide templates and signup sidebar

* Merge FE on to BE

* Update source/sass/mozfest.scss

Co-authored-by: janehughes <janeelizabethhughes@gmail.com>

Co-authored-by: janehughes <janeelizabethhughes@gmail.com>

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

@@ -0,0 +1,25 @@
+<div class="swiper-navigation tw-relative tw-z-10 tw-mb-5 tw-hidden medium:tw-flex medium:tw-flex-row medium:tw-justify-between medium:items-center{% if not page.use_wide_template and page.signup  %} tw-ml-0 tw-pl-0 tw-container{% endif %}">
+  <h3 class="font-weight-bold">{{ title }}</h3>
+  <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/event_card.html

@@ -0,0 +1,15 @@
+<div class="tw-border tw-border-gray-60/20 tw-p-4 medium:tw-p-6">
+  <h3 class="tw-mb-2">{{ title }}</h3>
+  {% if category_url %}
+    <div class="tw-mt-3 tw-mb-4">
+      <a class="tw-underline tw-text-festival-blue-100" href="{{ category_url }}">{{ category_title }}</a>
+    </div>
+  {% endif %}
+  {% if image %}
+    <img class="tw-w-full tw-h-auto" src="{{ image }}" alt="{{ image_alt }}">
+  {% endif %}
+  <p class="tw-my-5">{{ text }}</p>
+  {% for button in buttons %}
+    <a class="btn btn-primary tw-mr-3 last:tw-mr-0" href="{{ button.value.link_url }}">{{ button.value.label }}</a>
+  {% endfor %}
+</div>

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -33,6 +33,7 @@
 {% block content %}
   {% block secondary_nav %}{% endblock %}
 
+
       {% if page.signup != None %}
 
         {# Use a two-column layout #}

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

@@ -1,34 +1,31 @@
-{% extends "./base_streamfield_block.html" %}
 {% load wagtailcore_tags wagtailimages_tags %}
 
-{% block block_content %}
-  <div class="row">
-    <div class="mb-4">
-      <h3>{{ value.title }}</h3>
-    </div>
-  </div>
-  <div class="row">
-    {% for block in self.current_events %}
-      {% with current_event=block count=self.current_events|length %}
-        {% image current_event.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">{{ current_event.title }}</h3>
-                <p>Subheading Link Label: {{ current_event.subheading_link.0.value.label }}</p>
-                <p>Subheading Link URL: {{ current_event.subheading_link.0.value.link_url }}</p>
-                <p>Body: {{ current_event.body }}</p>
-                {% for button in current_event.buttons %}
-                  <p>Button {{ forloop.counter }} Label: {{ button.value.label }}</p>
-                  <p>Button {{ forloop.counter }} Link: {{ button.value.link_url }}</p>
-                {% endfor %}
-              </div>
-            </div>
-          </div>
+
+{% load static %}
+<div class="tw-mb-6 last:tw-mt-6 tw-relative {% if not page.use_wide_template and page.signup %} tw-px-4 medium:tw-pl-0 medium:tw-mr-[calc(50%-50vw-33.3%)]{% else %} tw-container {% endif %}">
+
+  {# Slider main container #}
+  <div class="swiper tw-overflow-hidden" data-carousel>
+
+    {# navigation buttons #}
+    {% include 'fragments/carousel/carousel_navigation.html' with title=value.title %}
+
+    {# Additional required wrapper #}
+    <div class="swiper-wrapper">
+
+      {# Slides #}
+      {% for current_event in self.current_events %}
+        {% image current_event.image fill-600x250 as img %}
+        <div class="swiper-slide">
+          {% include 'fragments/event_card.html' with title=current_event.title category_url=current_event.subheading_link.0.value.link_url category_title=current_event.subheading_link.0.value.label buttons=current_event.buttons image=img.url text=current_event.body %}
         </div>
-      {% endwith %}
-    {% endfor %}
+      {% endfor %}
+    </div>
+
+    {# Pagination #}
+    <div class="swiper-pagination tw--bottom-7 medium:tw-hidden"></div>
+
   </div>
-{% endblock %}
+</div>
+
+