Merge pull request #2675 from sul-dlss/new-header

Use the new header layout
sul-dlss · Dec 11, 2024 · bdf1d93 · bdf1d93
2 parents 97f2e9e + 0c0c98e
commit bdf1d93
Show file tree

Hide file tree

Showing 48 changed files with 470 additions and 377 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -3,3 +3,4 @@
 //= link application.css
 //= link openseadragon-assets.js
 //= link spotlight/manifest.js
+//= link component_library_overrides.css
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
@@ -1,7 +1,6 @@
 @import "bootstrap-slider/dist/css/bootstrap-slider";
 @import "bootstrap-tagsinput";
 @import "variables"; // bootstrap variable overrides
-@import "local_variables"; // custom local variables that use bootstrap variables
 @import "blacklight_heatmaps/default";
 @import "bootstrap/scss/bootstrap";
 @import "sir-trevor/main";
@@ -17,5 +16,4 @@
 @import "modules/full_text_highlight";
 @import "modules/caret";
 @import "modules/search_across";
-@import "modules/exhibit_search_typeahead";
 @import "modules/browse";
diff --git a/app/assets/stylesheets/component_library_overrides.css b/app/assets/stylesheets/component_library_overrides.css
@@ -0,0 +1,23 @@
+.su-brand-bar__logo {
+  --bs-link-decoration: none;
+
+  color: white; /* switch after  https://github.com/sul-dlss/component-library/pull/64 */
+  margin-top: 0; /* same as https://github.com/sul-dlss/component-library/pull/62 */
+  padding-top: 0.125rem; /* same as https://github.com/sul-dlss/component-library/pull/62 */
+}
+.navbar-logo {
+  --sul-logo-color: black;
+  background-image: none; /* override blacklight logo */
+}
+
+.bg-cardinal {
+  background-color: var(--stanford-cardinal);
+}
+
+:root {
+  --stanford-fog-light-rgb: 244, 244, 244;
+  --bs-light-rgb: var(--stanford-fog-light-rgb);
+}
+.navbar-nav {
+  --bs-nav-link-color: black;
+}
diff --git a/app/assets/stylesheets/local_variables.scss b/app/assets/stylesheets/local_variables.scss
diff --git a/app/assets/stylesheets/modules/bootstrap_overrides.scss b/app/assets/stylesheets/modules/bootstrap_overrides.scss
@@ -5,15 +5,6 @@
 
 body {
   line-height: 1.428571429;
-  margin-bottom: 0;
-}
-
-.bg-cardinal-red {
-  background-color: $cardinal-red !important;
-}
-
-.topbar {
-  @extend .bg-cardinal-red;
 }
 
 .breadcrumb {
@@ -40,6 +31,7 @@ body {
   .nav-link {
     margin-left: 3px;
     margin-right: 3px;
+
     &:hover,
     &:focus {
       --bs-link-opacity: 0.9;
@@ -49,6 +41,7 @@ body {
       );
     }
   }
+
   .nav-link.active {
     font-weight: 600;
   }

diff --git a/app/assets/stylesheets/modules/exhibit_search_typeahead.scss b/app/assets/stylesheets/modules/exhibit_search_typeahead.scss
diff --git a/app/assets/stylesheets/modules/home.scss b/app/assets/stylesheets/modules/home.scss
@@ -1,9 +1,3 @@
-.blacklight-exhibits-index {
-  #main-container {
-    padding-left: 0;
-  }
-}
-
 .stanford-only {
   padding-bottom: 6px;
   padding-left: 3px;

diff --git a/app/assets/stylesheets/modules/layout.scss b/app/assets/stylesheets/modules/layout.scss
@@ -1,78 +1,68 @@
-.topbar {
-  height: $brandbar-height;
-
-  .navbar-brand {
-    background: transparent image-url("StanfordLibraries-logo-whitetext.svg")
-      no-repeat center left;
-    background-size: contain;
-    height: $brandbar-height;
-    margin: 0;
-    padding: 0.5rem;
-    width: 189px;
-    // TODO: We should probably update the ExhibitNavbarComponent so we can customize it
-    //       but we should wait until we update the header to use the new design
-    //       so we know what we need to customize. For now just hide the text.
-    font-size: 0;
-  }
-
-  @media (max-width: breakpoint-min("md")) {
-    height: auto;
-
-    .navbar-nav {
-      &.float-end {
-        float: none !important;
-      }
-    }
-
-    > li {
-      > a {
-        padding-bottom: $spacer;
-        padding-top: $spacer;
-      }
-    }
-  }
+#user-util-collapse {
+  margin-inline-end: -0.5rem;
 }
 
 .site-navbar {
-  @extend .navbar-dark;
-  background-color: $navbar-transparent-page-bg;
-
-  .navbar-nav {
-    text-transform: uppercase;
+  background-color: rgba(var(--stanford-fog-light-rgb), 0.8);
 
-    .dropdown-menu {
-      text-transform: none;
-    }
+  .searchtips-link a {
+    color: var(--stanford-black);
   }
-
   .search-query-form {
-    min-width: 17em;
-  }
+    border: 1px solid #ababa9;
+    padding: 0.4rem;
+    border-radius: 0.25rem;
+    background-color: white;
 
-  @media (min-width: breakpoint-min("lg")) {
-    .site-search-nav {
-      max-width: 30em;
+    .search-q {
+      padding: 0 0 0 2rem;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")
+        no-repeat left;
+      background-size: auto;
+      background-size: 1rem;
+      outline: none;
     }
-  }
 
-  @media (min-width: breakpoint-min("xl")) {
-    .site-search-nav {
-      max-width: 32em;
+    .dropdown-toggle {
+      --bs-btn-border-color: var(--stanford-black);
+      --bs-btn-color: var(--stanford-black);
+      --bs-btn-hover-color: var(--stanford-black);
+      --bs-btn-hover-border-color: var(--stanford-black);
+      --bs-btn-active-border-color: var(--stanford-black);
+      --bs-btn-active-color: var(--stanford-black);
+    }
+
+    .form-control {
+      min-width: 30vw;
+      border: 0;
+      &:focus {
+        box-shadow: none;
+      }
     }
   }
 }
 
-.exhibit-navbar,
-.site-navbar {
-  .search-query-form {
-    .btn-primary {
-      @extend .btn-secondary;
-      border-color: $input-border-color;
+.image-wrapper {
+  height: 10.625rem;
+}
 
-      svg {
-        fill: $sul-search-btn-color;
+.masthead {
+  small {
+    white-space: nowrap;
+  }
+
+  .masthead-navigation {
+    li {
+      --sul-link-font-weight: 700;
+      a {
+        padding-block: 0.5rem;
+        color: var(--stanford-black);
+        white-space: nowrap;
       }
     }
+    li:not(:last-child) {
+      margin-right: 1rem;
+    }
   }
 }
 

diff --git a/app/assets/stylesheets/modules/search_across.scss b/app/assets/stylesheets/modules/search_across.scss
@@ -1,29 +1,3 @@
-.blacklight-search_across {
-  .sort-pagination {
-    flex-wrap: wrap;
-  }
-
-  .page-links {
-    @extend .w-100;
-  }
-
-  .search-widgets {
-    @extend .w-100;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .btn-group {
-    margin-left: 0.5rem;
-  }
-
-  .search-group {
-    margin-left: 0;
-    margin-right: auto;
-    z-index: 0;
-  }
-}
-
 .exhibit-list {
   .card {
     flex-direction: row;
@@ -130,30 +104,3 @@
     padding-bottom: 0;
   }
 }
-
-.search-across-form {
-  input {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  // dropdown-men is position: static on small
-  // viewports but we want it to remain absolute
-  .dropdown-menu {
-    position: absolute;
-  }
-
-  .input-group {
-    flex-wrap: nowrap;
-  }
-
-  .site-search-type {
-    display: flex;
-    flex-grow: 3;
-  }
-
-  button#site-search-type {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-}
diff --git a/app/assets/stylesheets/modules/spotlight_overrides.scss b/app/assets/stylesheets/modules/spotlight_overrides.scss
@@ -1,49 +1,12 @@
-// Override Bootstrap 4 nav-dark link states
-#user-util-collapse {
-  :not(.dropdown-menu) > li > a {
-    color: $white;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-}
-
 // scss-lint:disable ImportantRule
-.site-title {
-  font-size: 1.625rem;
-
-  @media screen and (min-width: 768px) {
-    font-size: 1.75rem;
-  }
-
-  @media screen and (min-width: 992px) {
-    font-size: 2.125rem;
-  }
-}
-
-.masthead small {
-  font-size: 1.125rem;
-  padding-top: 0.25rem !important;
-
-  @media screen and (min-width: 992px) {
-    font-size: 1.5rem;
-  }
-}
 
-.site-title-container {
-  max-height: 8rem;
+body {
+  margin-bottom: 0;
 }
 
-.masthead .site-title-wrapper {
-  margin-top: 0.5rem;
-  padding-bottom: 0.5rem;
-
-  @media screen and (min-width: 992px) {
-    margin-top: 1rem;
-    padding-bottom: 1rem;
+.masthead {
+  .site-title {
+    margin-bottom: 0.5rem;
   }
 }
 
@@ -61,13 +24,6 @@
   }
 }
 
-// Increase font size because we're using Source Sans in this app
-// and Source Sans is noticeably smaller than the default font.
-.image-masthead .navbar ul.navbar-nav > li a {
-  font-size: 15px;
-  letter-spacing: 1.1px;
-}
-
 #content .browse-landing .text-overlay .browse-category-title {
   @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-min("lg")) {
     font-size: 1.4rem;
@@ -282,9 +238,3 @@ h5,
     z-index: 1;
   }
 }
-
-// Overrides for search tips link and info icon
-// Prevents capitalization of search tips link text when the masthead has an image background
-.image-masthead .searchtips-link {
-  text-transform: none !important;
-}