From: Stephen Cameron Date: Tue, 5 Nov 2019 18:55:25 +0000 (+0100) Subject: WIP #3053 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ca3466e3d773acdef5b3989a11c0aee9e9a1b61d;p=ccv-wordpress.git WIP #3053 --- diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php index 34780f9..d502e1e 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php @@ -2,12 +2,11 @@ namespace Cube\Elementor\Widgets; -use Elementor\Widget_Base; use Elementor\Controls_Manager; use Elementor\Utils; -class BackgroundImage extends Widget_Base { +class BackgroundImage extends _Base { protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically @@ -26,11 +25,6 @@ class BackgroundImage extends Widget_Base { return 'eicon-image'; } - // Where to display the widget in the Elementor interface - public function get_categories() { - return [ 'theme-elements' ]; - } - /** * List of scripts the widget depends on. * Used to set scripts dependencies required to run the widget. @@ -88,6 +82,8 @@ class BackgroundImage extends Widget_Base { ); $this->end_controls_section(); + + $this->common_controls(); } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php index 0ce746e..57e86d7 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeaderSlideshow.php @@ -3,13 +3,12 @@ namespace Cube\Elementor\Widgets; use Elementor\Utils; -use Elementor\Widget_Base; use Elementor\Controls_Manager; use function Roots\asset; -class HeaderSlideshow extends Widget_Base { +class HeaderSlideshow extends _Base { protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically @@ -28,11 +27,6 @@ class HeaderSlideshow extends Widget_Base { return 'eicon-slideshow'; } - // Where to display the widget in the Elementor interface - public function get_categories() { - return [ 'theme-elements' ]; - } - /** * List of scripts the widget depends on. * Used to set scripts dependencies required to run the widget. @@ -102,6 +96,8 @@ class HeaderSlideshow extends Widget_Base { ); $this->end_controls_section(); + + $this->common_controls(); } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php index 3a74851..4a4d139 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/LinkCarousel.php @@ -2,7 +2,6 @@ namespace Cube\Elementor\Widgets; -use Elementor\Widget_Base; use Elementor\Controls_Manager; use Elementor\Utils; @@ -10,7 +9,7 @@ use function Roots\view; use function Roots\asset; -class LinkCarousel extends Widget_Base { +class LinkCarousel extends _Base { // Widget name / ID public function get_name() { @@ -27,11 +26,6 @@ class LinkCarousel extends Widget_Base { return 'eicon-slider-device'; } - // Where to display the widget in the Elementor interface - public function get_categories() { - return [ 'theme-elements' ]; - } - /** * List of scripts the widget depends on. * Used to set scripts dependencies required to run the widget. @@ -104,7 +98,7 @@ class LinkCarousel extends Widget_Base { ); $this->end_controls_section(); - + $this->common_controls(); } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php index 2d19caa..388f311 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/NewsBanner.php @@ -2,11 +2,10 @@ namespace Cube\Elementor\Widgets; -use Elementor\Widget_Base; use Elementor\Controls_Manager; -class NewsBanner extends Widget_Base { +class NewsBanner extends _Base { protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically @@ -25,11 +24,6 @@ class NewsBanner extends Widget_Base { return 'eicon-posts-ticker'; } - // Where to display the widget in the Elementor interface - public function get_categories() { - return [ 'theme-elements' ]; - } - /** * List of scripts the widget depends on. * Used to set scripts dependencies required to run the widget. @@ -67,6 +61,8 @@ class NewsBanner extends Widget_Base { ); $this->end_controls_section(); + + $this->common_controls(); } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php index 5225308..f3fa5c7 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/PictoGrid.php @@ -2,14 +2,13 @@ namespace Cube\Elementor\Widgets; -use Elementor\Widget_Base; use Elementor\Controls_Manager; use Elementor\Utils; use function Roots\view; -class PictoGrid extends Widget_Base { +class PictoGrid extends _Base { // Widget name / ID public function get_name() { @@ -26,11 +25,6 @@ class PictoGrid extends Widget_Base { return 'eicon-posts-grid'; } - // Where to display the widget in the Elementor interface - public function get_categories() { - return [ 'theme-elements' ]; - } - /** * List of scripts the widget depends on. * Used to set scripts dependencies required to run the widget. @@ -87,12 +81,12 @@ class PictoGrid extends Widget_Base { 'label_block' => true, ], ], - 'title_field' => '{{{ title }}}', + 'title_field' => '{{{ description }}}', ] ); $this->end_controls_section(); - + $this->common_controls(); } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php index bf4cebd..19b9a28 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/TextBlock.php @@ -2,11 +2,9 @@ namespace Cube\Elementor\Widgets; -use Elementor\Widget_Base; use Elementor\Controls_Manager; - -class TextBlock extends Widget_Base { +class TextBlock extends _Base { // Widget name / ID public function get_name() { @@ -23,11 +21,6 @@ class TextBlock extends Widget_Base { return 'eicon-post-title'; } - // Where to display the widget in the Elementor interface - public function get_categories() { - return [ 'theme-elements' ]; - } - /** * List of scripts the widget depends on. * Used to set scripts dependencies required to run the widget. @@ -98,7 +91,6 @@ class TextBlock extends Widget_Base { $this->end_controls_section(); - $this->start_controls_section( 'section_formatting', [ @@ -106,28 +98,7 @@ class TextBlock extends Widget_Base { ] ); - $this->add_control( - 'padding_top', - [ - 'label' => __('Disable padding top', 'cube'), - 'type' => Controls_Manager::SWITCHER, - 'default' => '', - 'return_value' => 'pt-0', - 'prefix_class' => '', - ] - ); - - $this->add_control( - 'padding_bottom', - [ - 'label' => __('Disable padding bottom', 'cube'), - 'type' => Controls_Manager::SWITCHER, - 'default' => '', - 'return_value' => 'pb-0', - 'prefix_class' => '', - ] - ); - + /* $this->add_control( 'title_size', [ @@ -140,6 +111,7 @@ class TextBlock extends Widget_Base { 'default' => '', ] ); + */ $this->add_control( 'title_color', @@ -223,6 +195,8 @@ class TextBlock extends Widget_Base { ); $this->end_controls_section(); + + $this->common_controls(); } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php new file mode 100644 index 0000000..d603d82 --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/_Base.php @@ -0,0 +1,59 @@ +spacing_controls(); + } + + // Common widget spacing controls + public function spacing_controls() { + + $this->start_controls_section( + 'section_spacing', + [ + 'label' => __( 'Spacing', 'cube' ), + ] + ); + + $this->add_control( + 'margin_top', + [ + 'label' => __('Disable margin top', 'cube'), + 'type' => Controls_Manager::SWITCHER, + 'default' => '', + 'return_value' => 'mt-0!', + 'prefix_class' => '', + ] + ); + + $this->add_control( + 'margin_bottom', + [ + 'label' => __('Disable margin bottom', 'cube'), + 'type' => Controls_Manager::SWITCHER, + 'default' => '', + 'return_value' => 'mb-0!', + 'prefix_class' => '', + ] + ); + + $this->end_controls_section(); + + } + +} diff --git a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl index 33dab51..d48d482 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl @@ -26,7 +26,9 @@ // Override default spacing between widgets -.elementor-widget:not(:last-child) +// All widgets get the bottom margin, even the last child because normally +// this is desired and if it's not, we can add the class `mb-0!` to it... +.elementor-widget-wrap .elementor-widget //:not(:last-child) constrain(margin-bottom, $vertical-gutter) // Set margin bottom to standard gutter // Get rid of default 10px padding around elements diff --git a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl index c4b3f83..aafad1e 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl @@ -28,6 +28,12 @@ .menu-item @apply bg-purple-dark text-white font-display uppercase + &:hover + @apply text-pink + + &:before // Submenu arrow + @apply border-pink + // Menu item divider &:after display: none @@ -56,7 +62,10 @@ &:nth-of-type(odd) @apply bg-pink &:nth-of-type(even) - @apply bg-teal + @apply bg-purple + + &:before, &:after + display: none // Language options .locales @@ -73,6 +82,9 @@ &:not(:last-child) margin-right: 1.125em + &:hover + @apply text-pink + // Close button #close-menu diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl index 4e80b05..9e88033 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/picto-grid.styl @@ -1,8 +1,15 @@ .picto-grid display: grid - // Automatic number of columns based on number of children - // but with a min-width to stop them getting too small... - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) + grid-template-columns: repeat(4, 1fr) + constrain(grid-gap, 5vw) + horizontal-spacing(5vw, margin) + + +below(900px) + grid-template-columns: repeat(3, 1fr) + +below(650px) + grid-template-columns: repeat(2, 1fr) + +below(400px) + grid-template-columns: 1fr &-image-wrapper position: relative @@ -27,9 +34,9 @@ &-image flex: 0 0 auto - max-width: 60% !important - justify-self: end - margin-bottom: 1em + max-width: 50% !important + max-height: 40% + margin-bottom: 0.5em &-title flex: 0 0 auto @@ -39,6 +46,8 @@ &-description text-align: center + max-width: 320px + margin: 0 auto &:before @apply bg-pink diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl index ca0481e..41008d5 100644 --- a/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/text-block.styl @@ -1,15 +1,17 @@ // Text block widget (Elementor defaults) .elementor-widget-cube-text //.elementor-widget-container - vertical-spacing(7.5vw) - constrain(padding-left, 10vw) - constrain(padding-right, 7.5vw) + vertical-spacing(7.5vw, margin) + constrain(margin-left, 10vw) + constrain(margin-right, 7.5vw) width: 100% box-sizing: content-box // So padding doesn't influence max-width +below(500px) - horizontal-spacing(5vw) + horizontal-spacing(5vw, margin) .text-block + > * + * // Automatic spacing between direct child elements + margin-top: 1.5em &-title @apply text-2xl antialiased @@ -22,20 +24,23 @@ @apply text-xl // Note: also affected by the base HTML font size since it is converted rems // No bottom margin if it's the last element (ie. no body below) - &:last-child - margin-bottom: 0 + //&:last-child + // margin-bottom: 0 &-body font-weight: 300 - margin-top: r(40px) + //margin-top: r(40px) // If the body is the first child, there's no title // so we don't want the top margin... - &:first-child - margin-top: 0 + //&:first-child + // margin-top: 0 + + > * + * // Automatic spacing between direct child elements + margin-top: 1.5em h3 - @apply font-medium text-lg + @apply font-body font-medium text-lg a @apply text-pink @@ -46,6 +51,20 @@ b, strong font-weight: 400 + li + position: relative + + &:before + content: '' + position: absolute + top: 0.4em + left: -1.3em + width: 7px + height: 13px + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E") + background-repeat: no-repeat + background-size: contain + &-cta @apply antialiased margin-top: r(30px) diff --git a/wp-content/themes/CCV/resources/views/partials/header.blade.php b/wp-content/themes/CCV/resources/views/partials/header.blade.php index ba8c6b0..24a88bb 100644 --- a/wp-content/themes/CCV/resources/views/partials/header.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php @@ -28,14 +28,14 @@ @if ($button_1) - + {{ $button_1->title }} @endif @if ($button_2) - + {{ $button_2->title }} diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js index 99f5b2b..3723b02 100644 --- a/wp-content/themes/CCV/tailwind.config.js +++ b/wp-content/themes/CCV/tailwind.config.js @@ -38,8 +38,12 @@ module.exports = { '3xl': '3.0909rem', // 68px }, padding: { + '0!': '0 !important', // Special overrides '100%': '100%', // Used for proportional padding to make a square }, + margin: { + '0!': '0 !important', + } }, }, variants: {},