From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 8 May 2019 18:37:11 +0000 (+0200)
Subject: WIP #2684 @10
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=78b8f1da938d081df5bf8ccd75b6b90f9cc68952;p=c6-wordpress.git

WIP #2684 @10
---

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php
index 50d160b..cbe32f5 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\PageHeading() );
         $elementor->widgets_manager->register_widget_type( new Widgets\HeroBlock() );
+        $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\Heading() );
         $elementor->widgets_manager->register_widget_type( new Widgets\Timeline() );
diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php
new file mode 100644
index 0000000..34780f9
--- /dev/null
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/BackgroundImage.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class BackgroundImage extends Widget_Base {
+
+    protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
+
+    // Widget name / ID
+    public function get_name() {
+        return 'cube-bg-image';
+    }
+
+    // Elementor widget title
+    public function get_title() {
+        return __( 'Flexible Image', 'cube' );
+    }
+
+    // Elementor interface icon
+    public function get_icon() {
+        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.
+     *
+     * @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_image',
+            [
+                'label' => __( 'Flexible Background Image', 'cube' ),
+            ]
+        );
+        
+        $this->add_control(
+			'image',
+			[
+				'label' => __( 'Choose Image', 'elementor' ),
+				'type' => Controls_Manager::MEDIA,
+				'default' => [
+					'url' => Utils::get_placeholder_image_src(),
+				],
+			]
+		);
+
+        $this->add_control(
+            'background_position',
+            [
+                'label' => __( 'Background Position', 'cube' ),
+                'type' => Controls_Manager::SELECT,
+                'default' => 'center',
+                'options' => [
+                    'top left' => __( 'Top Left', 'cube' ),
+                    'top center' => __( 'Top Center', 'cube' ),
+                    'top right' => __( 'Top Right', 'cube' ),
+                    'center' => __( 'Center', 'cube' ),
+                    'bottom left' => __( 'Bottom Left', 'cube' ),
+                    'bottom center' => __( 'Bottom Center', 'cube' ),
+                    'bottom right' => __( 'Bottom Right', 'cube' ),
+                ],
+            ]
+        );
+        
+        $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 = $this->get_settings('image');
+        $bg_position = $this->get_settings('background_position');
+        $meta = wp_get_attachment_metadata($image['id']);
+        $ratio = $meta['height'] / $meta['width'] * 100 .'%';
+
+        echo '<div class="bg-image" style="background-image: url('. $image['url'] .'); background-position: '. $bg_position .'"><div class="bg-image-sizer" style="padding-bottom: '. $ratio .'"></div></div>';
+
+    }
+}
diff --git a/wp-content/themes/c6/resources/assets/scripts/routes/common.js b/wp-content/themes/c6/resources/assets/scripts/routes/common.js
index 2c599f5..16898d3 100644
--- a/wp-content/themes/c6/resources/assets/scripts/routes/common.js
+++ b/wp-content/themes/c6/resources/assets/scripts/routes/common.js
@@ -1,12 +1,61 @@
 import SmoothScroll from 'smooth-scroll';
