From adacb57c8ae60f92ceb2ccc0abb066502e8b3469 Mon Sep 17 00:00:00 2001
From: nael <nael@cubedesigners.com>
Date: Tue, 7 May 2019 16:53:46 +0200
Subject: [PATCH] WIP #2685 @6

---
 .../cube/src/Elementor/Widgets/Timeline.php   | 16 +++++-----
 .../resources/assets/styles/common/debug.styl |  2 +-
 .../assets/styles/common/variables.styl       |  1 +
 .../assets/styles/components/forms.styl       | 20 ++++++++-----
 .../assets/styles/pages/contact.styl          | 17 +++++++++--
 .../assets/styles/widgets/timeline.styl       | 29 ++++++++++---------
 6 files changed, 51 insertions(+), 34 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 709efd3..98c6c37 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -81,15 +81,15 @@ class Timeline extends Widget_Base
                 'fields' => [
 
                     [
-                        'name' => 'title',
-                        'label' => __('Title', 'cube'),
+                        'name' => 'year',
+                        'label' => __('Year', 'cube'),
                         'type' => Controls_Manager::TEXT,
                         'label_block' => true,
                         'default' => '',
                     ],
                     [
-                        'name' => 'subtitle',
-                        'label' => __('subtitle', 'cube'),
+                        'name' => 'title',
+                        'label' => __('Title', 'cube'),
                         'type' => Controls_Manager::TEXT,
                         'label_block' => true,
                         'default' => '',
@@ -110,7 +110,7 @@ class Timeline extends Widget_Base
                     ],
 
                 ],
-                'title_field' => '{{{ title }}}',
+                'title_field' => '{{{ year }}}',
             ]
         );
 
@@ -134,7 +134,7 @@ class Timeline extends Widget_Base
         $res .= '<nav id="timeline-nav">';
         foreach ($items as $index => $item) {
 
-            $arr = explode(' ', trim($item['title'])); // select the first word
+            $arr = explode(' ', trim($item['year'])); // select the first word
             $res .= '<a class="year-item" href="#year-' . $index . '">' . $arr[0] . '</a>';
 
         }
