Merge pull request #241 from OpenSourceOrg/fix/header-keep-height-develop

Keep the header at full height, and make its white background span the page

Author: mlaetitia

themes/osi/assets/css/editor-style.css

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'e269384336004e90c6c8');
+<?php return array('dependencies' => array(), 'version' => '6cdacd840462a5c6d505');

themes/osi/assets/js/build/theme.asset.php

@@ -20,24 +20,17 @@ License: GPLv2
 
 const header = document.querySelector( '.header-main' );
 
-// The header is sticky but still in flow, so shrinking it lifts the page by 25px
-// ($headerInnerHeight 125px down to the 100px cap) and scroll anchoring corrects scrollY
-// to match. One threshold would be re-crossed by that correction and the class would
-// toggle in a loop, so the bound to beat depends on which state we are in. Growing back
-// only at 0 is the safe end: browsers suppress anchoring while the scroller sits at 0.
-const SHRINK_AT = 40;
-const GROW_AT = 0;
+const SHRINK_AT = 40; // px scrolled before the logo shrinks
 
 if ( header ) {
 	let ticking = false;
 
 	const update = () => {
 		ticking = false;
-		const isSmall = header.classList.contains( 'header-main-small' );
-		const next = window.scrollY > ( isSmall ? GROW_AT : SHRINK_AT );
+		const small = window.scrollY > SHRINK_AT;
 
-		if ( next !== isSmall ) {
-			header.classList.toggle( 'header-main-small', next );
+		if ( small !== header.classList.contains( 'header-main-small' ) ) {
+			header.classList.toggle( 'header-main-small', small );
 		}
 	};
 

themes/osi/assets/js/build/theme.js

@@ -22,13 +22,11 @@
     .header--inner {
         position: static;
         opacity: 1;
-        transition: padding .3s, max-height .3s;
         z-index: 999;
         height: $headerInnerHeight;
-        max-height: $headerInnerHeight;
         display: flex;
         align-items: center;
-        @media only screen and ( max-width: 1200px) {
+        @media only screen and (max-width: #{$break-nav - 0.06}) {
             background: #fff;
             padding: 16px;
         }
@@ -76,9 +74,6 @@
     }
     &.header-main-small {
         .header--inner {
-            padding-top: 16px;
-            padding-bottom: 16px;
-            max-height: 100px;
             .header--blog-name {
                 a {
                     img {
@@ -115,31 +110,17 @@
         overflow: hidden;
         transition: all .3s;
     }
-    .header--inner {
-        // opacity: 0;
-        overflow: hidden;
-    }
-    .header--blog-name {}
     .header--extra-text {
         display: none;
     }
 }
 
-@media only screen and (max-width: #{$break-nav}) {
-    .header-main-small {
-        .header--blog-name img {
-            max-height: 67.19px;
-        }
-    }
-}
-
 @media only screen and (min-width: #{$break-nav}) {
     .header--inner,
     .header--quicklinks-inner {
         // @include clearfix();
         padding-left: $maxPadding;
         padding-right: $maxPadding;
-        padding-top: 1em;
     }
     .header--inner {
         border: 0;
@@ -159,17 +140,24 @@
         clear: right;
         padding: 0;
     }
-    // open-panel layers: full-bleed white veil (::after escapes the wrapper inset) and
-    // page dim; z-index -1 keeps both under content, tree order paints veil over dim
-    @mixin nav-open-layers {
+    // full-bleed white: ::after escapes the wrapper inset so the background spans the
+    // page, which the design asks for whenever the header is white
+    @mixin header-white-veil( $border: false ) {
         &::after {
             background-color: $Nwhite;
-            border-bottom: 1px solid $Nlight;
+            @if $border {
+                border-bottom: 1px solid $Nlight;
+            }
             content: '';
             inset: 0 (-$wrapperPad);
             position: absolute;
             z-index: -1;
         }
+    }
+    // open-panel layers: the white veil plus a page dim; z-index -1 keeps both under
+    // content, tree order paints veil over dim
+    @mixin nav-open-layers {
+        @include header-white-veil( true );
         &::before {
             background: rgba(0, 0, 0, .35);
             content: '';
@@ -187,8 +175,10 @@
     .header-main:has(.menu-item.megamenu:hover:not(.is-dismissed)) {
         @include nav-open-layers;
     }
+    // one class on purpose: raising this above .header-main.is-nav-open would win the
+    // source-order tie and drop the open panel's bottom border
     .header-main-small {
-        background-color: $Nwhite;
+        @include header-white-veil;
         .nav-main {
             height: auto;
             top: 0;

themes/osi/assets/js/src/theme/header-resize.js

@@ -528,6 +528,12 @@ footer.ai-footer {
     }
     .ai-header {
         border-top: 10px solid #3Ea638;
+        // the veil starts inside the trim, so pull it over and repeat the trim on it,
+        // otherwise the green stops short of the full-bleed white behind it
+        &::after {
+            border-top: 10px solid #3Ea638;
+            top: -10px;
+        }
         .site-branding {
             img {
                 width: 200px;