From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 8 Apr 2020 15:47:42 +0000 (+0200)
Subject: Done #3573 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=810ecfc2429df41017ff38a5ba0241a0b2ea43b3;p=ccv-wordpress.git

Done #3573 @5
---

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 ac18875..ba2f28d 100644
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -53,6 +53,18 @@ class Timeline extends _Base {
             ]
         );
 
+        $this->add_control(
+            'bg_color',
+            [
+                'label' => __( 'Background Colour', 'cube' ),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .timeline' => '--timeline-bg: {{VALUE}};',
+                ],
+            ]
+        );
+
         $this->add_control(
             'items',
             [
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/swiper.styl b/wp-content/themes/CCV/resources/assets/styles/components/swiper.styl
new file mode 100644
index 0000000..fa29e20
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/components/swiper.styl
@@ -0,0 +1,60 @@
+//== Elementor Swiper overrides
+// Note: These arrow styles should also match those in slick-carousel.styl
+// The styles can't be shared because Slick and Swiper have different structures
+.elementor-swiper-button, .elementor-lightbox .elementor-swiper-button
+  @apply bg-pink text-white
+  border-radius: 50%
+  font-size: 40px
+  width: 1.25em
+  height: @width
+  align-items: center
+  justify-content: center
+  transition: all 0.2s ease-out
+
+  &:hover
+    @apply bg-teal
+
+  .eicon-chevron
+    &-left:before
+      content: '\e89f'
+    &-right:before
+      content: '\e89e'
+
+  // Icon holder - make sure it remains transparent (because our buttons always have a their own background)
+  i
+    background-color: transparent !important
+
+// Adjust width of container to make room for arrow buttons
+.elementor-arrows-position-outside
+  .swiper-container
+    width: calc(100% - 160px);
+
+    // On Smaller screens, push even closer to the edge to maximise Swiper content width
+    +below(768px)
+      width: calc(100% - 90px);
+
+      .elementor-swiper-button
+        font-size: 45px
+
+        &-prev
+          left: -10px
+        &-next
+          right: -10px
+
+    +below(500px)
+      width: calc(100% - 50px);
+
+      .elementor-swiper-button
+        font-size: 35px
+
+.elementor-lightbox
+  .elementor-swiper-button
+    &-prev
+      left: 1.5rem
+      +below(768px)
+        left: 0.5rem
+
+    &-next
+      right: 1.5rem
+      +below(768px)
+        right: 0.5rem
diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
index 127d267..3aaa4bd 100644
--- a/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline.styl
@@ -2,6 +2,7 @@ $breakpoint-timeline = 600px // When timeline collapses into 1 column
 $dot-size = 14px // width or height of a single background dot, including its gutter
 
 .timeline
+  --timeline-bg: #fff // Used for masking elements so needs match bg of container (customisable in Elementor)
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='14'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23707070'/%3E%3C/svg%3E")
   background-repeat: repeat-y
   background-position: 3.3em 0
@@ -18,7 +19,7 @@ $dot-size = 14px // width or height of a single background dot, including its gu
     +below($breakpoint-timeline)
       flex-direction: column
       align-items: center
-      background-color: #fff
+      background-color: var(--timeline-bg)
       padding-bottom: $dot-size
 
     &-date-wrapper
@@ -41,13 +42,13 @@ $dot-size = 14px // width or height of a single background dot, including its gu
       // with white so background dots don't show above...
       &:before
         .timeline-item:first-child &
-          background-color: #fff
+          background-color: var(--timeline-bg)
 
       // For the last timeline item, mask any space BELOW the date
       // with white so background dots don't show above...
       &:after
         .timeline-item:last-child &
-          background-color: #fff
+          background-color: var(--timeline-bg)
 
       +below($breakpoint-timeline)
         background: none
@@ -59,6 +60,7 @@ $dot-size = 14px // width or height of a single background dot, including its gu
 
 
     &-date
+      @apply relative
       @apply bg-teal text-white text-lg rounded-full
       @apply flex items-center justify-center
       flex: 0 0 auto
@@ -67,21 +69,28 @@ $dot-size = 14px // width or height of a single background dot, including its gu
       overflow: hidden
       box-shadow: inset 0 0 0 0.45em rgba(#fff, 0.6)
       box-sizing: content-box // So border takes space outside circle instead of making it smaller
-      border: $dot-size solid #fff // White border works as mask so background dots don't get too close to date circles
+      border: $dot-size solid var(--timeline-bg) // Border works as mask so background dots don't get too close to date circles
       margin-left: - $dot-size // Offset the invisible white border on the left
       margin-right: $dot-size * 9 // Number of dots to show
 
       +below(1200px)
-        margin-right: $dot-size * 6
-      +below(768px)
         margin-right: $dot-size * 4
       +below($breakpoint-timeline)
         margin: - $dot-size 0 0 0
 
-
-      &.is-highlight
+      &-highlight
         @apply bg-pink
 
+      // Center and contain image
+      img
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+        object-position: center
+
     &-content
       +below($breakpoint-timeline)
         max-width: 280px
diff --git a/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php b/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
index fd9df55..c4b47f6 100644
--- a/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/timeline.blade.php
@@ -3,9 +3,34 @@
   @foreach ($items as $item)
     <div class="timeline-item">
       <div class="timeline-item-date-wrapper">
-        <div class="timeline-item-date @if($item['highlight'] == 'yes')is-highlight @endif">{{ $item['year'] }}</div>
+
+        @php
+          $class = '';
+          if ($item['highlight'] == 'yes') $class .= ' timeline-item-date-highlight';
+          if ($item['image']['id']) $class .= ' bg-transparent';
+        @endphp
+
+        <div class="timeline-item-date{{ $class }}">
+          {{ $item['year'] }}
+          @if ($item['image']['id']) @image($item['image']['id'], 'medium') @endif
+        </div>
+      </div>
+      <div class="timeline-item-content">
+        @if ($item['title'])
+          <h4>{{ $item['title'] }}</h4>
+        @endif
+        {!! $item['details'] !!}
+
+        @if ($item['cta_text'])
+          @php
+            $target = $item['cta_link']['is_external'] ? ' target="_blank"' : '';
+            $rel = $item['cta_link']['nofollow'] ? ' rel="nofollow"' : '';
+          @endphp
+            <a class="btn px-4 py-2 -mt-2" href="{{ $item['cta_link']['url'] }}"{!! $target !!}{!! $rel !!}>
+              {{ $item['cta_text'] }}
+            </a>
+        @endif
       </div>
-      <div class="timeline-item-content">{!! $item['details'] !!}</div>
     </div>
   @endforeach
 </div>