From 59a188d942affd3ded92cc5b1dac5ea0cb283d86 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Tue, 22 May 2018 16:45:29 +0000 Subject: [PATCH] Responsive behaviour, mobile menu and other refinements. WIP #1912 @6.5 --- .../src/Elementor/Widgets/BackgroundImage.php | 2 +- .../src/Elementor/Widgets/TextBlock.php | 2 +- .../resources/assets/images/icons/close.svg | 14 +++ .../assets/images/icons/mobile-menu.svg | 11 ++ .../resources/assets/scripts/routes/common.js | 17 +++ .../styles/components/navigation-mobile.styl | 75 +++++++++++++ .../assets/styles/components/navigation.styl | 6 +- .../assets/styles/layouts/header.styl | 100 ++++++++++-------- .../resources/assets/styles/main.styl | 2 +- .../assets/styles/widgets/hero-block.styl | 6 +- .../assets/styles/widgets/profile-grid.styl | 17 +++ 11 files changed, 197 insertions(+), 55 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/close.svg create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/mobile-menu.svg create mode 100644 wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php index 75f135ea..ef111118 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/BackgroundImage.php @@ -18,7 +18,7 @@ class BackgroundImage extends Widget_Base { // Elementor widget title public function get_title() { - return __( 'Flexible Background Image', 'physioassist' ); + return __( 'Flexible Image', 'physioassist' ); } // Elementor interface icon 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 2ed343fe..4066aa35 100644 --- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php +++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/TextBlock.php @@ -18,7 +18,7 @@ class TextBlock extends Widget_Base { // Elementor widget title public function get_title() { - return __( 'Text Block', 'physioassist' ); + return __( 'Formatted Text', 'physioassist' ); } // Elementor interface icon diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/close.svg b/wp-content/themes/physioassist/resources/assets/images/icons/close.svg new file mode 100644 index 00000000..52c72215 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/close.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/mobile-menu.svg b/wp-content/themes/physioassist/resources/assets/images/icons/mobile-menu.svg new file mode 100644 index 00000000..115aeba1 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/mobile-menu.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js b/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js index 3acfc951..451e2fbc 100644 --- a/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js +++ b/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js @@ -1,6 +1,23 @@ export default { init() { // JavaScript to be fired on all pages + + // Generate mobile menu + $('header.site').append('
'); + var menu = $('#mobileMenu'), + menuOpener = $('#menuOpener'); + + // Copy main menus + $('.nav-primary').clone().appendTo(menu); + $('.nav-secondary').clone().appendTo(menu); + + menuOpener.on('click', function() { + $(this).toggleClass('open'); + menu.css('height', $(document).height()); // Cover all content + menu.toggle(); + }); + + }, finalize() { // JavaScript to be fired on all pages, after page specific JS is fired diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl new file mode 100644 index 00000000..2305ce8c --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl @@ -0,0 +1,75 @@ +#menuOpener + display: none + position: absolute + right: 5% + top: 50% + transform: translateY(-50%) + width: 32px + height: 28px + background: url(../images/icons/mobile-menu.svg) center no-repeat + cursor: pointer + + &.open + background-image: url(../images/icons/close.svg) + + +below($breakpoint-menu) + display: block + + +#mobileMenu + display: none + position: absolute + padding: 0 0 7.5% + top: 100% + width: 100% + z-index: 10 + background-color: $colors.dark-blue + + // Ensure menu hides automatically above breakpoint + +above($breakpoint-menu) + display: none !important + + .nav-primary + display: block + text-align: center + padding: 20px 5% + + li + display: block + padding: 0.5em 0 + + a + border: none + + &:hover + color: $colors.light-blue + + + .menu-item + &:hover + > .sub-menu // Submenu display on mobile + height: auto + margin-top: 0.5em + + + .sub-menu + position: relative + padding: 0 + overflow: hidden + height: 0 + + li + padding: 0 + + .menu-item + a + display: inline-block + padding: 0.25em 0 + font-weight: 500 + font-size: 0.9em + text-transform: none + opacity: 0.7 + + .locales + margin-top: 1em + justify-content: center 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 559464a7..3ccca007 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl @@ -4,13 +4,10 @@ justify-content: space-between align-items: center text-transform: uppercase - color: #1a73b0 + color: #fff font-size: 16px font-weight: 600 - +below($breakpoint-menu) - display: none - .nav inline-list() @@ -87,6 +84,7 @@ padding: 0 margin: 0 display: flex + color: #1888ca font-size: 14px text-transform: capitalize diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl index b97c1c34..03dd7038 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl @@ -2,67 +2,38 @@ // Padding applied to the .wrap element because applying it to the body requires // us to set top:0 for header when fixed and this in turn causes it to sit // partially under the WP admin bar when it is active. -body.header-compact:not(.template-transparent-header) .wrap +body:not(.template-transparent-header) .wrap padding-top: 65px header.site center() - position: relative + //position: relative z-index: 10 - - // Mini header style - used for default template and also triggered - // on hero-content pages when .header-compact class is added upon scroll - .header-compact & - position: fixed - max-width: none - width: 100% - background-color: #003e65 - transition: background-color 0.3s ease-out - - .inner - center() - position: relative !important - height: 100% - .navigation - bottom: 50% - transform: translateY(50%) - .nav-primary - color: #fff - .locales - color: #1888ca - - // Disable the header when editing with Elementor so it - // doesn't block the home hero blcok section controls - .elementor-editor-active & - pointer-events: none + position: fixed + max-width: none + width: 100% + background-color: #003e65 + transition: background-color 0.3s ease-out .inner + center() horizontal-spacing() - position: relative + position: relative !important + height: 100% - // When header is transparent, position absolutely - // so it will sit on top of the content below... - .template-transparent-header & - position: absolute - width: 100% + // Disable the header when editing with Elementor so it + // doesn't block the home hero block section controls + .elementor-editor-active & + pointer-events: none // Main logo // Logo is split into symbol + text so we can hide the symbol when reducing the header height .logo - margin: 25px 10px 0 + max-width: 235px + margin: 0 10px 15px 4px width: 70% // Only relevant when we reach smaller screens - leaves room for burger menu icon - max-width: 278px transition: all 0.3s ease-out - // Mini version of header - when this class is applied to a parent, - // symbol should hide and logo text should scale down smoothly - .header-compact header.site & - max-width: 235px - margin: 0 10px 15px 4px - .logo-symbol - width: 0 - opacity: 0 - &-inner position: relative display: flex @@ -72,7 +43,8 @@ header.site height: 100% &-symbol - width: 23.57% // Proportional width of symbol from original full logo + width: 0 // Hidden in default view + opacity: 0 margin-right: -1.54% // Proportional overlap transition: all 0.3s ease-out @@ -87,4 +59,38 @@ header.site .navigation position: absolute constrain(right, $horizontal-gutter) - bottom: -4px + bottom: 50% + transform: translateY(50%) + + +below($breakpoint-menu) + display: none + + +//----- Transparent Header overrides +.template-transparent-header + // Only shown when we're above the breakpoint, otherwise it remains in the default compact mode + +above($breakpoint-menu) + header.site + position: absolute + width: 100% + background-color: transparent + + .navigation + bottom: -12px // Pull nav text down so it lines up with baseline of logo text + transform: none + + .nav-primary, .locales + color: #1a73b0 + + .logo + margin: 25px 10px 0 + max-width: 278px + + .logo-symbol + opacity: 1 + width: 23.57% // Proportional width of symbol from original full logo + margin-right: -1.54% // Proportional overlap + transition: all 0.3s ease-out + + .logo-text + width: 77.97% // Proportional width of text from original full logo diff --git a/wp-content/themes/physioassist/resources/assets/styles/main.styl b/wp-content/themes/physioassist/resources/assets/styles/main.styl index 58f83daf..2d7f781e 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/main.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/main.styl @@ -15,7 +15,7 @@ @import 'components/headings' @import 'components/buttons' @import 'components/navigation' -// @import 'components/navigation-mobile' +@import 'components/navigation-mobile' @import 'components/text' @import 'components/forms' @import 'components/wp-classes' 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 6e534822..c6b6a55d 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 @@ -29,7 +29,7 @@ $header-height = 84px // How much space to leave for transparent header +below($breakpoint-hero-block) position: static - padding: s('calc(%s + 4vw) 5vw 4vw', $header-height) + padding: s('calc(%s + 4vw) 5vw 30px', $header-height) bottom: 0 right: 0 @@ -60,6 +60,10 @@ $header-height = 84px // How much space to leave for transparent header font-size: 44px margin-bottom: 0.5em + +below(500px) + br + display: none + &-body font-size: 16px font-weight: 500 diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl index 50b7d192..605e6f33 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/profile-grid.styl @@ -9,13 +9,30 @@ flex: 0 1 45% constrain(margin-bottom, 5vw) + +below(1300px) + flex-basis: 47% // Reduce gap between columns a bit + +below(1000px) + flex-basis: 100% + +below(400px) + display: block + &-image align-self: flex-start width: 35% + .profile-grid & // Needed for extra specifity to override `.elementor img` rule + max-width: 237px + + +below(400px) + width: 100% &-text constrain(padding-left, 3.5vw) // Gutter between image and text + +below(400px) + padding-left: 0 + margin-top: 15px + margin-bottom: 20px + &-title color: $colors.headings font-size: 20px -- 2.39.5