+import sidr from 'sidr/dist/jquery.sidr'; // eslint-disable-line
 
 export default {
   init() {
     // JavaScript to be fired on all pages
-      new SmoothScroll('a[href*="#"]', {
-          speed: 300,
-          offset: 0,
-      });
+
+    // Mobile Menu setup
+    $('#mobile-menu-opener').sidr({
+      name: 'offcanvas-menu',
+      source: '.nav-primary',
+      side: 'right',
+      speed: 500, // Animation speed
+      displace: true, // Push body content when opening?
+      renaming: false, // Rename existing classes / IDs?
+    });
+
+    $('#offcanvas-menu').prepend($('.header-logo')[0].outerHTML);
+
+    // Add menu overlay element
+    $('<div id="offcanvas-menu-overlay"></div>').appendTo('body');
+
+    // Auto-close mobile menu when links are clicked or we click on the overlay
+    $('#offcanvas-menu-overlay, #offcanvas-menu a').on('click', function(event) {
+      $.sidr('close', 'offcanvas-menu');  // close the div with the ID of "offcanvas-menu"
+
+      // Don't follow empty links (eg. close button)
+      if ($(this).attr('href') === '#') {
+        event.preventDefault();
+      }
+    });
+
+    // Menu toggle
+    $('#full-menu-opener').on('click', function(event) {
+
+      // On larger screens, the menu button just hides the menu
+      //if ($(window).width() < 1024) {
+      $.sidr('open', 'offcanvas-menu');
+      //} else {
+      //  $('.nav-primary').toggleClass('nav-hidden');
+      //}
+
+      event.preventDefault();
+    });
+
+    // Disable clicks on top level menu links that have sub-menus
+    $(document).on('click', '.nav-primary .menu-item-has-children > a', function(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      return false;
+    });
+
+    // Set up smooth scrolling to anchor links
+    new SmoothScroll('a[href*="#"]', {
+        speed: 300,
+        offset: 0,
+    });
+
   },
   finalize() {
     // JavaScript to be fired on all pages, after page specific JS is fired
diff --git a/wp-content/themes/c6/resources/assets/styles/common/global.styl b/wp-content/themes/c6/resources/assets/styles/common/global.styl
index 08ff15c..a16945b 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/global.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/global.styl
@@ -2,15 +2,9 @@ html
   box-sizing: border-box
   height: 100%
   font-size: $font-size-base // This value won't be converted to REMs due to exception in font-size() mixin
-  +below(1400px)
-    font-size: 18px
   +below(1250px)
-    font-size: 17px
-  +below(1100px)
-    font-size: 16px
-  +below(900px)
     font-size: 15px
-  +below(600px)
+  +below(1024px)
     font-size: 14px
 
 *,
@@ -36,6 +30,14 @@ body
 p:not(:last-of-type)
   margin-bottom: 1.5em
 
+// Make sure widget has height when column flex align-items is set
+// This is for widgets that don't take up height on their own, like
+// the flexible background image. Ideally the parent column shouldn't
+// have an alignment set (so it stretches) but this doesn't seem to do any
+// harm and it's more intuitive behaviour...
+.elementor-widget-wrap
+  height: 100%
+
 .content-inner,
 .elementor-section-boxed > .elementor-container
   horizontal-spacing()
diff --git a/wp-content/themes/c6/resources/assets/styles/common/utilities.styl b/wp-content/themes/c6/resources/assets/styles/common/utilities.styl
index 657459f..9452d9a 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/utilities.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/utilities.styl
@@ -1,3 +1,9 @@
+// Font size helpers
+for textSizeName, textSize in $font-size
+  .text-{textSizeName}
+    font-size: textSize
+
+
 .vertical-spacing
   vertical-spacing()
 
@@ -19,6 +25,10 @@
   constrain(padding-left, 7.5vw)
 .pr-7\\.5vw
   constrain(padding-right, 7.5vw)
+.pt-7\\.5vw
+  constrain(padding-top, 7.5vw)
+.pb-7\\.5vw
+  constrain(padding-bottom, 7.5vw)
 
 .font-smoothing
   font-smoothing()
diff --git a/wp-content/themes/c6/resources/assets/styles/common/variables.styl b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
index 7e28eb9..f40cf35 100644
--- a/wp-content/themes/c6/resources/assets/styles/common/variables.styl
+++ b/wp-content/themes/c6/resources/assets/styles/common/variables.styl
@@ -9,6 +9,7 @@ $vertical-gutter   = 2.5vw
 // Fonts
 $font = 'Muli', sans-serif
 
+// TODO: replace any $font-size-xxx variable references with $font-size array below
 // Font sizing
 $font-size-base         = 16px // Size of 1rem
 
@@ -18,6 +19,16 @@ $font-size-medium       = 36px // h3
 $font-size-small        = 24px // h4
 $font-size-extra-small  = 12px //
 
+$font-size = {
+  'sm': 12px,
+  'base': 16px,
+  'lg': 24px, // h4
+  'xl': 36px, // h3
+  '2xl': 54px, // h2
+  '3xl': 81px, // h1
+}
+// See utilities.styl for font-size helpers (can't be done here because we need the mixins to be included first)
+
 // Breakpoints in Rupture (https://github.com/jescalan/rupture)
 rupture.scale        = 0 400px   768px   1024px
 rupture.scale-names  = 'small' 'medium' 'large'
diff --git a/wp-content/themes/c6/resources/assets/styles/components/forms.styl b/wp-content/themes/c6/resources/assets/styles/components/forms.styl
index 0728513..3fc0be3 100644
--- a/wp-content/themes/c6/resources/assets/styles/components/forms.styl
+++ b/wp-content/themes/c6/resources/assets/styles/components/forms.styl
@@ -82,9 +82,9 @@ input[type="submit"]
   background-color: $colors.light-grey
 
   &-success
-    display: none // Don't display the message since we will be redirecting...
-    //background-color: #e8f5e9
-    //color: #4caf50
+    //display: none // Don't display the message since we will be redirecting...
+    background-color: #e8f5e9
+    color: #4caf50
 
 // ParsleyJS validation
 .parsley-errors-list
diff --git a/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl b/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl
index 01f41f5..bba19c0 100644
--- a/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl
+++ b/wp-content/themes/c6/resources/assets/styles/components/navigation-offcanvas.styl
@@ -1,59 +1,63 @@
-// Source of the off-canvas menu
-.nav-full
-  display: none
+$sidebar-width = 260px
 
-// Actual menu built by Sidr plugin
 #offcanvas-menu
-  background-color: #fff
-  horizontal-spacing(5vw)
-  vertical-spacing(2.5vw)
-  width: 35%
-  max-width: 590px
-  min-width: 320px
+  background-color: #222
+  color: #fff
+  display: block
+  position: fixed
+  top: 0
+  height: 100%
+  z-index: 999999
+  width: $sidebar-width
+  overflow-x: hidden
+  overflow-y: auto
 
-  // The default Sidr CSS has fixed offsets for hiding the menu so we need to fix that...
   &.right
-    right: -100%
+    left: auto
+    right: - $sidebar-width
+
   &.left
-    left: -100%
+    left: - $sidebar-width
+    right: auto
+
+  .header-logo
+    margin-top: 1em
+    border-bottom: none
 
-  a
     &:hover
-      color: $colors.orange
+      background-color: transparent
 
-  .close
-    position: absolute
-    constrain(top, 2.5vw)
-    constrain(right, 2.5vw)
+    &-svg
+      width: 60px
 
-  .menu-close-icon
-    width: 3rem
-    height: @width
+  ul
+    list-style-type: none
+    padding-left: 0
+    white-space: normal
 
-  .estimate-button
-    width: 100%
-    text-align: center
-    margin-bottom: 1em
-    white-space: nowrap
+    li
+      display: block
+      margin-right: 0
 
+    ul a // Second level links
+      padding-left: 40px
+      color: #bbb
+      font-weight: normal
+      text-transform: none
+
+  a
+    font-smoothing()
+    display: block
+    padding: 10px 20px
+    border-bottom: 1px solid #333
+    text-transform: uppercase
+    font-weight: 700
+    color: #fff
     &:hover
+      background: $colors.orange
+      text-decoration: none
       color: #fff
 
-    &-wrapper
-      padding-right: 4rem // Leave space for close button
-
-  // Nav lists
-  .nav-list
-    reset-list()
-
-  .menu-item
-    padding: 0.5em 0
-    border-bottom: 1px solid #D4D4D4
-
-  .nav-offers-title
-    text-transform: uppercase
-    margin-top: 1.5em
-    font-weight: 500
 
 
   // Content overlay when menu is open
diff --git a/wp-content/themes/c6/resources/assets/styles/components/wp-classes.styl b/wp-content/themes/c6/resources/assets/styles/components/wp-classes.styl
index 43dfbd9..508e92e 100644
--- a/wp-content/themes/c6/resources/assets/styles/components/wp-classes.styl
+++ b/wp-content/themes/c6/resources/assets/styles/components/wp-classes.styl
@@ -23,15 +23,15 @@
   height: auto
 
 
-@media (min-width: 30rem)
-  .alignleft
-    float: left
-    margin-right: 1rem
-  
+//@media (min-width: 30rem)
+.alignleft
+  float: left
+  margin-right: 1rem
+
 
-  .alignright
-    float: right
-    margin-left: 1rem
+.alignright
+  float: right
+  margin-left: 1rem
   
 
 
diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/footer.styl b/wp-content/themes/c6/resources/assets/styles/layouts/footer.styl
index fbb2f7c..31f728c 100644
--- a/wp-content/themes/c6/resources/assets/styles/layouts/footer.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/footer.styl
@@ -1,4 +1,5 @@
-$breakpoint-footer-cols-2 = 880px // When to break to 2 col view
+$breakpoint-footer-cols-2 = 980px // When to break to 2 col view
+$breakpoint-footer-medium = 800px // Layout with logo + address on same line / other items stacked below
 $breakpoint-footer-cols-1 = 710px // When to break to 1 col view
 
 .footer
@@ -33,6 +34,10 @@ $breakpoint-footer-cols-1 = 710px // When to break to 1 col view
     constrain(padding-right, 2.5vw)
     margin: 0.75em 0
 
+    +below($breakpoint-footer-medium)
+      &:nth-child(n+3) // leave just the first 2 cols side by side
+        flex-basis: 100%
+
     +below($breakpoint-footer-cols-1)
       flex-basis: 100%
       justify-content: center !important
diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
index 5598599..c316183 100644
--- a/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
+++ b/wp-content/themes/c6/resources/assets/styles/layouts/sections.styl
@@ -1,3 +1,16 @@
+.elementor-section.elementor-section-full_width
+  //--- Columns responsiveness
+  // Full width sections have columns stacked but no margin is placed between them
+  // This is to accommodate the flexible background image blocks
+
+  // TODO: consider adding a "no gap" option to the section when wrapping? Then it can be applied to full width or boxed sections...
+
+
+  +below($breakpoint-columns)
+    .elementor-column
+      width: 100% !important
+
+
 .elementor-section.elementor-section-boxed
 
   //--- Columns responsiveness - stack all standard columns below breakpoint
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/background-image.styl b/wp-content/themes/c6/resources/assets/styles/widgets/background-image.styl
new file mode 100644
index 0000000..8600bbf
--- /dev/null
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/background-image.styl
@@ -0,0 +1,15 @@
+.bg-image
+  background-size: cover
+  background-repeat: no-repeat
+  background-position: center
+
+  &-sizer
+    // The sizer is only needed when in one column mode.
+    // The rest of the time it should just fill the height
+    // required by the other column's content...
+    +above($breakpoint-columns)
+      display: none
+
+// Ensure full height on element so the image always covers the full area
+.elementor-widget-cube-bg-image, .elementor-widget-container, .bg-image
+  height: 100%
diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
index 5cd633a..cb0354e 100644
--- a/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/text-block.styl
@@ -1,9 +1,9 @@
 // Text block widget (Elementor defaults)
-// Padding is applied here so it can be overridden by Elementor
-.elementor-widget-cube-text .elementor-widget-container
+.elementor-widget-cube-text //.elementor-widget-container
   horizontal-spacing(7.5vw)
   vertical-spacing(10vw)
   max-width: 480px
+  width: 100%
   box-sizing: content-box // So padding doesn't influence max-width
 
   // When in a "default" section layout, add some padding