From cfc2588cddd5ff62695c6a2a01afd339ca95d8a2 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Thu, 18 Jun 2020 15:14:29 +0200 Subject: [PATCH] Wait #3715 @3.5 --- wp-content/themes/CCV/app/setup.php | 2 +- .../CCV/resources/assets/scripts/app.js | 1 + .../CCV/resources/assets/scripts/header.js | 39 +++++++++++++++++++ .../CCV/resources/assets/scripts/menu.js | 2 +- .../resources/assets/styles/common/admin.styl | 15 ++++++- .../resources/assets/styles/common/setup.styl | 2 +- .../assets/styles/components/header.styl | 28 ++++++++----- .../assets/styles/components/mmenu.styl | 17 +++++++- .../assets/styles/components/navigation.styl | 7 ++++ .../resources/views/partials/header.blade.php | 8 ++-- 10 files changed, 102 insertions(+), 19 deletions(-) create mode 100644 wp-content/themes/CCV/resources/assets/scripts/header.js diff --git a/wp-content/themes/CCV/app/setup.php b/wp-content/themes/CCV/app/setup.php index fbbc5d8..fa611b0 100755 --- a/wp-content/themes/CCV/app/setup.php +++ b/wp-content/themes/CCV/app/setup.php @@ -59,7 +59,7 @@ add_action('wp_print_styles', function() { */ add_action('wp_enqueue_scripts', function () { wp_enqueue_script('sage/vendor', asset('scripts/vendor.js')->uri(), [], null, true); - wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor'], null, true); + wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor', 'jquery'], null, true); wp_add_inline_script('sage/vendor', asset('scripts/manifest.js')->contents(), 'before'); diff --git a/wp-content/themes/CCV/resources/assets/scripts/app.js b/wp-content/themes/CCV/resources/assets/scripts/app.js index a28df34..59934d6 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/app.js +++ b/wp-content/themes/CCV/resources/assets/scripts/app.js @@ -3,6 +3,7 @@ */ import { router } from 'js-dom-router'; import './menu'; +import './header'; /** * DOM-based routing diff --git a/wp-content/themes/CCV/resources/assets/scripts/header.js b/wp-content/themes/CCV/resources/assets/scripts/header.js new file mode 100644 index 0000000..c2dfe89 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/scripts/header.js @@ -0,0 +1,39 @@ +//== Auto-hiding sticky header +// Adapted from https://codyhouse.co/gem/auto-hiding-navigation + +jQuery(document).ready(function($) { + + let container = $('body'), + scrolling = false, + previousTop = 0, + currentTop = 0, + scrollDelta = 10, + scrollOffset = 200; // How far should we scroll before hiding the header + + $(window).on('scroll', function(){ + + if (!scrolling) { + scrolling = true; + (!window.requestAnimationFrame) + ? setTimeout(autoHideHeader, 250) + : requestAnimationFrame(autoHideHeader); + } + }); + + function autoHideHeader() { + currentTop = $(window).scrollTop(); + + if (previousTop - currentTop > scrollDelta) { + // Scrolling up... + container.removeClass('header-hidden'); + + } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) { + // Scrolling down... + container.addClass('header-hidden'); + } + + previousTop = currentTop; + scrolling = false; + } + +}); diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js index 9e31a44..f236e8e 100644 --- a/wp-content/themes/CCV/resources/assets/scripts/menu.js +++ b/wp-content/themes/CCV/resources/assets/scripts/menu.js @@ -14,7 +14,7 @@ document.addEventListener( let nav = document.getElementById(menuID); window.mmenu = new MmenuLight(nav, { title: '' }); - window.menu_breakpoint = 1349; // Note: this should match the menu CSS breakpoint in setup.styl! + window.menu_breakpoint = 1023; // Note: this should match the menu CSS breakpoint in setup.styl! mmenu.enable(`(max-width: ${menu_breakpoint}px)`); mmenu.offcanvas({ diff --git a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl index 27134dc..eb8c0cf 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl @@ -13,6 +13,7 @@ //===== Admin bar tweaks $breakpoint-admin-bar = 783px +$breakpoint-admin-bar-absolute = 600px // When admin bar goes from being 'fixed' to 'absolute' $admin-bar-height = 32px $admin-bar-height-mobile = 46px @@ -38,12 +39,22 @@ body.admin-bar +above($breakpoint-admin-bar) position: relative - #mobile-menu + header.site, #mobile-menu top: $admin-bar-height + .mobile-menu-trigger + top: 30px + $admin-bar-height + +below($breakpoint-admin-bar) - #mobile-menu + header.site, #mobile-menu top: $admin-bar-height-mobile .mobile-menu-trigger top: 30px + $admin-bar-height-mobile + + +below($breakpoint-admin-bar-absolute) + header.site, #mobile-menu + top: 0 + + .mobile-menu-trigger + top: 30px diff --git a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl index 71a78bb..741acd7 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl @@ -14,7 +14,7 @@ $vertical-gutter = 7.5vw // Breakpoints in Rupture (https://github.com/jescalan/rupture) $breakpoint-columns = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js -$breakpoint-menu = 1350px // This needs to match the MMenu activation setting in menu.js +$breakpoint-menu = 1024px // This needs to match the MMenu activation setting in menu.js rupture.scale = 0 400px 768px 1024px rupture.scale-names = 'small' 'medium' 'large' rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px diff --git a/wp-content/themes/CCV/resources/assets/styles/components/header.styl b/wp-content/themes/CCV/resources/assets/styles/components/header.styl index b14713b..fd1ba73 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/header.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/header.styl @@ -1,16 +1,26 @@ $breakpoint-slideshow = 1000px header.site - .header-slideshow-present &, .home & // Special case for home page and other pages containing this widget - //+above($breakpoint-menu) - +above($breakpoint-slideshow) - position: absolute - top: 0 - left: 0 - width: 100% - background-color: transparent - z-index: 20 + transform: translateZ(0) + will-change: transform + transition: all 0.5s ease + + .header-hidden & + transform: translateY(-100%) + +// .header-slideshow-present &, .home & // Special case for home page and other pages containing this widget +// //+above($breakpoint-menu) +// +above($breakpoint-slideshow) +// position: absolute +// top: 0 +// left: 0 +// width: 100% +// background-color: transparent +// z-index: 20 .header-cta padding: 1em 1.8em line-height: 1.1 + + +below(1100px) + padding: 0.75em 1.6em 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 bb06096..8e2cc7c 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/mmenu.styl @@ -101,7 +101,7 @@ $menu-header-height = 90px // Burger menu icon + animation .mobile-menu-trigger - position: absolute + position: fixed width: 30px height: @width top: @width @@ -112,6 +112,21 @@ $menu-header-height = 90px justify-content: space-between z-index: 10000 // Needs to sit above MMenu pointer-events: auto // MMenu disables pointer events outside the menu when it's open + transform: translateZ(0) + transition-property: opacity + transition-duration: 0.3s + transition-delay: 0.2s // Delay before coming back into view when header slides down + + // This icon can't be contained inside the header because it needs to sit at the + // highest stacking level so it can animate as menu opens and closes. As a result, when + // the header auto-hides, it doesn't take the icon with it so we need to handle it differently here + .header-hidden & + opacity: 0 + pointer-events: none + + // Set transition delay and duration to zero so it disappears immediately + transition-duration: 0s + transition-delay: 0s +above($breakpoint-menu) display: none diff --git a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl index 8ec0f59..fc9c8b8 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl @@ -11,6 +11,13 @@ @apply border-b-2 border-transparent // Reserve space for active border @apply py-1 leading-tight // Adjust active border spacing + +below(1400px) + @apply mx-4 + +below(1320px) + @apply mx-3 + +below(1080px) + @apply mx-2 + &.current-menu-item, &.current-menu-parent @apply border-pink 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 f13b62a..3efa8f8 100644 --- a/wp-content/themes/CCV/resources/views/partials/header.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/header.blade.php @@ -1,7 +1,7 @@ -
-
- +
+ "> -- 2.39.5