Merge pull request #487 from art-institute-of-chicago/feature/contrib…

…ution-header Create contribution page header [PUB-231]
art-institute-of-chicago · Aug 26, 2024 · 1bb7a07 · 1bb7a07
2 parents 9c55b0c + 7428054
commit 1bb7a07
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 41 deletions.
diff --git a/app/Http/Controllers/DigitalPublicationArticleController.php b/app/Http/Controllers/DigitalPublicationArticleController.php
@@ -51,6 +51,7 @@ public function show($pubId, $pubSlug, $id, $slug = null)
             'borderlessHeader' => false,
             'unstickyHeader' => true,
             'canonicalUrl' => $canonicalPath,
+            'bgcolor' => $item->digitalPublication->bgcolor,
         ]);
     }
 }
diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss
@@ -1300,6 +1300,34 @@
   display: none;
 }
 
+.m-article-header--digital-publication-article ~ .m-article-header__text {
+  height: 140px;
+  color: $color__white;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 40vh;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    height: 150px;
+    width: 200vw;
+    margin-left: calc(-600px + 50%);
+    @each $name in ('large', 'xlarge') {
+      @include breakpoint('#{$name}') {
+        left: calc(#{colspan(14, '#{$name}')} * 2 + (#{colspan(1, '#{$name}')} * 2));
+        margin-left: calc((#{colspan(14, '#{$name}')} * -1) + (#{colspan(1, '#{$name}')} * -1));
+      }
+    }
+  }
+
+  .title {
+    color: $color__white;
+  }
+}
+
 .m-article-header--generic {
   padding-top: 0;
 

diff --git a/frontend/scss/organisms/_o-article__primary-actions.scss b/frontend/scss/organisms/_o-article__primary-actions.scss
@@ -46,7 +46,7 @@
   left: 0;
   right: 0;
   top: 0;
-  height: 1px;
+  height: 0px;
   background-color: $color__rules--primary;
 }
 
@@ -266,8 +266,44 @@
   }
 
   .m-article-actions--publication__logo {
+    height: 110px;
     margin-bottom: 40px;
     white-space: nowrap;
+    color: $color__white;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      height: 150px;
+      width: 600px;
+      margin-left: calc(-600px + 50%);
+      @each $name in ('large', 'xlarge') {
+        @include breakpoint('#{$name}') {
+          width: calc(#{colspan(14, '#{$name}')} * 2 + (#{colspan(1, '#{$name}')} * 2));
+          padding-right: calc(#{colspan(1, '#{$name}')} * 2);
+          margin-left: calc((#{colspan(14, '#{$name}')} * -1) + (#{colspan(1, '#{$name}')} * -1));
+          margin-right: colspan(2, #{$name});
+        }
+      }
+    }
+
+    a {
+      color: $color__link--publications;
+    }
+
+    a:hover,
+    a:focus {
+      color: $color__link--publications-hover;
+    }
+
+    a:active {
+      color: $color__link--publications-active;
+    }
 
     @include breakpoint('large+') {
       .p-digitalpublications-show &,
@@ -292,6 +328,27 @@
     }
   }
 
+  .m-article-header__text::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    height: 150px;
+    width: 600px;
+    margin-left: calc(-600px + 50%);
+    @each $name in ('large', 'xlarge') {
+      @include breakpoint('#{$name}') {
+        width: calc(#{colspan(14, '#{$name}')} * 2 + (#{colspan(1, '#{$name}')} * 2));
+        padding-right: calc(#{colspan(1, '#{$name}')} * 2);
+        margin-left: calc((#{colspan(14, '#{$name}')} * -1) + (#{colspan(1, '#{$name}')} * -1));
+        margin-right: colspan(2, #{$name});
+      }
+    }
+  }
+
   .m-article-actions {
     margin-top: 50px;
     margin-bottom: 50px;

diff --git a/frontend/scss/pages/_p-issuearticle-show.scss b/frontend/scss/pages/_p-issuearticle-show.scss
@@ -101,6 +101,47 @@
     }
   }
 
+  .m-article-actions--publication__logo {
+    height: 110px;
+    padding-bottom: 40px;
+    color: $color__white;
+    @include breakpoint('medium-') {
+      padding-top: 40px;
+      width: 100%;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      width: 300vw;
+      margin-left: calc(-600px + 50%);
+      @each $name in ('large', 'xlarge') {
+        @include breakpoint('#{$name}') {
+          width: calc(#{colspan(14, '#{$name}')} * 2 + (#{colspan(1, '#{$name}')} * 2));
+          padding-right: calc(#{colspan(1, '#{$name}')} * 2);
+          margin-left: calc((#{colspan(14, '#{$name}')} * -1) + (#{colspan(1, '#{$name}')} * -1));
+          margin-right: colspan(2, #{$name});
+        }
+      }
+    }
+
+    @include font-styles-untuck(generate-font-obj(
+      (
+        font-family: $serif-font,
+        font-family-loaded: $serif-font--loaded,
+        font-loaded-class: $serif-font-loaded-class,
+        settings: (
+          'xsmall': (font-size: 22, line-height: 23, push: 0),
+        )
+      )
+    ));
+  }
+
   .o-article {
     padding-bottom: 0;
 
@@ -145,7 +186,7 @@
     padding-top: 0;
   }
 
-  .m-article-header--journal-article {
+  .m-article-header--digital-publication-article {
     padding-top: 0;
     margin-bottom: 0 !important; // Bad
 
@@ -170,7 +211,12 @@
 
     .m-article-header__img {
       min-height: 240px;
-      height: 60vh;
+      height: 40vh;
+      right: 50%;
+      margin-right: -50vw;
+      left: auto;
+      margin-left: auto;
+      width: 100vw;
 
       img {
         width: 100%;
@@ -326,4 +372,10 @@ Styling related specifically to digital publications
   .o-blocks > h2:not([class*=f-]) {
     margin-top: 20px;
   }
+
+  .o-article > .o-article__primary-actions--digital-publication {
+    @include breakpoint('xsmall') {
+      display: none;
+    }
+  }
 }
diff --git a/frontend/scss/print.scss b/frontend/scss/print.scss
@@ -533,7 +533,7 @@ html.s-print body {
     }
 
     .m-article-header--feature .m-article-header__text,
-    .m-article-header--journal-article .m-article-header__text {
+    .m-article-header--digital-publication-article .m-article-header__text {
         margin-top: 0.25in;
         margin-left: 0;
         min-height: auto;

diff --git a/frontend/scss/setup/_colors.scss b/frontend/scss/setup/_colors.scss
@@ -251,6 +251,10 @@ $color__link--limited: $color__orange;
 $color__link--limited-hover: $color__orange--hover;
 $color__link--limited-active: $color__orange--active;
 
+$color__link--publications: $color__white;
+$color__link--publications-hover: #dcddde;
+$color__link--publications-active: #9d9fa2;
+
 
 /***
 

diff --git a/resources/views/components/molecules/_m-article-actions----digital-publication.blade.php b/resources/views/components/molecules/_m-article-actions----digital-publication.blade.php
@@ -4,7 +4,7 @@
         <svg aria-hidden="true" class="icon--close" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M3 3l10 10M13 3L3 13"></path></svg>
     </button>
 
-    <div class="m-article-actions--publication__logo">
+    <div class="m-article-actions--publication__logo u-show@large+">
         <a href="{!! $digitalPublication->present()->getCanonicalUrl() !!}">
             {!! $digitalPublication->header_title_display !!}
         </a>

diff --git a/...ticle-header----journal-article.blade.php → ...----digital-publication-article.blade.php b/...ticle-header----journal-article.blade.php → ...----digital-publication-article.blade.php
@@ -1,4 +1,13 @@
-<header class="m-article-header m-article-header--journal-article">
+@if ($bgcolor ?? false)
+    <style>
+        .m-article-header--digital-publication-article ~ .m-article-header__text::before,
+        .m-article-actions--publication__logo:: {
+            background-color: {{ $bgcolor }};
+        }
+    </style>
+@endif
+
+<header class="m-article-header m-article-header--feature m-article-header--digital-publication-article">
     <div class="m-article-header__img">
         @if ($img)
             @component('components.atoms._img')
@@ -19,21 +28,7 @@
             @endcomponent
         @endif
     </div>
-    <div class="m-article-header__text">
-        @if (isset($title))
-            @component('components.atoms._title')
-                @slot('tag', 'h1')
-                @slot('font', 'f-headline-editorial')
-                @slot('itemprop', 'name')
-                @slot('title', $title)
-                @slot('title_display', $title_display ?? null)
-            @endcomponent
-        @endif
-        @if (!empty($credit))
-            @component('components.molecules._m-info-trigger')
-                @slot('isInverted', true)
-                @slot('creditText', $credit)
-            @endcomponent
-        @endif
+    <div class="m-article-actions--publication__logo u-show@medium-">
+        {!! $title_display ?? $title !!}
     </div>
 </header>
diff --git a/resources/views/site/digitalPublicationArticleDetail.blade.php b/resources/views/site/digitalPublicationArticleDetail.blade.php
@@ -6,7 +6,26 @@
 
 @section('content')
 
+@if ($bgcolor ?? false)
+    <style>
+        .m-article-header--digital-publication-article ~ .m-article-header__text::before,
+        .m-article-actions--publication__logo,
+        .m-article-actions--publication__logo::before {
+            background-color: {{ $bgcolor }};
+        }
+    </style>
+@endif
+
 <article class="o-article">
+    @if ($item->type == DigitalPublicationArticleType::Contributions)
+        @component('components.molecules._m-article-header----digital-publication-article')
+            @slot('title', $item->present()->title)
+            @slot('title_display', $item->present()->title_display)
+            @slot('img', $item->imageFront('hero'))
+            @slot('imgMobile', $item->imageFront('mobile_hero'))
+        @endcomponent
+    @endif
+
     @component('components.molecules._m-sidebar-toggle')
         @slot('title', $item->digitalPublication->title_display ?? $item->digitalPublication->title)
     @endcomponent
@@ -20,30 +39,28 @@
         @endcomponent
     </div>
 
-    @switch ($item->type)
-        @case (DigitalPublicationArticleType::Contributions)
-            @component('components.molecules._m-article-header----journal-article')
-                @slot('title', $item->present()->title)
-                @slot('title_display', $item->present()->title_display)
-                @slot('img', $item->imageFront('hero'))
-                @slot('imgMobile', $item->imageFront('mobile_hero'))
-            @endcomponent
-            @break
-        @case (DigitalPublicationArticleType::Entry)
-            {{-- The Entry type does not display a header --}}
-            @break
-        @default
-            @component('components.molecules._m-article-header')
-                @slot('headerType', 'generic')
-                @slot('title', $item->present()->title)
-                @slot('title_display', $item->present()->title_display ?? null) {{-- WEB-2244: Populate this? --}}
-            @endcomponent
-    @endswitch
+    @if ($item->type != DigitalPublicationArticleType::Contributions && $item->type != DigitalPublicationArticleType::Entry)
+        @component('components.molecules._m-article-header')
+            @slot('headerType', 'generic')
+            @slot('title', $item->present()->title)
+            @slot('title_display', $item->present()->title_display ?? null) {{-- WEB-2244: Populate this? --}}
+        @endcomponent
+    @endif
 
     <div class="o-article__secondary-actions o-article__secondary-actions--empty">
         {{-- Intentionally left blank for layout --}}
     </div>
 
+    <div class="m-article-header__text u-show@large+">
+        @component('components.atoms._title')
+            @slot('tag', 'h1')
+            @slot('font', 'f-headline-editorial')
+            @slot('itemprop', 'name')
+            @slot('title', $item->present()->title)
+            @slot('title_display', $item->present()->title_display ?? null)
+        @endcomponent
+    </div>
+
     @if ($item->heading)
     <div class="o-article__intro">
       @component('components.blocks._text')