From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 21 May 2018 20:45:31 +0000 (+0000)
Subject: Responsive behaviour + content entry. WIP #1912 @10.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=fd440e99eca1ec81202b05eb3eaf9cfb103cc916;p=physioassist-wordpress.git

Responsive behaviour + content entry. WIP #1912 @10.5
---

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
index 5fdd85a2..aee22274 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Setup.php
@@ -14,12 +14,6 @@ class Setup {
 
         // Register widgets with Elementor
         add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']);
-
-        // Register external scripts required by the widgets
-        add_action('elementor/frontend/after_register_scripts', [$this, 'register_scripts']);
-
-        // Add element category in editor panel
-        //add_action('elementor/init', [$this, 'register_category']);
     }
 
     public function register_customisations() {
@@ -79,11 +73,6 @@ class Setup {
         $elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
     }
 
-    public function register_scripts() {
-        Widgets\VideoGallery::register_scripts();
-    }
-
-
     // Override the main Elementor section element to allow custom controls to be added to the editor
     // This allows us to set specific CSS classes on the section wrapper, thereby centralising control
     // of necessary settings for each section layout (column width, padding etc)
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
index df22c6a4..58c2f723 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/HeroBlock.php
@@ -40,7 +40,16 @@ class HeroBlock extends Widget_Base {
      * @return array Widget scripts dependencies.
      */
     public function get_script_depends() {
-        return [];
+
+        wp_register_script(
+            'cube-hero',
+            \App\asset_path('scripts/hero-block.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        return ['cube-hero'];
     }
     /**
      * Register the widget controls.
@@ -145,7 +154,7 @@ class HeroBlock extends Widget_Base {
                     ],
                 ],
                 'selectors' => [
-                    '{{WRAPPER}} .hero-block-content' => 'max-width: {{SIZE}}{{UNIT}};',
+                    '{{WRAPPER}} .hero-block-content-inner' => 'max-width: {{SIZE}}{{UNIT}};',
                 ],
             ]
         );
@@ -263,12 +272,14 @@ class HeroBlock extends Widget_Base {
         echo '<div class="hero-block-inner">';
         echo "<img {$this->get_render_attribute_string('image')}>";
         echo '<div class="hero-block-content">';
+        echo '<div class="hero-block-content-inner">';
         if (!empty($subtitle)) echo "<h3 {$this->get_render_attribute_string('subtitle')}>$subtitle</h3>";
         if (!empty($title)) echo "<h2 {$this->get_render_attribute_string('title')}>$title</h2>";
         if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
         if (!empty($cta_text)) {
             echo "<a {$this->get_render_attribute_string('cta_text')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text</a>";
         }
+        echo '</div>'; // .hero-block-content-inner
         echo '</div>'; // .hero-block-content
         echo '</div>'; // .hero-block-inner
         echo '</div>'; // .hero-block
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
index f911bf00..2ed343fe 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php
@@ -40,7 +40,16 @@ class TextBlock extends Widget_Base {
      * @return array Widget scripts dependencies.
      */
     public function get_script_depends() {
-        return [];
+
+        wp_register_script(
+            'physioassist-text-block',
+            \App\asset_path('scripts/text-block.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        return ['physioassist-text-block'];
     }
     /**
      * Register the widget controls.
diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php
index 027bb35a..fb72a6fb 100644
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/VideoGallery.php
@@ -30,20 +30,6 @@ class VideoGallery extends Widget_Base {
         return [ 'theme-elements' ];
     }
 
-
-    // Register scripts related to this widget (called by the Elementor\Setup)
-    // See also get_script_depends()
-    public static function register_scripts() {
-        wp_register_script(
-            'cube-video-carousel',
-            \App\asset_path('scripts/video-carousel.js'),
-            ['jquery'], // Dependencies
-            null, // Version
-            true // In footer?
-        );
-    }
-
-
     /**
      * List of scripts the widget depends on.
      * Used to set scripts dependencies required to run the widget.
@@ -53,6 +39,15 @@ class VideoGallery extends Widget_Base {
      * @return array Widget scripts dependencies.
      */
     public function get_script_depends() {
+
+        wp_register_script(
+            'cube-video-carousel',
+            \App\asset_path('scripts/video-carousel.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
         // Use script already registered by Elementor so we don't have to include another copy of Slick
         return [ 'jquery-slick', 'cube-video-carousel' ];
     }
diff --git a/wp-content/themes/physioassist/package.json b/wp-content/themes/physioassist/package.json
index 19eabbf9..87fae72c 100644
--- a/wp-content/themes/physioassist/package.json
+++ b/wp-content/themes/physioassist/package.json
@@ -84,6 +84,7 @@
     "imagemin-mozjpeg": "~7.0.0",
     "imagemin-webpack-plugin": "~2.0.0",
     "import-glob": "~1.5",
+    "lodash.debounce": "^4.0.8",
     "lost": "^8.2.0",
     "node-sass": "~4.7.2",
     "postcss-loader": "~2.1.0",
diff --git a/wp-content/themes/physioassist/resources/assets/config.json b/wp-content/themes/physioassist/resources/assets/config.json
index 32f4a54a..83a0f07c 100644
--- a/wp-content/themes/physioassist/resources/assets/config.json
+++ b/wp-content/themes/physioassist/resources/assets/config.json
@@ -4,6 +4,12 @@
       "./scripts/main.js",
       "./styles/main.styl"
     ],
+    "hero-block": [
+      "./scripts/hero-block.js"
+    ],
+    "text-block": [
+      "./scripts/text-block.js"
+    ],
     "video-carousel": [
       "./scripts/video-carousel.js"
     ],
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/hero-block.js b/wp-content/themes/physioassist/resources/assets/scripts/hero-block.js
new file mode 100644
index 00000000..ff3de33f
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/scripts/hero-block.js
@@ -0,0 +1,57 @@
+import debounce from 'lodash.debounce';
+
+(function($) {
+
+  // ELEMENTOR Trigger
+  // Runs when element is ready on the frontend
+  $(window).on( 'elementor/frontend/init', function() {
+    // eslint-disable-next-line
+    elementorFrontend.hooks.addAction('frontend/element_ready/cube-hero.default', function ($scope) {
+      resizeHeroBlock();
+    });
+  });
+
+  // Handle resizing when window resizes
+  $(window).on('resize', debounce(resizeHeroBlock, 100));
+
+})(jQuery);
+
+
+// Resize hero block text so it fits into the available column space (50% of header image)
+// The content area has a 5vw gutter on each side plus an additional 5vw left indent
+// so hero block content width is: ((100vw - 5vw - 5vw) / 2) - 5vw = 40vw
+
+function resizeHeroBlock() {
+
+  var referenceWidth = 672, // Max-width of hero content at full size (0.4 * 1680)
+    minimumWidth = 1024, // Below this width, don't scale because layout will change (this should match CSS breakpoint!)
+    windowWidth = $(window).width(),
+    contentWidth = Math.round(0.4 * windowWidth), // 40vw (see calculation notes above)
+    stylesID = 'heroBlockStyles', // ID of the <style> tag that holds the scaling CSS
+    styles = $('#' + stylesID),
+    scale,
+    translateAmount;
+
+  // Add the style tag to the head if needed
+  if (styles.length == 0) {
+    styles = $(`<style id="${stylesID}"></style>`).appendTo('head');
+  }
+
+  if (windowWidth < minimumWidth) {
+    styles.remove();
+    return;
+  }
+
+  // Work out how much column needs to be scaled down, if at all
+  scale = Math.min(1, contentWidth / referenceWidth);
+
+  // When translating a scaled element, the translate value needs to be scaled (-50% / scale)
+  translateAmount = -50 / scale;
+
+  styles.html(`
+    .hero-block-content-inner {
+      transform: scale(${scale}) translateY(${translateAmount}%);
+    }
+  `);
+
+}
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/text-block.js b/wp-content/themes/physioassist/resources/assets/scripts/text-block.js
new file mode 100644
index 00000000..f6541f30
--- /dev/null
+++ b/wp-content/themes/physioassist/resources/assets/scripts/text-block.js
@@ -0,0 +1,56 @@
+import debounce from 'lodash.debounce';
+
+(function($) {
+
+  // ELEMENTOR Trigger
+  // Runs when element is ready on the frontend
+  $(window).on( 'elementor/frontend/init', function() {
+    // eslint-disable-next-line
+    elementorFrontend.hooks.addAction('frontend/element_ready/physioassist-text.default', function ($scope) {
+      resizeTextBlocks();
+    });
+  });
+
+  // Handle resizing when window resizes
+  $(window).on('resize', debounce(resizeTextBlocks, 100));
+
+})(jQuery);
+
+
+// Resize text blocks so they fit into the available 2 column space
+// The content area has a 5vw gutter on each side so a single column width is: (100vw - 5vw - 5vw) / 2 = 45vw
+
+function resizeTextBlocks() {
+
+  var referenceWidth = 756, // Width of text block column at full size
+    minimumWidth = 1024, // Below this width, don't scale because layout will change (this should match CSS breakpoint!)
+    windowWidth = $(window).width(),
+    columnWidth = Math.round(0.45 * windowWidth), // 45vw (see calculation notes above)
+    stylesID = 'textBlockStyles', // ID of the <style> tag that holds the scaling CSS
+    styles = $('#' + stylesID),
+    scale,
+    translateAmount;
+
+  // Add the style tag to the head if needed
+  if (styles.length == 0) {
+    styles = $(`<style id="${stylesID}"></style>`).appendTo('head');
+  }
+
+  if (windowWidth < minimumWidth) {
+    styles.remove();
+    return;
+  }
+
+  // Work out how much column needs to be scaled down, if at all
+  scale = Math.min(1, columnWidth / referenceWidth);
+
+  // When translating a scaled element, the translate value needs to be scaled (-50% / scale)
+  translateAmount = -50 / scale;
+
+  styles.html(`
+    .layout-squares .text-block {
+      transform: scale(${scale}) translateY(${translateAmount}%);
+    }
+  `);
+
+}
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js b/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js
index d4661056..f6d98178 100644
--- a/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js
+++ b/wp-content/themes/physioassist/resources/assets/scripts/video-carousel.js
@@ -7,7 +7,6 @@
 
       // Only trigger if it is a carousel type gallery
       if ($scope.hasClass('video-gallery-type-carousel')) {
-        console.log('CAROUSEL enabled') // eslint-disable-line
         $scope.find('.video-carousel').slick(); // Note: settings come from data-attribute in HTML
       }
     });
diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
index bfe16d8c..559464a7 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl
@@ -20,7 +20,7 @@
   padding-bottom: 1em // To give space between menu and dropdown but keep them touching
   padding-top: @padding-bottom // Matches bottom padding so menu stays vertically aligned in the centre
 
-  &:hover, &.current_page_parent, &.current_page_item
+  &:hover, &.current_page_parent, &.current_page_item, &.current-page-ancestor
     a
       border-color: currentColor
 
diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/footer.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/footer.styl
index 04625a08..bd6abb7e 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/layouts/footer.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/footer.styl
@@ -68,7 +68,11 @@ $breakpoint-footer-cols-1 = 650px // When to break to 1 col view
 
 
   &-social
-    //flex: 1 0 auto
+    +below($breakpoint-footer-cols-2)
+      order: 4 // Move to last position when in 2 col view
+      padding-left: 10vw // Give more space from 1st column (also applied to sitemap column)
+    +below($breakpoint-footer-cols-1)
+      padding-left: 2.5vw
 
     &-icons
       reset-list()
@@ -89,6 +93,10 @@ $breakpoint-footer-cols-1 = 650px // When to break to 1 col view
             fill: $colors.light-blue
 
   &-signup
+    +below($breakpoint-footer-cols-2)
+      order: 3 // 3rd position when in 2 col view
+
+
     a
       display: inline-block
       padding: 0.5em 1.2em
@@ -98,16 +106,25 @@ $breakpoint-footer-cols-1 = 650px // When to break to 1 col view
       text-transform: uppercase
 
   &-sitemap
-    reset-list()
+    +below($breakpoint-footer-cols-2)
+      order: 2
+      // Add some breathing room since this column is quite narrow
+      // and it looks odd so close to the info column
+      padding-left: 10vw
+    +below($breakpoint-footer-cols-1)
+      padding-left: 2.5vw
 
-    .menu-item
-      display: block
-      padding: 0
-      margin: 0 0 1em 0
+    &-menu
+      reset-list()
 
-    a
-      color: #fff
-      border: none
+      .menu-item
+        display: block
+        padding: 0
+        margin: 0 0 1em 0
+
+      a
+        color: #fff
+        border: none
 
   &-copyright
     font-size: 11px
diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl
index b81969db..10bed285 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/sections.styl
@@ -2,24 +2,68 @@
   .elementor-row
     flex-direction: row-reverse
 
+//---------------------------------
+
+$breakpoint-layout-squares = 1024px // When to break to 1 column view
+$layout-squares-col-width = 756px // Max width of a column
+
 .layout-squares
   padding: 0 !important
 
-  // Middle align content in columns
-  .elementor-column .elementor-column-wrap
-    align-items: center
+  // Ensure 100% for wrapping divs so absolutely positioned content sits in the right place
+  .elementor-widget-physioassist-text, .elementor-widget-container
+    height: 100%
+    position: relative
+
 
   // Text block overrides
   .text-block
-    vertical-spacing(2vw)
-    max-width: 525px
-    margin: 0 auto
+    // Fixed width so we can scale proportionally on smaller screens
+    width: $layout-squares-col-width
+
+    // Padding is set in absolute px values instead of vw units because
+    // the whole text-block element will be scaled, including padding.
+    // If we used vw units, the text would reflow as the screen gets
+    // narrower due to the padding reducing proportionally.
+    // This ensures we keep the same text layout as the full-width version
+    padding: round(0.02 * $content-max-width) round(0.07 * $content-max-width)
+    transform-origin: left
+
+    // Content must be absolutely positioned so that it doesn't take up any space in the
+    // normal document flow, otherwise a gap will be left when it is scaled down.
+    position: absolute
+    left: 0 // It will always cover the whole width so start from left
+    top: 50% // Middle align content (translateY is done in text-block.js)
+
+    +below($breakpoint-layout-squares)
+      width: auto
+      max-width: $layout-squares-col-width // So we don't go wider than image width
+      position: relative
+      top: 0
+      margin: 0 auto
+      padding-left: 0
+      padding-right: 0
 
+  .elementor-element-populated
+    +below($breakpoint-layout-squares)
+      // Since we have no padding on the text-blocks now,
+      // we don't want bg colours showing where the boundry is
+      background-color: transparent !important
+
+  .elementor-column
+    +below($breakpoint-layout-squares)
+      width: 100%
+
+
+//---------------------------------
 
 .indent-content, // Used by blog and other non-elementor pages
 .layout-indented .elementor-row
   constrain(padding-left, 7.5vw)
 
+
+//---------------------------------
+
 // Article layout (long form text - eg. Clinical page)
 .layout-article
   // Bottom align text (relevant for first section with image)
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
index 63f7fd70..6e534822 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/hero-block.styl
@@ -1,8 +1,14 @@
+$breakpoint-hero-block = 1024px // When image should disappear and layout changed. Should be synced with hero-block.js
+$header-height = 84px // How much space to leave for transparent header
+
 .hero-block
   font-smoothing()
   background-image: linear-gradient(to right, #0b4a70 0%, #0b4a70 50%, #d3ebf6 50%, #d3ebf6 100%)
   color: #fff
 
+  +below($breakpoint-hero-block)
+    background-image: linear-gradient(55deg, rgb(16, 81, 118) 0%, rgb(83, 155, 191) 40%, rgb(175, 218, 238) 71%, rgb(239, 249, 255) 91%, rgb(239, 249, 255) 100%)
+
   &-inner
     center()
     position: relative
@@ -11,12 +17,35 @@
     display: block
     margin: 0 auto
 
+    +below($breakpoint-hero-block)
+      display: none
+
   &-content
     position: absolute
-    top: 50%
-    transform: translateY(-50%)
-    constrain(left, 10vw)
-    max-width: 50%
+    top: $header-height // Space for header so content is centred in remaining space
+    bottom: 0
+    left: 0
+    right: 0
+
+    +below($breakpoint-hero-block)
+      position: static
+      padding: s('calc(%s + 4vw) 5vw 4vw', $header-height)
+      bottom: 0
+      right: 0
+
+
+    &-inner
+      position: absolute
+      top: 50% // translateY handled by hero-block.js
+      constrain(left, 10vw)
+      width: 672px // Max width a full size (should be kept in sync with JS!)
+      transform-origin: left
+
+      +below($breakpoint-hero-block)
+        position: relative
+        width: auto
+        top: 0
+        left: 0
 
   &-subtitle
     font-smoothing()
diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl
index 909fb983..be7f2d16 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/text-block.styl
@@ -39,6 +39,10 @@
     li
       margin-bottom: 0.5em
 
+    small
+      display: inline-block
+      line-height: 1.5
+
   &-cta
     display: block
     margin-top: (30/14)em
diff --git a/wp-content/themes/physioassist/resources/views/partials/footer.blade.php b/wp-content/themes/physioassist/resources/views/partials/footer.blade.php
index f5db3c4f..9c893a65 100644
--- a/wp-content/themes/physioassist/resources/views/partials/footer.blade.php
+++ b/wp-content/themes/physioassist/resources/views/partials/footer.blade.php
@@ -20,9 +20,9 @@
       @php(dynamic_sidebar('sidebar-footer-signup'))
     </div>
 
-    <div class="footer-col sitemap">
+    <div class="footer-col footer-sitemap">
       <h3><?php _e('Sitemap', 'physioassist') ?></h3>
-      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'footer-sitemap', 'depth' => 1]) !!}
+      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'footer-sitemap-menu', 'depth' => 1]) !!}
     </div>
 
   </div>
diff --git a/wp-content/themes/physioassist/yarn.lock b/wp-content/themes/physioassist/yarn.lock
index 63b73012..78c6712e 100644
--- a/wp-content/themes/physioassist/yarn.lock
+++ b/wp-content/themes/physioassist/yarn.lock
@@ -3952,6 +3952,10 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaults@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"