Done #3602 @5

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index 273d259200018f9e47b386a1a9e005e2d1b08f5a..91d1732575965dbaeabd8ff0e80f2780f298186c 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
@@ -40,6 +40,7 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\PhotoGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\PeopleGrid() );
         $elementor->widgets_manager->register_widget_type( new Widgets\Timeline() );
+        $elementor->widgets_manager->register_widget_type( new Widgets\TimelineHorizontal() );
         $elementor->widgets_manager->register_widget_type( new Widgets\ScientificNews() );
         $elementor->widgets_manager->register_widget_type( new Widgets\DynamicTable() );
         $elementor->widgets_manager->register_widget_type( new Widgets\FancyList() );

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 ba2f28de81fcb5d1a12c5f4ca666f387cd8985a9..df3b870e84e13b105e5979536895a60f5a9bc23b 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/Timeline.php
@@ -17,7 +17,7 @@ class Timeline extends _Base {
 
     // Elementor widget title
     public function get_title() {
-        return __('Timeline', 'cube');
+        return __('Chronologie', 'cube');
     }
 
     // Elementor interface icon

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php
new file mode 100644 (file)
index 0000000..78a9627
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php
@@ -0,0 +1,131 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+use function Roots\view;
+
+
+class TimelineHorizontal extends _Base {
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-timeline-horizontal';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __('Chronologie Horizontale', 'cube');
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        return 'eicon-date';
+    }
+
+    /**
+     * List of scripts the widget depends on.
+     * Used to set scripts dependencies required to run the widget.
+     *
+     * @since 1.0.0
+     * @access public
+     * @return array Widget scripts dependencies.
+     */
+    public function get_script_depends() {
+        return [];
+    }
+
+    /**
+     * Register the widget controls.
+     * Adds different input fields to allow the user to change and customize the widget settings.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function _register_controls() {
+
+        $this->start_controls_section(
+            'section_content',
+            [
+                'label' => __('Content', 'cube'),
+            ]
+        );
+
+        $this->add_control(
+            'image_desktop',
+            [
+                'label' => __( 'Image pour grands écrans', 'cube' ),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $this->add_control(
+            'image_mobile',
+            [
+                'label' => __( 'Image pour petits écrans', 'cube' ),
+                'type' => Controls_Manager::MEDIA,
+                'default' => [
+                    'url' => Utils::get_placeholder_image_src(),
+                ],
+            ]
+        );
+
+        $this->add_control(
+            'items',
+            [
+                'label' => __('Items', 'cube'),
+                'type' => Controls_Manager::REPEATER,
+                'fields' => [
+                    [
+                        'name' => 'title',
+                        'label' => __('Title', 'cube'),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                        'default' => '',
+                    ],
+                    [
+                        'name' => 'cta_text',
+                        'label' => __('Call to Action text', 'cube'),
+                        'type' => Controls_Manager::TEXT,
+                        'label_block' => true,
+                        'default' => ''
+                    ],
+                    [
+                        'name' => 'cta_link',
+                        'label' => __('Call to Action link', 'cube'),
+                        'type' => Controls_Manager::URL,
+                        'default' => [
+                            'url' => '',
+                            'is_external' => false,
+                        ],
+                        'show_external' => true
+                    ]
+                ],
+                'title_field' => '{{{ title }}}',
+            ]
+        );
+
+        $this->end_controls_section();
+
+    }
+
+    /**
+     * Render the widget output on the frontend.
+     * Written in PHP and used to generate the final HTML.
+     *
+     * @since 1.0.0
+     * @access protected
+     */
+    protected function render() {
+        $image_desktop = $this->get_settings('image_desktop');
+        $image_mobile = $this->get_settings('image_mobile');
+        $items = $this->get_settings('items');
+        echo view('widgets/timeline-horizontal', compact('image_desktop', 'image_mobile', 'items'));
+    }
+
+}

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
new file mode 100644 (file)
index 0000000..e72d7ce
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl
@@ -0,0 +1,72 @@
+$breakpoint-timeline-horizontal = 900px // When timeline changes to mobile view
+
+.timeline-horizontal
+  +below($breakpoint-timeline-horizontal)
+    @apply flex flex-row-reverse
+
+    // Scale all em children
+    font-size: 22px fixed
+
+  +below(550px)
+    font-size: 18px fixed
+  +below(450px)
+    font-size: 14px fixed
+  +below(380px)
+    font-size: 12px fixed
+
+  &-items
+    @apply flex justify-between items-start
+    @apply mb-6
+
+    +below($breakpoint-timeline-horizontal)
+      @apply flex-col items-center
+      flex: 1 1 75%
+      margin-bottom: 3em
+
+      > * + *
+        margin-top: 1.5em
+
+  &-item
+    @apply flex flex-col justify-center items-center
+    @apply text-center
+    flex-basis: 22% // ~1/5 columns to match horizontal image
+    max-width: 345px
+
+    +below(1100px)
+      flex-basis: 25%
+
+  &-number
+    @apply flex items-center justify-center
+    @apply bg-purple-dark rounded-full mb-2
+    @apply text-white
+    font-size: (54/22)em // Relative units so size can be controlled from parent
+    width: 1.5em
+    height: @width
+
+    +below(1280px)
+      font-size: (36/22)em
+
+  &-title
+    @apply font-normal
+    font-size: (30/22)em
+
+    +below(1280px)
+      font-size: 1em
+
+  &-btn
+    font-size: (18/22)em
+    padding: 0.5em 1em !important
+
+  &-image
+
+    &-desktop
+      +below($breakpoint-timeline-horizontal)
+        display: none
+
+    &-mobile
+      width: 100%
+      max-width: 250px !important;
+      padding-right: 2em;
+
+      +above($breakpoint-timeline-horizontal)
+        display: none

