]> _ Git - c6-wordpress.git/commitdiff
WIP #2685 @6
authornael <nael@cubedesigners.com>
Tue, 7 May 2019 14:53:46 +0000 (16:53 +0200)
committernael <nael@cubedesigners.com>
Tue, 7 May 2019 14:53:46 +0000 (16:53 +0200)
wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
wp-content/themes/c6/resources/assets/styles/common/debug.styl
wp-content/themes/c6/resources/assets/styles/common/variables.styl
wp-content/themes/c6/resources/assets/styles/components/forms.styl
wp-content/themes/c6/resources/assets/styles/pages/contact.styl
wp-content/themes/c6/resources/assets/styles/widgets/timeline.styl

index 709efd3a964173cf035679468d2133160fe2747e..98c6c3741025e59167c0627ba27264dcafef02e9 100644 (file)
@@ -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
index e3362e8104e2ca06b3fd5e3611af7ffe104cc5d9..a4e5895cb00ab4c95fcbc62c26208a672b047f82 100644 (file)
@@ -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
index db7d899716d6dad74cc007646ab1114b4b36accc..7e28eb9a2ded8670f75bb10739cf88c9412f7479 100644 (file)
@@ -36,6 +36,7 @@ $colors = {
   orange: #FF431D,
   light-grey: #F5F5F5,
   secondary: #4ECDC4,
+  purple: #582ABB,
 }
 
 // Colour class helpers
index aa4f55695f542a6483b5643154b5a57c738183e8..072851343c2b499434ba65a5716064736259ac0a 100644 (file)
@@ -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
index 779a31504be4efff14aa6886ad31b2ebdde97bae..b95e08d04dc516b2002fd7b323bc2e71de1dccbb 100644 (file)
@@ -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;
index 757c0bd30af3ae1bf3c6e812568d16c039dbe187..dd58a77bd63a25f2115e6bb9275d3926bd8f7269 100644 (file)
@@ -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