From 839c510c777be5823ecaafdf01719bbded578324 Mon Sep 17 00:00:00 2001 From: nael Date: Mon, 20 May 2019 18:04:43 +0200 Subject: [PATCH] WIP #2779 @5.00 --- wp-content/themes/c6/app/setup.php | 1 + .../themes/c6/resources/assets/config.json | 3 ++ .../c6/resources/assets/scripts/navigation.js | 42 +++++++++++++++++++ .../resources/assets/scripts/routes/common.js | 3 ++ .../assets/styles/common/variables.styl | 11 ++--- .../components/navigation-offcanvas.styl | 8 ++-- .../assets/styles/layouts/header.styl | 37 ++++++++++++---- 7 files changed, 88 insertions(+), 17 deletions(-) create mode 100644 wp-content/themes/c6/resources/assets/scripts/navigation.js diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php index a6e2e98..359ca55 100644 --- a/wp-content/themes/c6/app/setup.php +++ b/wp-content/themes/c6/app/setup.php @@ -50,6 +50,7 @@ add_action('wp_enqueue_scripts', function () { // On 404 pages, this wasn't happening. wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), ['elementor-frontend', 'elementor-animations'], null); wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true); + wp_enqueue_script('sage/navigation.js', asset_path('scripts/navigation.js'), ['jquery'], null, true); if (is_single() && comments_open() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); diff --git a/wp-content/themes/c6/resources/assets/config.json b/wp-content/themes/c6/resources/assets/config.json index 873edff..e47afd6 100644 --- a/wp-content/themes/c6/resources/assets/config.json +++ b/wp-content/themes/c6/resources/assets/config.json @@ -9,6 +9,9 @@ ], "timeline": [ "./scripts/timeline.js" + ], + "navigation": [ + "./scripts/navigation.js" ] }, "publicPath": "/wp-content/themes/c6", diff --git a/wp-content/themes/c6/resources/assets/scripts/navigation.js b/wp-content/themes/c6/resources/assets/scripts/navigation.js new file mode 100644 index 0000000..3e3a1ea --- /dev/null +++ b/wp-content/themes/c6/resources/assets/scripts/navigation.js @@ -0,0 +1,42 @@ +/* eslint-disable */ +jQuery(document).ready(function($){ + var mainHeader = $('header.site'), + headerHeight = mainHeader.height(); + + //set scrolling variables + var scrolling = false, + previousTop = 0, + currentTop = 0, + scrollDelta = 10, + scrollOffset = 500; + + $(window).on('scroll', function(){ + + if( !scrolling ) { + scrolling = true; + mainHeader.addClass('scrolling'); + (!window.requestAnimationFrame) + ? setTimeout(autoHideHeader, 250) + : requestAnimationFrame(autoHideHeader); + } + + if(currentTop < 15){ + mainHeader.removeClass('scrolling'); + } + }); + + function autoHideHeader() { + currentTop = $(window).scrollTop(); + + if (previousTop - currentTop > scrollDelta) { + //if scrolling up... + mainHeader.removeClass('is-hidden'); + } else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) { + //if scrolling down... + mainHeader.addClass('is-hidden'); + } + + previousTop = currentTop; + scrolling = false; + } +}); \ No newline at end of file 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 16898d3..174b67a 100644 --- a/wp-content/themes/c6/resources/assets/scripts/routes/common.js +++ b/wp-content/themes/c6/resources/assets/scripts/routes/common.js @@ -33,6 +33,9 @@ export default { // Menu toggle $('#full-menu-opener').on('click', function(event) { + // Add class earlier than normal so we can hide the logo before menu fully opens + $('body').addClass('offcanvas-menu-open'); + // On larger screens, the menu button just hides the menu //if ($(window).width() < 1024) { $.sidr('open', 'offcanvas-menu'); 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 4264994..fcb334c 100644 --- a/wp-content/themes/c6/resources/assets/styles/common/variables.styl +++ b/wp-content/themes/c6/resources/assets/styles/common/variables.styl @@ -22,11 +22,12 @@ $font-size = { } // Breakpoints in Rupture (https://github.com/jescalan/rupture) -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 -$breakpoint-columns = 900px -$breakpoint-menu = 850px +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 +$breakpoint-columns = 900px +$breakpoint-menu = 850px +$offcanvas-menu-width = 260px // Lost Grid setup (mostly used for Products) @lost gutter 5% 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 163fc4c..295c0ac 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,5 +1,3 @@ -$sidebar-width = 260px - #offcanvas-menu background-color: #000 color: #fff @@ -8,16 +6,16 @@ $sidebar-width = 260px top: 0 height: 100% z-index: 999999 - width: $sidebar-width + width: $offcanvas-menu-width overflow-x: hidden overflow-y: auto &.right left: auto - right: - $sidebar-width + right: - $offcanvas-menu-width &.left - left: - $sidebar-width + left: - $offcanvas-menu-width right: auto .header-logo diff --git a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl index 5b59737..55b4495 100644 --- a/wp-content/themes/c6/resources/assets/styles/layouts/header.styl +++ b/wp-content/themes/c6/resources/assets/styles/layouts/header.styl @@ -34,24 +34,30 @@ header.site // Hero block header overrides .hero-header &, .home & // Also applied for home since .hero-header class seems to be added to body too late for Elementor editor - position: absolute width: 100% color: #fff .inner background-color: transparent - .menu-icon - fill: #fff - // Main logo .header-logo flex: 0 1 auto padding-right: 50px // Ensure some breathing space between logo and burger menu icon + transition: opacity 0.3s ease-out &-svg max-width: 84px height: auto + // When the menu is open, the logo doesn't move because it is fixed position + // So we hide it... + .offcanvas-menu-open & + opacity: 0 + transition: none + + #offcanvas-menu & + opacity: 1 + .locales flex: 0 1 auto @@ -75,7 +81,6 @@ header.site height: 0.6em // Needed for IE 11 overflow: hidden // Also needed for IE 11 - path stroke: currentColor @@ -121,5 +126,23 @@ header.site display: block .menu-icon - width: r(60px) - height: @width + height: 52px + width: 52px + fill: currentColor + +header.site + position: fixed + top: 0 + left: 0 + width: 100% + transform: translateZ(0) + will-change: transform + transition: all .5s ease + +header.site.is-hidden + transform: translateY(-100%) + +header.site.scrolling + background: white + color: #000 + transition: all .5s ease \ No newline at end of file -- 2.39.5