diff --git a/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php b/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php
index f7c595d72a1f86c824be310015fa4a4c95bcd494..45a551aadaa0c8af7436d06675c6ad36a5860844 100644 (file)
--- a/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php
+++ b/wp-content/themes/CCV/resources/views/widgets/picto-grid.blade.php
@@ -9,7 +9,7 @@
               <img class="picto-grid-image" src="{{ $item['image']['url'] }}" alt="">
             @endif
             @if ($item['title'])
-              <p class="picto-grid-title">{!! nl2br($item['title']) !!}</p>
+              <span class="picto-grid-title">{!! nl2br($item['title']) !!}</span>
             @endif
           </div>
         </div>

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
new file mode 100644 (file)
index 0000000..7d68166
--- /dev/null
+++ b/wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php
@@ -0,0 +1,32 @@
+{{-- TIMELINE --}}
+<div class="timeline-horizontal">
+  <div class="timeline-horizontal-items">
+    @foreach ($items as $item)
+      <div class="timeline-horizontal-item">
+
+        <div class="timeline-horizontal-number">
+          {{ $loop->iteration }}
+        </div>
+
+        <div class="timeline-horizontal-title">
+          {{ $item['title'] }}
+        </div>
+
+        @if ($item['cta_text'])
+          @php
+            $target = $item['cta_link']['is_external'] ? ' target="_blank"' : '';
+            $rel = $item['cta_link']['nofollow'] ? ' rel="nofollow"' : '';
+          @endphp
+          <a class="timeline-horizontal-btn btn px-4 py-2 mt-4" href="{{ $item['cta_link']['url'] }}"{!! $target !!}{!! $rel !!}>
+            {{ $item['cta_text'] }}
+          </a>
+        @endif
+
+      </div>
+    @endforeach
+  </div>
+  <div class="timeline-horizontal-image">
+    @image($image_desktop['id'], 'full', ['class' => 'timeline-horizontal-image-desktop'])
+    @image($image_mobile['id'], 'full', ['class' => 'timeline-horizontal-image-mobile'])
+  </div>
+</div>