Merge pull request #482 from art-institute-of-chicago/fix/digipub-header

QA fixes for DigiPub sticky header
art-institute-of-chicago · Aug 23, 2024 · b538a44 · b538a44
2 parents 77688c8 + e74f53b
commit b538a44
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss
@@ -1138,15 +1138,20 @@
     }
   }
   @include breakpoint('medium-') {
-    .s-sticky-digital-publication-header &~.m-sidebar-toggle {
-      position: fixed;
-      top: 0;
-      width: 100vw;
-      z-index: map-get($zindexs, 'header');
-
-      &::before {
-        left: 0;
-        width: 150vw;
+    .s-sticky-digital-publication-header {
+      &~.m-sidebar-toggle {
+        position: fixed;
+        top: 0;
+        width: 100vw;
+        z-index: map-get($zindexs, 'header');
+
+        &::before {
+          left: 0;
+          width: 150vw;
+        }
+      }
+      .m-article-header__spacer {
+        min-height: 54px;
       }
     }
   }
@@ -1163,14 +1168,19 @@
     }
 
     .s-shrinking-digital-publication-header.s-scroll-direction-down & {
+      .m-article-header__img img {
+        opacity: 0;
+        transition: opacity 2s;
+      }
+
       .title {
         opacity: 0;
-        transition: opacity 1s;
+        transition: opacity 2s;
       }
 
       .subtitle {
         opacity: 0;
-        transition: opacity 1s;
+        transition: opacity 2s;
       }
     }
 
@@ -1198,7 +1208,13 @@
       }
 
       .m-article-header__img {
+        flex: 0 0 auto;
         height: 180px;
+
+        img {
+          opacity: 1;
+          transition: opacity 2s;
+        }
       }
     }
 
@@ -1216,21 +1232,22 @@
       height: 75vh;
       right: 50%;
       margin-right: -50vw;
+
+      &::before {
+        z-index: -1;
+      }
     }
   }
 
   @include breakpoint('xlarge') {
     .m-article-header__text {
-      max-width: colspan(14, xlarge);
+      max-width: colspan(14, 'xlarge');
       z-index: 1;
     }
     .m-article-header__text::before {
-      left: -50%;
+      left: -300%;
       margin-left: 0;
-      max-width: colspan(14, xlarge);
-    }
-    .m-article-header__img {
-      flex: 0 0 auto;
+      max-width: colspan(50, 'xlarge');
     }
   }
 }

diff --git a/resources/views/components/molecules/_m-article-header----feature.blade.php b/resources/views/components/molecules/_m-article-header----feature.blade.php
@@ -1,5 +1,6 @@
 @if ($bgcolor ?? false)
     <style>
+        .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__img::before,
         .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__text,
         .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__text::before {
             background-color: {{ $bgcolor }};