project/module/module_detail_phase.html: using swiper to show phases …

…- states (upcoming/finish) added and set initially - styling (incl. mobile)

meinberlin/assets/extra_css/_swiper.scss

@@ -0,0 +1,28 @@
+.swiper-phases {
+    .swiper-pagination-clickable {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .swiper-pagination-bullet {
+            width: 12px;
+            height: 12px;
+            margin: 0 $spacer * 0.75 !important;
+        }
+
+        .swiper-pagination-bullet-active {
+            background-color: $primary;
+            width: 16px;
+            height: 16px;
+            margin: 0 $spacer * 0.75 !important;
+        }
+    }
+
+    .swiper-pagination {
+        position: relative !important;
+    }
+
+    .swiper-pagination-bullets {
+        bottom: 0 !important;
+    }
+}

meinberlin/assets/js/app.js

@@ -1,5 +1,5 @@
 import 'bootstrap' // load bootstrap components
-import 'django'
+import django from 'django'
 import 'select2' // used to select projects in containers
 import 'shariff'
 import 'slick-carousel'
@@ -26,6 +26,11 @@ import * as ReactMapTeaser from '../../apps/plans/assets/react_map_teaser.jsx'
 
 import * as Tether from 'tether'
 
+import { Swiper, Pagination, A11y } from 'swiper'
+// FIXME: doublecheck imports! fix, different to official docs
+import 'swiper/swiper.min.css'
+import 'swiper/swiper-bundle.min.css'
+
 window.Tether = Tether
 
 function init () {
@@ -71,6 +76,12 @@ function init () {
   // This function adds required classes to iframes added by ckeditor
   $('.rich-text iframe').addClass('ck_embed_iframe')
   $('.ck_embed_iframe').parent('div').addClass('ck_embed_iframe__container')
+
+  // Call swiper initialization if swiper element found in DOM
+  const hasPhaseSwiper = document.querySelector('.swiper-phases')
+  if (hasPhaseSwiper) {
+    createPhaseSwiper()
+  }
 }
 
 document.addEventListener('DOMContentLoaded', init, false)
@@ -80,3 +91,56 @@ document.addEventListener('a4.embed.ready', init, false)
 export function getCurrentPath () {
   return location.pathname
 }
+
+function createSwiper (params) {
+  const { rootElement, options } = params
+  return new Swiper(rootElement, options)
+}
+
+// find index for given identifier in slide
+// possible identifiers: active, upcoming
+function getIndexOf (identifier, slides) {
+  return Array.from(slides).findIndex(slide => {
+    return slide.querySelector('#' + identifier)
+  })
+}
+
+// create specific phase swiper
+function createPhaseSwiper () {
+  // config contains container/root element's name
+  // and all settings, which are needed (see swiper docs)
+  const config = {
+    rootElement: '.swiper-phases',
+    options: {
+      modules: [A11y, Pagination],
+      a11y: {
+        containerMessage:
+          django.gettext('Slider to go back and forth between phases.'),
+        paginationBulletMessage:
+          django.gettext('Go to slide {{index}}')
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        bulletElement: 'div'
+      }
+    }
+  }
+  const phaseSwiper = createSwiper(config)
+
+  // following part is to set initial slide
+  // FIXME: it is not the right location to invoke the following;
+  // because double logic (similar as in template), better to set
+  // flag `initialSlide` in config on creation
+  const activeSlideIndex = getIndexOf('active-phase', phaseSwiper.slides)
+  const upcomingSlideIndex = getIndexOf('upcoming-phase', phaseSwiper.slides)
+
+  if (activeSlideIndex !== -1) {
+    phaseSwiper.slideTo(activeSlideIndex)
+  } else if (upcomingSlideIndex !== -1) {
+    phaseSwiper.slideTo(upcomingSlideIndex)
+  } else {
+    const lastFinishedSlideIndex = phaseSwiper.slides.length - 1
+    phaseSwiper.slideTo(lastFinishedSlideIndex)
+  }
+}

meinberlin/assets/scss/components/_timeline.scss

@@ -128,11 +128,6 @@ $circle-size: 0.8em;
 
 .phase-info__item {
     padding: $padding 0;
-    border-bottom: 1px solid $border-color;
-
-    &:first-child {
-        border-top: 1px solid $border-color;
-    }
 
     &:last-child {
         margin-bottom: $em-spacer;

meinberlin/assets/scss/style.scss

@@ -93,3 +93,5 @@
 @import "print";
 @import "utility";
 @import "shame";
+
+@import "../extra_css/swiper";

meinberlin/templates/a4modules/includes/module_detail_phase.html

@@ -19,25 +19,36 @@
 {% endif %}
 {% with phase_count=module.phases.count %}
 <div class="offset-lg-3 col-lg-6">
-    {% for phase in module.phases %}
-        <div class="phase-info__item {% if phase_count == 1 %} u-no-border {% endif %} u-spacer-top">
-            <div class="phase-info__item__title{% if phase == module.active_phase %} lr-bar u-inline-flex{% endif %}">
-                {% if phase == module.active_phase %}
-                    <span class="lr-bar__left">{{ phase.name }}</span>
-                    <span class="lr-bar__right phase-info__highlight">{% trans 'active' %}</span>
-                {% else %}
-                    {{ phase.name }}
-                {% endif %}
-            </div>
-            <div class="phase-info__item__subtitle">
-                {% html_date phase.start_date 'DATETIME_FORMAT' %}
-                &ndash; {% html_date phase.end_date 'DATETIME_FORMAT' %}
-            </div>
-            <div class="phase-info__item__description">
-                {{ phase.description }}
-            </div>
+    <!-- Start Swiper Template -->
+    <div class="swiper-phases swiper">
+        <div class="swiper-wrapper">
+            {% for phase in module.phases %}
+                <div class="swiper-slide">
+                    <div class="phase-info__item {% if phase_count == 1 %} u-no-border {% endif %} u-spacer-top">
+                        <div class="phase-info__item__title{% if phase == module.active_phase %} lr-bar u-inline-flex{% endif %}">
+                            <span class="lr-bar__left">{{ phase.name }}</span>
+                            {% if phase == module.active_phase %}
+                                <span class="lr-bar__right phase-info__highlight" id="active-phase">{% trans 'active' %}</span>
+                            {% elif phase in module.future_phases %}
+                                <span class="lr-bar__right phase-info__highlight" id="upcoming-phase">{% trans 'upcoming' %}</span>
+                            {% else %}
+                                <span class="lr-bar__right phase-info__highlight">{% trans 'finished' %}</span>
+                            {% endif %}
+                        </div>
+                        <div class="phase-info__item__subtitle">
+                            {% html_date phase.start_date 'DATETIME_FORMAT' %}
+                            &ndash; {% html_date phase.end_date 'DATETIME_FORMAT' %}
+                        </div>
+                        <div class="phase-info__item__description">
+                            {{ phase.description }}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
         </div>
-    {% endfor %}
+        <div class="swiper-pagination"></div>
+    </div>
+    <!-- End Swiper Template -->
 </div>
 {% endwith %}