From c392b86aaa423c1f98b50340caf253041f7e0382 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 23 May 2018 14:39:50 +0000 Subject: [PATCH] Header and mobile menu refinements, template redirects, newsletter sign up form. WIP #1912 @4.5 --- wp-content/themes/physioassist/app/setup.php | 21 ++++++ wp-content/themes/physioassist/package.json | 1 + .../resources/assets/scripts/routes/common.js | 39 +++++++++- .../assets/styles/common/global.styl | 27 +++++++ .../styles/components/navigation-mobile.styl | 16 ++--- .../assets/styles/layouts/header.styl | 71 +++++++------------ .../assets/styles/pages/newsletter.styl | 7 ++ .../assets/styles/widgets/video-carousel.styl | 6 +- .../resources/views/partials/footer.blade.php | 6 +- .../template-redirect-first-child.blade.php | 17 +++++ wp-content/themes/physioassist/yarn.lock | 4 ++ 11 files changed, 150 insertions(+), 65 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/styles/pages/newsletter.styl create mode 100644 wp-content/themes/physioassist/resources/views/template-redirect-first-child.blade.php diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php index 4890390e..9f383e6b 100644 --- a/wp-content/themes/physioassist/app/setup.php +++ b/wp-content/themes/physioassist/app/setup.php @@ -168,3 +168,24 @@ add_action('after_setup_theme', function () { }); }); + + +/** + * Handle redirection to first child page when template is set to 'template-redirect-first-child.blade.php' + * (see template file for more details on why this has to be done here) + */ +add_action('template_redirect', function () { + + $pageID = get_the_ID(); + + if (get_page_template_slug($pageID) == 'views/template-redirect-first-child.blade.php') { + + $children = get_pages("child_of={$pageID}&sort_column=menu_order"); + + if (is_array($children)) { + wp_safe_redirect(get_permalink($children[0]->ID)); + exit; + } + } + +}); diff --git a/wp-content/themes/physioassist/package.json b/wp-content/themes/physioassist/package.json index 87fae72c..90edbf4a 100644 --- a/wp-content/themes/physioassist/package.json +++ b/wp-content/themes/physioassist/package.json @@ -85,6 +85,7 @@ "imagemin-webpack-plugin": "~2.0.0", "import-glob": "~1.5", "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1", "lost": "^8.2.0", "node-sass": "~4.7.2", "postcss-loader": "~2.1.0", 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 451e2fbc..2ac428b0 100644 --- a/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js +++ b/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js @@ -1,3 +1,5 @@ +import throttle from 'lodash.throttle'; + export default { init() { // JavaScript to be fired on all pages @@ -7,9 +9,8 @@ export default { var menu = $('#mobileMenu'), menuOpener = $('#menuOpener'); - // Copy main menus + // Copy main menu $('.nav-primary').clone().appendTo(menu); - $('.nav-secondary').clone().appendTo(menu); menuOpener.on('click', function() { $(this).toggleClass('open'); @@ -18,6 +19,40 @@ export default { }); + // Disable clicks on top level menu links that have sub-menus + $(document).on('click', '.navigation .menu-item-has-children > a', function(event) { + event.stopPropagation(); + return false; + }); + + // On the mobile menu, when we click on a link that has sub-menus, + // don't follow the link but instead toggle the sub-menu... + $(document).on('click', '#mobileMenu .menu-item-has-children > a', function(event) { + event.stopPropagation(); + $(this).parent().find('.sub-menu').slideToggle(); + return false; + }); + + // Make click :active/:hover state work on iOS so user knows which menu item they just tapped on + // Ref: https://stackoverflow.com/a/33681490 + $('#mobileMenu a').on('touchstart', function (){}); + + //--- Header transition on scroll + // For pages with a transparent header, the header should morph to the compact version + // when scrolling down and back to transparent when scrolling up to the top again + var headerTransition = function() { + + if ($('body').hasClass('template-transparent-header') || $('body').hasClass('transparent-header-disabled')) { + if ($(window).scrollTop() > 25) { + $('body').removeClass('template-transparent-header').addClass('transparent-header-disabled'); + } else { + $('body').removeClass('transparent-header-disabled').addClass('template-transparent-header'); + } + } + }; + + window.addEventListener('scroll', throttle(headerTransition, 100)); // Throttle 100ms for scroll event + }, finalize() { // JavaScript to be fired on all pages, after page specific JS is fired diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl index 784152c2..7a7bb327 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/common/global.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/common/global.styl @@ -75,3 +75,30 @@ p:not(:last-of-type) path fill: currentColor + +//-- Logo defaults +.logo + white-space: nowrap + transition: all 0.3s ease-out + + &-inner + position: relative + display: flex + align-items: center // So that symbol scales down and remains centred when hiding + + > svg + height: 100% + + &-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 + + &-text + width: 77.97% // Proportional width of text from original full logo + transition: all 0.3s ease-out + + // Override text colour (previously only for home, now it's white in all uses) + path, rect + fill: #fff 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 index 2305ce8c..cd593093 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl @@ -45,18 +45,11 @@ 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 + padding: 0.5em 0 + opacity: 1 + display: none // Toggled via JS (see common.js) li padding: 0 @@ -70,6 +63,9 @@ text-transform: none opacity: 0.7 + &:hover + opacity: 1 + .locales margin-top: 1em justify-content: center 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 03dd7038..b553f957 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl @@ -2,8 +2,10 @@ // 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:not(.template-transparent-header) .wrap - padding-top: 65px +body + &:not(.template-transparent-header):not(.transparent-header-disabled) + .wrap + padding-top: 65px header.site center() @@ -13,7 +15,7 @@ header.site max-width: none width: 100% background-color: #003e65 - transition: background-color 0.3s ease-out + //transition: background-color 0.3s ease-out .inner center() @@ -26,34 +28,16 @@ header.site .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 - max-width: 235px - margin: 0 10px 15px 4px - width: 70% // Only relevant when we reach smaller screens - leaves room for burger menu icon - transition: all 0.3s ease-out + // Main logo + // Logo is split into symbol + text so we can hide the symbol when reducing the header height + .logo + max-width: 235px + margin: 0 10px 15px 4px + width: 70% // Only relevant when we reach smaller screens - leaves room for burger menu icon - &-inner - position: relative - display: flex - align-items: center // So that symbol scales down and remains centred when hiding - - > svg - height: 100% - - &-symbol - width: 0 // Hidden in default view - opacity: 0 - margin-right: -1.54% // Proportional overlap - transition: all 0.3s ease-out - - &-text - width: 77.97% // Proportional width of text from original full logo - - // Override text colour (previously only for home, now it's white in all uses) - path, rect - fill: #fff + &-symbol + width: 0 // Hidden in default view + opacity: 0 .navigation @@ -75,22 +59,17 @@ header.site 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 + .navigation + bottom: -12px // Pull nav text down so it lines up with baseline of logo text + transform: none - .logo - margin: 25px 10px 0 - max-width: 278px + .nav-primary, .locales + color: #1a73b0 - .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 + margin: 25px 10px 0 + max-width: 278px - .logo-text - width: 77.97% // Proportional width of text from original full logo + .logo-symbol + opacity: 1 + width: 23.57% diff --git a/wp-content/themes/physioassist/resources/assets/styles/pages/newsletter.styl b/wp-content/themes/physioassist/resources/assets/styles/pages/newsletter.styl new file mode 100644 index 00000000..210038d3 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/styles/pages/newsletter.styl @@ -0,0 +1,7 @@ +.newsletter-signup-form + margin: 1.5em 0 + + input[type="email"] + max-width: 380px + margin-bottom: 2em + diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl index 87fa506d..d5ee6e5a 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/video-carousel.styl @@ -72,6 +72,8 @@ font-size: 1em opacity: 1 transition: inherit + position: relative + top: -0.02em &:hover background: $colors.headings @@ -81,9 +83,5 @@ .slick-prev left: 0 - &:before - margin-right: 0.1em .slick-next right: 0 - &:before - margin-left: 0.1em 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 9c893a65..fe236cb2 100644 --- a/wp-content/themes/physioassist/resources/views/partials/footer.blade.php +++ b/wp-content/themes/physioassist/resources/views/partials/footer.blade.php @@ -10,9 +10,9 @@

