From 0fe810460d9c0b1413746bcfdbce1951b5ef9a1b Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 30 Sep 2020 12:00:55 +0200
Subject: [PATCH] Done #3882 @3

---
 .../styles/widgets/timeline-horizontal.styl   | 67 +++++++++++++++++--
 .../widgets/timeline-horizontal.blade.php     | 11 ++-
 2 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl
index 401e59d..fe20e96 100644
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl
@@ -1,13 +1,20 @@
-$breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view
+$breakpoint-timeline-horizontal = 768px // When timeline changes to mobile view
 
 .timeline-horizontal
 
-  .swiper-wrapper
-    @apply items-center
-
   &-item
     @apply bg-white flex items-center
     horizontal-spacing(12.5vw)
+    height: auto // Needed for fade effect so all slides are same height (height: 100% actually breaks it)
+
+    +below(950px)
+      padding-left: 10vw
+      padding-right: @padding-left
+
+    +below($breakpoint-timeline-horizontal)
+      flex-direction: column
+      padding-left: 15vw
+      padding-right: @padding-left
 
     &-image-wrapper
       display: flex
@@ -16,12 +23,30 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view
       justify-content: center
       constrain(margin-right, 5vw)
 
+      +below($breakpoint-timeline-horizontal)
+        margin: 0 0 2em 0
+        flex-grow: 0
+        flex-basis: auto
+        width: 75%
+        max-width: 220px
+
     &-content
       flex: 1 1 60%
 
+      > *
+        max-width: 750px
+
       a
         @apply text-pink
 
+        &:hover
+          @apply text-teal
+
+      // Special override for large text so it fits better on smallest screens
+      .text-lg
+        +below(500px)
+          font-size: 1.125rem
+
   // Timeline Pagination
   &-pagination
     position: relative
@@ -34,6 +59,13 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view
     margin: 0
     z-index: 1
 
+    +below(950px)
+      width: 90% !important
+      left: 5% !important
+
+    +below($breakpoint-timeline-horizontal)
+      display: none
+
     // Timeline horizontal line
     &:before
       content: ''
@@ -129,6 +161,26 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view
           &:before
             opacity: 0
 
+  // Step number (mobile only)
+  &-step
+    @apply font-display text-center
+
+    +above($breakpoint-timeline-horizontal)
+      display: none
+
+    &-title
+      @apply font-bold text-lg text-teal uppercase mt-2 mb-6
+      max-width: 8em
+
+    .bullet
+      @apply bg-teal text-white
+      height: r(68px)
+      width: @height
+      line-height: @height
+      font-size: 52px
+      display: inline-block
+      border-radius: 50%
+
 
   // Navigation Arrows
   &-prev, &-next
@@ -149,5 +201,12 @@ $breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view
 
   &-prev
     constrain(left, 5vw)
+
+    +below(950px)
+      left: 2.5vw
+
   &-next
     constrain(right, 5vw)
+
+    +below(950px)
+      right: 2.5vw
diff --git a/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php b/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php
index b588ab2..c1b5158 100644
--- a/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php
@@ -3,7 +3,7 @@
   $settings = [
     'slidesPerView' => 1,
     'loop' => true,
-    //'effect' => 'fade', // TODO: try to make this work properly so slides are all the same height
+    'effect' => 'fade',
     'touchEventsTarget' => 'wrapper', // Fix pagination links sometimes going to wrong place
     'pagination' => [
       'el' => '.timeline-horizontal-pagination',
@@ -29,18 +29,17 @@
     @foreach ($items as $item)
       <div class="timeline-horizontal-item swiper-slide" data-title="{{ $item['title'] }}">
 
-        {{-- TODO: mobile title
-          <div class="timeline-horizontal-number">
-            {{ $loop->iteration }}
+          <div class="timeline-horizontal-step">
+            <div class="bullet">{{ $loop->iteration }}</div>
+            <h3 class="timeline-horizontal-step-title">{{ $item['title'] }}</h3>
           </div>
-         --}}
 
         <div class="timeline-horizontal-item-image-wrapper">
           @image($item['image']['id'], 'full', ['class' => 'timeline-horizontal-item-image'])
         </div>
 
         <div class="timeline-horizontal-item-content">
-          <h3 class="text-2xl uppercase">{{ $item['title'] }}</h3>
+          <h3 class="text-2xl xs:text-xl uppercase">{{ $item['title'] }}</h3>
           {!! $item['content'] !!}
         </div>
       </div>
-- 
2.39.5