Done #3034 @7.5

diff --git a/resources/js/app.js b/resources/js/app.js
index b410bcb475db910345ab4662294ee17ff1addba2..457cce3bf529b11f2e94fe9267d0ddee87674174 100644 (file)
--- 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 28fc4d5b34bd9a751e377cd8c12affccebf90f7e..28e6609dc8db9d96b8ff1c026b5351ddfbb4d705 100644 (file)
--- 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 d64220b2110ab71dbefddd32df37cd1437a18643..d85c3410ad8bbdc73f06114738463a76716221a4 100644 (file)
--- 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 e68a121b5b182fb8b3e70111e03f559718d6db3d..0d68001bccd1eca98caa904eca0751f1eb7a001a 100644 (file)
--- 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 a413d3e5fca1c563b56cab288ccba9617b1de711..3186e7d676f4441a196b250d7e9ce18dd00bb839 100644 (file)
--- 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 9c1f44694e5394164710d187a1c254bb775c5af0..52a189a3504d382e23bd8dcfa5fda98b0b67b23f 100644 (file)
--- 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 dc213f4345f64fb6c236432e6adc334335403142..378ace2a683e3bb9eb6e55bc4acf2323bb5a41ef 100644 (file)
--- 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 52d70ee9be839756c3dbed75eb1730b21cf61be2..ddf07fc3c2edc61f1fce9ef81a42e44f8964232a 100644 (file)
--- 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 ea81d1558e0bf7d887b487784a2028741d2c34cd..57992a761b3978d23bb44a3ba131d7ae9693668a 100644 (file)
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -34,7 +34,7 @@
         </full-width>
     @show
 
-    <main class="flex-grow h-full">
+    <main class="flex-grow min-h-full">
         @yield('content')
     </main>
 

diff --git a/webpack.mix.js b/webpack.mix.js
index 670cd2e7d21eef531ecc18949bd9310a4276fade..3212a9d7bf4a0ca5141972de67d3c3bd0870ee00 100644 (file)
--- 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 3883fd8e1f34d6b8d4c2dd88c95f71acd0d660a5..58f33845e8563de23feeb291cc8d7a5a5ff02d2d 100644 (file)
--- 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"