diff --git a/wp-content/themes/physioassist/resources/views/template-redirect-first-child.blade.php b/wp-content/themes/physioassist/resources/views/template-redirect-first-child.blade.php new file mode 100644 index 00000000..efc0da0d --- /dev/null +++ b/wp-content/themes/physioassist/resources/views/template-redirect-first-child.blade.php @@ -0,0 +1,17 @@ +{{-- + Template Name: Redirect to first child +--}} + +{{-- + + This template is for "holder" pages that have no content but contain sub-pages. + If the page is visited directly, it will redirect to the first child page (if possible). + The first child is not based on visual menu order, it is based on the "order" field in the page. + + Since the HTTP headers are already sent when this code executes, we can't do the redirect here. + Instead, this template is used as a marker and we check the page template in the initialisation phase + and redirect from there... + + See template_redirect action in theme's app/setup.php + +--}} diff --git a/wp-content/themes/physioassist/yarn.lock b/wp-content/themes/physioassist/yarn.lock index 78c6712e..3551ee1f 100644 --- a/wp-content/themes/physioassist/yarn.lock +++ b/wp-content/themes/physioassist/yarn.lock @@ -4062,6 +4062,10 @@ lodash.templatesettings@^3.0.0: lodash._reinterpolate "^3.0.0" lodash.escape "^3.0.0" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" -- 2.39.5