From 399c29f68f170ce7afe87a9a04c7faa14ddbcb44 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 13 May 2019 11:28:57 +0200
Subject: [PATCH] Pre-launch adjustments. WIP #2684 @2

---
 .../cube/src/Elementor/Widgets/Timeline.php   | 13 ++---
 .../c6/resources/assets/scripts/timeline.js   |  2 +-
 .../assets/styles/common/mixins.styl          |  9 +++
 .../assets/styles/common/variables.styl       |  2 +-
 .../assets/styles/widgets/timeline.styl       | 58 ++++++++++++-------
 5 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
index 98c6c37..0c61a95 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -127,20 +127,17 @@ class Timeline extends Widget_Base
      */
     protected function render() {
 
+        $items = $this->get_settings('items');
+
         // Rendered content
         $res = '<div class="timeline-wrapper">';
-        $res .= '<div class="year">';
-        $items = $this->get_settings('items');
-        $res .= '<nav id="timeline-nav">';
+        $res .= '<nav class="timeline-nav" id="timeline-nav">';
         foreach ($items as $index => $item) {
-
             $arr = explode(' ', trim($item['year'])); // select the first word
-            $res .= '<a class="year-item" href="#year-' . $index . '">' . $arr[0] . '</a>';
-
+            $res .= '<a class="timeline-nav-item" href="#year-' . $index . '">' . $arr[0] . '</a>';
         }
         $res .= '</nav>';
-        $res .= '</div>'; // .year
-        $res .= '<div class="timeline">';
+        $res .= '<div class="timeline-content">';
 
         foreach ($items as $index => $item) {
 
diff --git a/wp-content/themes/c6/resources/assets/scripts/timeline.js b/wp-content/themes/c6/resources/assets/scripts/timeline.js
index 9231055..6b2d2d5 100644
--- a/wp-content/themes/c6/resources/assets/scripts/timeline.js
+++ b/wp-content/themes/c6/resources/assets/scripts/timeline.js
@@ -3,5 +3,5 @@ import scrollSpy from 'simple-scrollspy';
 scrollSpy('#timeline-nav', {
     offset: -200,
     sectionClass: '.timeline-item',
-    menuActiveTarget: '.year-item',
+    menuActiveTarget: '.timeline-nav-item',
 });
diff --git a/wp-content/themes/c6/resources/assets/styles/common/mixins.styl b/wp-content/themes/c6/resources/assets/styles/common/mixins.styl
index 49271e3..5968797 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/mixins.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/mixins.styl
@@ -12,6 +12,15 @@ constrain(property, value = $horizontal-gutter, max-width = $content-max-width)
       {property}: $max
     }
   }
+
+  // Prevent vw / % units from getting too small
+  +below(750px) {
+    // Only do this if we are dealing with a percentage or vw unit
+    if (unit(value) is '%' || unit(value) is 'vw') {
+      $min = 750px * unit(value / 100, '') // Convert percentage to a decimal
+      {property}: $min
+    }
+  }
 }
 
 // Apply percentage based vertical padding - defaults to global gutter value if nothing passed
diff --git a/wp-content/themes/c6/resources/assets/styles/common/variables.styl b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
index c1b896e..4264994 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/variables.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
@@ -26,7 +26,7 @@ rupture.scale        = 0 400px   768px   1024px
 rupture.scale-names  = 'small' 'medium' 'large'
 rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
 $breakpoint-columns  = 900px
-$breakpoint-menu     = 768px
+$breakpoint-menu     = 850px
 
 // Lost Grid setup (mostly used for Products)
 @lost gutter 5%
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
index db03155..90183e4 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
@@ -4,34 +4,49 @@
   display: flex
   justify-content: center
 
-.year
-  position: sticky
-  align-self flex-start
-  top: 149px
-  width: 144px
-  @media (max-width: 425px)
-    display: none
-  &-item
-    display: block
-    margin-bottom: 1.5em
-    &.active
-      font-size: $font-size.medium
-      color: $colors.orange
-
 .timeline
-  padding-right: 144px
-  @media (max-width: 1080px)
-    padding-right 0
+  &-nav
+    position: sticky
+    align-self: flex-start
+    top: 149px
+    flex: 0 0 144px
+
+    +below(1080px)
+      flex-basis: 100px
+
+    +below(650px)
+      display: none
+
+    &-item
+      display: block
+      margin-bottom: 1.5em
+      &:hover
+        color: $colors.orange
+      //&.active
+      //  font-size: $font-size.medium
+      //  color: $colors.orange
+
+  &-content
+    padding-right: 144px
+    +below(1080px)
+      padding-right: 0
   &-item
-    margin-bottom: 96px
+    constrain(margin-bottom, 5vw)
     max-width: 960px
     &-year
       margin-bottom: 0.8888em
+      +below('medium')
+        font-size: 40px
+
     &-title
       font-size: $font-size.large
       margin-bottom: 1.333em
+      +below('medium')
+        font-size: 28px
+
     &-img
-      margin-bottom: 48px
+      display: block
+      constrain(margin-bottom, 2.5vw)
     &-body
       p
         margin-bottom: 3em
@@ -39,11 +54,14 @@
         font-size: $font-size.medium
         font-weight: lighter
         margin-bottom: 1em
-        margin-top: 2em
+        constrain(margin-top, 2.5vw)
       h3
         font-size: $font-size.large
         font-weight: lighter
         margin-bottom 1.33em
+        +below('medium')
+          font-size: 28px
+
       ul
         list-style none
         margin-left: 0.35em
-- 
2.39.5