From 80fcce288c3752c4e735d5e9de0a04aba847ad0f Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 2 Oct 2019 19:37:01 +0200 Subject: [PATCH] WIP #3053 @7 --- .../mu-plugins/cube/src/Elementor/Setup.php | 1 + .../src/Elementor/Widgets/HeaderSlideshow.php | 149 ++++++++++++++++++ .../cube/src/Elementor/Widgets/TextBlock.php | 2 +- .../CCV/resources/assets/styles/app.styl | 1 + .../assets/styles/common/animations.styl | 6 + .../assets/styles/common/global.styl | 9 ++ .../resources/assets/styles/common/setup.styl | 2 +- .../assets/styles/components/headings.styl | 13 +- .../assets/styles/components/navigation.styl | 42 ++++- .../assets/styles/components/sections.styl | 4 +- .../assets/styles/widgets/text-block.styl | 7 +- .../resources/views/partials/footer.blade.php | 8 +- wp-content/themes/CCV/tailwind.config.js | 12 ++ 13 files changed, 242 insertions(+), 14 deletions(-) create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php create mode 100644 wp-content/themes/CCV/resources/assets/styles/common/animations.styl diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php index b2168f0..0243899 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php @@ -32,6 +32,7 @@ class Setup { $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() ); $elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() ); + $elementor->widgets_manager->register_widget_type( new Widgets\HeaderSlideshow() ); } protected function _customise_sections() { diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php new file mode 100644 index 0000000..99a810f --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php @@ -0,0 +1,149 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Header Slideshow', 'cube' ), + ] + ); + + $this->add_control( + 'images', + [ + 'label' => __( 'Add Images', 'elementor' ), + 'type' => Controls_Manager::GALLERY, + 'default' => [], + 'show_label' => false, + 'dynamic' => [ + 'active' => true, + ], + ] + ); + + $this->add_control( + 'title', + [ + 'label' => __( 'Title', 'elementor' ), + 'type' => Controls_Manager::TEXTAREA, + 'placeholder' => __( 'Enter your title', 'elementor' ), + 'default' => '', + ] + ); + + $this->add_control( + 'subtitle', + [ + 'label' => __( 'Subtitle', 'cube' ), + 'type' => Controls_Manager::TEXTAREA, + 'placeholder' => __( 'Enter your subtitle', 'cube' ), + 'default' => '', + ] + ); + + + $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() { + + $id = 'header_slideshow_' . $this->get_id(); + $title = $this->get_settings('title'); + $subtitle = $this->get_settings('subtitle'); + $images = $this->get_settings('images'); + + // When this element is present, add a class to the body so the header can be styled differently (transparent background) + add_filter('body_class', function($classes) { + $classes[] = 'header-slideshow-present'; + return $classes; + }); + + + ?> + +
+ + +
+ +
+

+

+
+ + + +
+ + +
+
+
+ +
+ +
-
-
+
+
@php(dynamic_sidebar('sidebar-footer-1'))
-
+
@php(dynamic_sidebar('sidebar-footer-2'))
{{-- Copyright message and links --}} -
+
@php(dynamic_sidebar('sidebar-footer-copyright'))
diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js index 099a81d..0925334 100644 --- a/wp-content/themes/CCV/tailwind.config.js +++ b/wp-content/themes/CCV/tailwind.config.js @@ -3,8 +3,20 @@ const { wordpressUtilities } = require('tailwindcss-wordpress'); module.exports = { theme: { + screens: { + // We're using the desktop-first approach to media queries so everything is max-width based + // The most important breakpoint is when the columns stack. This is defined in setup.styl + // and for now it needs to be manually matched here. The idea is that we can set styles using + // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'. + // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller + // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2) + //'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... } + 'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... } + 'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... } + }, extend: { colors: { + 'inherit': 'inherit', 'dark': '#1A0707', // Text colour 'light': '#F6F5F5', // Light grey backgrounds 'purple-dark': '#2E2C40', // Footer and other dark sections -- 2.39.5