From 651efdf77e50f3d431f532cd93cf02cc05360b60 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 18 Sep 2019 16:56:35 +0200 Subject: [PATCH] Done #3034 @7.5 --- resources/js/app.js | 25 ++++++++++++++++++++----- resources/js/menu.js | 8 ++++---- resources/styles/common/global.styl | 3 +++ resources/styles/common/setup.styl | 4 ++++ resources/styles/components/cart.styl | 5 ++++- resources/styles/components/header.styl | 9 +++------ resources/styles/components/mmenu.styl | 19 +++++++++++++++++-- resources/styles/components/news.styl | 2 +- resources/views/layouts/app.blade.php | 2 +- webpack.mix.js | 1 + yarn.lock | 6 +++--- 11 files changed, 61 insertions(+), 23 deletions(-) diff --git a/resources/js/app.js b/resources/js/app.js index b410bcb..457cce3 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -9,9 +9,15 @@ require('./menu'); require('../../vendor/cubist/cms-back/src/public/emailobfuscator/emailobfuscator'); require('element-closest'); -// Todo: WIP for CSS vars - need to assess MMenu usage and options for the polyfill. In default state, it's only partially working so it's better to disable this until it fully works. -//import cssVars from 'css-vars-ponyfill'; -//cssVars({}); // Polyfill CSS Vars for older browsers +// Polyfill CSS Vars for older browsers +// This is only partly useful because we need to update CSS variables +// via JS (--header-height) and this is too resource intensive because +// it is in a scroll listener, so instead we make use of the +// .header-minimized class that is applied and add extra rules to manage +// the two possible header heights. It requires some variable duplication +// but it's a reasonable compromise given the constraints... +import cssVars from 'css-vars-ponyfill'; +cssVars({}); var glob = require('glob'); @@ -132,7 +138,7 @@ const app = new Vue({ function getBodyScrollTop() { const el = document.scrollingElement || document.documentElement; - return el.scrollTop + return el.scrollTop; } document.addEventListener('scroll', function () { @@ -148,7 +154,16 @@ function checkScroll() { } else { document.body.classList.remove('header-minimized'); } - document.querySelector('html').style.setProperty('--header-height', window.headerHeight + 'px'); + + document.documentElement.style.setProperty('--header-height', window.headerHeight + 'px'); + + // CSS vars could be updated here for older browsers but the performance cost + // is too much, especially with a scroll event like this... + // cssVars({ + // variables: { + // '--header-height': window.headerHeight + 'px' + // } + // }); } checkScroll(); diff --git a/resources/js/menu.js b/resources/js/menu.js index 28fc4d5..28e6609 100644 --- a/resources/js/menu.js +++ b/resources/js/menu.js @@ -1,6 +1,6 @@ //=== MMenu Setup -import MmenuLight from 'mmenu-light/dist/js/mmlight'; -import offcanvas from 'mmenu-light/dist/js/mmlight.offcanvas'; +import MmenuLight from 'mmenu-light/bin/js/mmlight'; +import offcanvas from 'mmenu-light/bin/js/mmlight.offcanvas'; MmenuLight.prototype.offcanvas = offcanvas; @@ -22,7 +22,7 @@ document.addEventListener( if (null === document.querySelector('.mm--close')) { let search = document.querySelector('.mm li[data-name="recherche"] a'); - if(search!==null) { + if (search !== null) { let searchIcon = document.getElementById('nav-search-toggle-link').innerHTML; search.innerHTML = searchIcon + search.innerHTML; } @@ -34,7 +34,7 @@ document.addEventListener( }); setInterval(function () { - checkOpenSubmenu() + checkOpenSubmenu(); }, 250); } } diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl index d64220b..d85c341 100644 --- a/resources/styles/common/global.styl +++ b/resources/styles/common/global.styl @@ -1,4 +1,7 @@ // PMI Global Styles +:root + --transition-duration: $transition-duration + --header-height: $header-height body min-width: 320px diff --git a/resources/styles/common/setup.styl b/resources/styles/common/setup.styl index e68a121..0d68001 100644 --- a/resources/styles/common/setup.styl +++ b/resources/styles/common/setup.styl @@ -7,6 +7,10 @@ $debug = { $base-width = 1920px // Basis for vw unit calculations on large screens $content-max-width = $base-width * 0.9 // Allows 5% either side +$header-height = 134px +$header-height-minimized = 60px +$transition-duration = 500ms + // Gutters (assumed to always be a vw, vh or % unit) $horizontal-gutter = 5vw $vertical-gutter = 5vw diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl index a413d3e..3186e7d 100644 --- a/resources/styles/components/cart.styl +++ b/resources/styles/components/cart.styl @@ -38,9 +38,12 @@ &-title background-color: #314D6E - height: var(--header-height) + height: $header-height transition: height var(--transition-duration) + .header-minimized & + height: $header-height-minimized + &-content // Fill available height if needed. Footer of popout is 139px tall max-height: calc(100vh - var(--header-height) - 139px) diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl index 9c1f446..52a189a 100644 --- a/resources/styles/components/header.styl +++ b/resources/styles/components/header.styl @@ -1,18 +1,15 @@ -$header-height = 134px - #header-placeholder - height: $header-height + height: $header-height // Static value otherwise it causes problems with mini-header .template-home & background-color:theme('colors.navy') .site-header - --transition-duration: 500ms @apply bg-navy text-white text-lg font-display font-medium antialiased fixed top-0 transition: height var(--transition-duration) width: 100% z-index: 100 - height: $header-height + height: var(--header-height) .container transition: padding-top var(--transition-duration), padding-bottom var(--transition-duration) @@ -38,7 +35,7 @@ $header-height = 134px //=== Mini header .header-minimized & - height: 60px + height: $header-height-minimized .container padding-top: 8px diff --git a/resources/styles/components/mmenu.styl b/resources/styles/components/mmenu.styl index dc213f4..378ace2 100644 --- a/resources/styles/components/mmenu.styl +++ b/resources/styles/components/mmenu.styl @@ -1,7 +1,5 @@ +below($breakpoint-menu) #mobile-menu-icon - --transition-duration: 500ms - display: block !important cursor: pointer flex-shrink: 0 @@ -137,3 +135,20 @@ &:before opacity: 1 + + +// IE 11 styles +.mm--vertical + &:after + height: $header-height + content: attr(data-mm-title) !important + display: block !important + + .header-minimized & + height: $header-height-minimized + + .mm--close + position: relative + + .header-minimized & + height: $header-height-minimized diff --git a/resources/styles/components/news.styl b/resources/styles/components/news.styl index 52d70ee..ddf07fc 100644 --- a/resources/styles/components/news.styl +++ b/resources/styles/components/news.styl @@ -91,7 +91,7 @@ grid-template-areas: "image sidebar" "body sidebar" grid-column-gap: 5vw - +below(700px) + +below(768px) grid-template-areas: "image" "body" "sidebar" grid-row-gap: 5vw diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index ea81d15..57992a7 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -34,7 +34,7 @@ @show -
+
@yield('content')
diff --git a/webpack.mix.js b/webpack.mix.js index 670cd2e..3212a9d 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -75,6 +75,7 @@ if (mix.inProduction()) { // Transpile code for older browsers like IE11 // This has to be here because if it is in the default setup, // it seems to cause BrowserSync to go into an infinite loop :( + // UPDATE: This only seems to be needed for iOS 9 now... mix.babel(['public/js/app.js'], 'public/js/app.js'); } diff --git a/yarn.lock b/yarn.lock index 3883fd8..58f3384 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5080,9 +5080,9 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1, mkdirp minimist "0.0.8" mmenu-light@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/mmenu-light/-/mmenu-light-2.1.1.tgz#8e20f294c6388814ffb86622025cd9ac8b408584" - integrity sha512-cLycH5h0jfVvA5NNM4ckzeo3rzRh4e3sILnNn7ntXBLxZPL9cO4oTYDrHKDQHa2wBbc040X9rJgM+7rhaEzg4Q== + version "2.3.1" + resolved "https://registry.yarnpkg.com/mmenu-light/-/mmenu-light-2.3.1.tgz#c472f0b8da92528c7e1957cd5b62ab7803c445d7" + integrity sha512-t9rC8F/JQbP4xpjX8avEpu7cLtq1hMeKtiMt0H8wHDC61sGQy42C46ojXdXbRA9Sgz202x2kqdKwLLMow4IC2g== modernizr-webpack-plugin@^1.0.7: version "1.0.7" -- 2.39.5