@@ -145,8 +145,8 @@ class Timeline extends Widget_Base
         foreach ($items as $index => $item) {
 
             $res .= '<div id="year-'.$index.'" class="timeline-item" data-timeline="' . $index . '">';
-            $res .= '<h2 class="timeline-item-title">' . $item['title'] . '</h2>';
-            $res .= '<h3 class="timeline-item-subtitle">' . $item['subtitle'] . '</h3>';
+            $res .= '<h2 class="timeline-item-year">' . $item['year'] . '</h2>';
+            $res .= '<h3 class="timeline-item-title">' . $item['title'] . '</h3>';
             $res .= wp_get_attachment_image($item['image']['id'], 'large', false, ['class' => 'timeline-item-img']);
             $res .= '<div class="timeline-item-body">' . $item['body'] . '</div>';
             $res .= '</div>'; // .timeline-item
diff --git a/wp-content/themes/c6/resources/assets/styles/common/debug.styl b/wp-content/themes/c6/resources/assets/styles/common/debug.styl
index e3362e8..a4e5895 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/debug.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/debug.styl
@@ -16,7 +16,7 @@ if ($debug)
     lost-utility: overlay $content-max-width 1 10px #ccc;
 
   body
-    lost-utility: overlay 1536px 1 2px rgba(#fc0, 0.7);
+    lost-utility: overlay 960px 1 2px rgba(#fc0, 0.7);
 
     // Centre line
     &:after
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 db7d899..7e28eb9 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/variables.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
@@ -36,6 +36,7 @@ $colors = {
   orange: #FF431D,
   light-grey: #F5F5F5,
   secondary: #4ECDC4,
+  purple: #582ABB,
 }
 
 // Colour class helpers
diff --git a/wp-content/themes/c6/resources/assets/styles/components/forms.styl b/wp-content/themes/c6/resources/assets/styles/components/forms.styl
index aa4f556..0728513 100644
--- a/wp-content/themes/c6/resources/assets/styles/components/forms.styl
+++ b/wp-content/themes/c6/resources/assets/styles/components/forms.styl
@@ -21,7 +21,7 @@ input[type="text"], input[type="email"], input[type="number"], select
   border: none
   border-radius: 0
   padding: 0.5em 0
-  border-bottom: 2px solid $border-color
+  border-bottom: 1px solid $border-color
   width: 100%
   font-smoothing()
 
@@ -38,7 +38,8 @@ select
   background-size: 1em auto
 
 textarea
-  border: 2px solid $border-color
+  border: 1px solid $border-color
+  border-radius: 4px
   width: 100%
   min-height: 200px
   padding: 1em
@@ -48,16 +49,17 @@ input[type="submit"]
   appearance: none
   cursor: pointer
   border: none
-  background-color: $colors.orange
+  background-color: $colors.purple
   color: #fff
   font-weight: 500
-  padding: 0.75em 3em
-  border-radius: 100px
+  padding: 1.25em 6.6875em
+  border-radius: 4px
 
   &:hover
     opacity: 0.85
 
-
+.message-label
+  text-align left
 // Common form styling
 .form-two-cols
   display: flex
@@ -65,11 +67,13 @@ input[type="submit"]
   justify-content: space-between
   > *
     flex-basis: 47%
-
+    @media (max-width: 425px)
+      flex-basis: 100%
+  input
+    max-width: 480px
     +below(500px)
       flex-basis: 100%
 
-
 // HTML Forms Plugin styling
 .hf-message
   margin: 2em 0
diff --git a/wp-content/themes/c6/resources/assets/styles/pages/contact.styl b/wp-content/themes/c6/resources/assets/styles/pages/contact.styl
index 779a315..b95e08d 100644
--- a/wp-content/themes/c6/resources/assets/styles/pages/contact.styl
+++ b/wp-content/themes/c6/resources/assets/styles/pages/contact.styl
@@ -1,8 +1,19 @@
 .contact-form
-  text-align: center
-
+  max-width: 1250px
+  margin: 0 auto
   input, textarea
     margin-bottom: 2em
 
   textarea
-    margin-top: 1.5em
+    margin-top: 12px
+.form-two-cols-end
+  display: flex
+  justify-content: space-between
+  span
+    margin-bottom: 2em
+  @media (max-width: 425px)
+    flex-direction column
+.form-right
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
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 757c0bd..dd58a77 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl
@@ -7,47 +7,48 @@
 .year
   position: sticky
   align-self flex-start
-  padding: 0 5.375rem
   top: 149px
+  width: 144px
   @media (max-width: 425px)
     display: none
   &-item
     display: block
-    margin-bottom: 24px
-    text-align: right
+    margin-bottom: 1.5em
     &.active
       font-size: $font-size-small
       color: $colors.orange
 
 .timeline
-  display: flex
-  flex-direction: column
-  justify-content: center
-  align-items: center
+  padding-right: 144px
+  @media (max-width: 1080px)
+    padding-right 0
   &-item
-    margin-bottom: 4em
+    margin-bottom: 96px
+    max-width: 960px
+    &-year
+      margin-bottom: 0.8888em
     &-title
-      margin-top: 15px
-      margin-bottom: 0,8888em
-    &-subtitle
       font-size: $font-size-medium
       margin-bottom: 1.333em
     &-img
       margin-bottom: 48px
     &-body
       p
-        max-width: 960px
         margin-bottom: 3em
       h4
         font-size: $font-size-small
         font-weight: lighter
         margin-bottom: 1em
-        max-width: 960px
+        margin-top: 2em
+      h3
+        font-size: $font-size-medium
+        font-weight: lighter
+        margin-bottom 1.33em
       ul
         list-style none
         margin-left: 0.35em
         li
-          margin-bottom: 1.8em
+          margin-bottom: 1.5em
           max-width: 960px
           position: relative
           &::before
-- 
2.39.5