From 4d3f19007a4ee507de437395db8ea7dac697e5c7 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 20 Apr 2020 17:32:59 +0200 Subject: [PATCH] Done #3602 @5 --- .../mu-plugins/cube/src/Elementor/Setup.php | 1 + .../cube/src/Elementor/Widgets/Timeline.php | 2 +- .../Elementor/Widgets/TimelineHorizontal.php | 131 ++++++++++++++++++ .../styles/widgets/timeline-horizontal.styl | 72 ++++++++++ .../views/widgets/picto-grid.blade.php | 2 +- .../widgets/timeline-horizontal.blade.php | 32 +++++ 6 files changed, 238 insertions(+), 2 deletions(-) create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/timeline-horizontal.styl create mode 100644 wp-content/themes/CCV/resources/views/widgets/timeline-horizontal.blade.php diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php index 273d259..91d1732 100644 --- 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 ba2f28d..df3b870 100644 --- 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 index 0000000..78a9627 --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TimelineHorizontal.php @@ -0,0 +1,131 @@ +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 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 f7c595d..45a551a 100644 --- 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 @@ @endif @if ($item['title']) -

{!! nl2br($item['title']) !!}

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