Trim down listing page header from landing page [PUB-216]

art-institute-of-chicago · Aug 23, 2024 · cc63278 · cc63278
1 parent 531823e
commit cc63278
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 47 deletions.
diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss
@@ -1137,6 +1137,7 @@
       margin-top: 35px;
     }
   }
+
   @include breakpoint('medium-') {
     .s-sticky-digital-publication-header {
       &~.m-sidebar-toggle {
@@ -1167,24 +1168,85 @@
       opacity: 1;
     }
 
-    .s-shrinking-digital-publication-header.s-scroll-direction-down & {
-      .m-article-header__img img {
-        opacity: 0;
-        transition: opacity 2s;
+    .m-article-header__text {
+      flex: 0 0 colspan(14, 'large');
+      padding-right: initial;
+      padding-left: initial;
+    }
+
+    .m-article-header__img {
+      left: auto;
+      margin-left: auto;
+
+      flex: 0 0 colspan(50, 'large');
+      height: 75vh;
+      right: 50%;
+      margin-right: -50vw;
+
+      &::before {
+        z-index: -1;
+      }
+    }
+  }
+
+  @include breakpoint('xlarge') {
+    .m-article-header__text {
+      max-width: colspan(14, 'xlarge');
+      z-index: 1;
+    }
+    .m-article-header__text::before {
+      left: -300%;
+      margin-left: 0;
+      max-width: colspan(50, 'xlarge');
+    }
+  }
+
+  .p-digitalpublications-showlisting & {
+    @include breakpoint('large+') {
+      .m-article-header__img {
+        height: 180px;
+
+        img {
+          display: none;
+        }
       }
 
       .title {
-        opacity: 0;
-        transition: opacity 2s;
+        margin-bottom: auto;
+        margin-top: auto;
       }
 
       .subtitle {
-        opacity: 0;
-        transition: opacity 2s;
+        display: none;
       }
+
+    }
+  }
+}
+
+// TODO Isolate the following to a _s-sticky-digital-publication-header.scss file?
+.s-shrinking-digital-publication-header.s-scroll-direction-down {
+  @include breakpoint('large+') {
+    .m-article-header__img img {
+      opacity: 0;
+      transition: opacity 2s;
     }
 
-    .s-sticky-digital-publication-header & {
+    .title {
+      opacity: 0;
+      transition: opacity 2s;
+    }
+
+    .subtitle {
+      opacity: 0;
+      transition: opacity 2s;
+    }
+  }
+}
+
+.s-sticky-digital-publication-header {
+  @include breakpoint('large+') {
+    .m-article-header--digital-publication {
       position: fixed;
       top: 0;
       width: 100%;
@@ -1212,40 +1274,29 @@
       }
     }
 
-    .m-article-header__text {
-      flex: 0 0 colspan(14, 'large');
-      padding-right: initial;
-      padding-left: initial;
+    .m-article-header__spacer {
+      display: block;
+      width: 100vw;
     }
 
-    .m-article-header__img {
-      left: auto;
-      margin-left: auto;
-
-      flex: 0 0 colspan(50, 'large');
-      height: 75vh;
-      right: 50%;
-      margin-right: -50vw;
-
-      &::before {
-        z-index: -1;
+    &.p-digitalpublications-show {
+      .m-article-header__spacer {
+        height: 75vh;
       }
     }
-  }
 
-  @include breakpoint('xlarge') {
-    .m-article-header__text {
-      max-width: colspan(14, 'xlarge');
-      z-index: 1;
-    }
-    .m-article-header__text::before {
-      left: -300%;
-      margin-left: 0;
-      max-width: colspan(50, 'xlarge');
+    &.p-digitalpublications-showlisting {
+      .m-article-header__spacer {
+        height: 180px;
+      }
     }
   }
 }
 
+.m-article-header__spacer {
+  display: none;
+}
+
 .m-article-header--generic {
   padding-top: 0;
 
@@ -1662,14 +1713,3 @@ a.m-article-header__img-credit {
 .m-article-header__img-thumbs button[disabled] + img {
   outline: 1px solid $color__black--54;
 }
-
-@include breakpoint('large+') {
-  .m-article-header__spacer {
-    display: none;
-    .s-sticky-digital-publication-header & {
-      display: block;
-      height: 75vh;
-      width: 100vw;
-    }
-  }
-}
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,8 +1,8 @@
 @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 {
+        .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__text::before,
+        .{{ (isset($variation)) ? $variation : 'm-article-header--feature' }} .m-article-header__img::before {
             background-color: {{ $bgcolor }};
         }
     </style>