Hyrax 4 CSS updates

UNC-Libraries · Sep 25, 2023 · d2df7a8 · d2df7a8
1 parent cac47cd
commit d2df7a8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 44 deletions.
diff --git a/app/assets/stylesheets/unc_custom.css.scss b/app/assets/stylesheets/unc_custom.css.scss
@@ -8,13 +8,18 @@ $shadow-base-bottom: 0 -10px 10px -10px;
 $shadow: inset $shadow-base-top #000;
 $description-shadow: inset $shadow-base-top gray;
 
+// Overridden Bootstrap variables. Bumps the font down to 14px
+$font-size-base: .875rem;
+$font-size-sm: $font-size-base;
+
 @font-face {
   font-family: LibreBaskerville;
   src: url(asset-path("libre-baskerville/LibreBaskerville-Italic.otf")) format("opentype");
 }
 
 body {
   font-family: Verdana, Arial, sans-serif;
+  font-size: $font-size-base;
 }
 
 #logo {
@@ -36,6 +41,12 @@ body {
   }
 }
 
+// Fixes https://github.com/samvera/hyrax/blob/main/app/assets/stylesheets/hyrax/_facets.scss#L6
+// Which causes the toggle icon to never display
+.navbar-toggler-icon {
+  display: inline-block;
+}
+
 span.institution_name {
   font-family: LibreBaskerville, sans-serif;
 
@@ -60,7 +71,7 @@ span.institution_name {
 }
 
 #masthead {
-  background-color: $carolina-blue-dark;
+  background-color: $carolina-blue-dark !important;
   margin-bottom: 0;
 
   &+ nav {
@@ -90,9 +101,15 @@ span.institution_name {
   }
 }
 
+#top-navbar-collapse {
+    .dropdown-menu {
+      left: -70px;
+    }
+}
+
 .advanced_search {
   float: right;
-  margin: -11px 0 2px 0;
+  margin-right: 15px;
   &:hover {
     text-decoration: none;
   }
@@ -129,6 +146,17 @@ span.institution_name {
   }
 }
 
+#advanced_search {
+  .form-group {
+    display: inline-flex;
+    width: 100%;
+
+    label {
+      font-weight: bold;
+    }
+  }
+}
+
 .link-tabs {
   background-color: $carolina-blue;
 
@@ -159,6 +187,10 @@ span.institution_name {
   }
 }
 
+.site-title.h1 {
+  padding-top: 20px;
+}
+
 #unc-text {
   color: $text-color !important;
 
@@ -174,7 +206,8 @@ span.institution_name {
     -moz-border-radius: 5px;
     border-radius: 5px;
     padding: 10px;
-    font-size: 1.2em;
+    font-size: 2.6rem;
+    line-height: 43px;
   }
 
   blockquote {
@@ -188,6 +221,10 @@ span.institution_name {
   padding-left: 0;
   padding-right: 30px;
 
+  h2 {
+    margin-top: 15px;
+  }
+
   a {
     color: $text-color;
     font-weight: bold;
@@ -268,6 +305,7 @@ span.institution_name {
   }
 
   h2 {
+    margin-top: 15px;
     margin-bottom: 50px;
   }
 
@@ -318,10 +356,8 @@ div.person {
   height: auto;
 }
 
-
-
 #unc-footer {
-  background-color: $carolina-blue-dark;
+  background-color: $carolina-blue-dark !important;
 
   .navbar-text {
     display: flex;
@@ -428,6 +464,21 @@ div.unc-modal {
   }
 }
 
+#content {
+  #documents {
+    justify-content: left;
+  }
+}
+
+/* Fixes https://github.com/samvera/hyrax/blob/f14958e665535be2696dc1cdf9e205d6fc54e668/app/assets/stylesheets/hyrax/_card.scss#L5
+Resets it to the default Bootstrap card margins
+ */
+#admin_sets {
+  .card-title {
+    margin-bottom: .75rem;
+  }
+}
+
 #documents.table-responsive {
   justify-content: left;
   width: 100%;
@@ -705,32 +756,16 @@ li {
   }
 }
 
-@media only screen and (max-width: 1399px) {
-  .row {
-    margin-right: -7px;
-  }
-}
-
 @media only screen and (max-width: 1375px) {
   .navbar-brand {
     margin-left: 0;
   }
-
-  #unc-text {
-    div {
-      width: auto;
-    }
-  }
 }
 
 @media only screen and (max-width: 1100px) {
   dl.work-show {
     margin-left: 75px;
   }
-
-  .navbar-nav {
-    margin: 0 0 0 -15px;
-  }
 }
 
 
@@ -844,13 +879,13 @@ li {
   }
 }
 
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 768px) {
   #masthead .navbar-brand {
     padding-right: 0;
   }
 
   .institution_name {
-    font-size: 14px;
+    font-size: $font-size-base
   }
 }
 
@@ -1004,41 +1039,25 @@ li {
       width: 100%;
     }
 
-    .navbar-header {
-      float: none;
-    }
-
-    .navbar-left, .navbar-right {
-      float: none !important;
-    }
-
     .navbar-toggle {
       display: block;
     }
 
     .navbar-collapse {
       border-top: 1px solid transparent;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+      padding-left: 25px;
     }
 
     .navbar-fixed-top {
       top: 0;
       border-width: 0 0 1px;
     }
 
-    .navbar-collapse.collapse {
-      display: none !important;
-    }
-
     .navbar-nav {
-      float: none !important;
       margin-top: 7.5px;
     }
 
-    .navbar-nav > li {
-      float: none;
-    }
-
     .navbar-nav > li > a {
       padding-top: 10px;
       padding-bottom: 10px;

diff --git a/app/views/_controls.html.erb b/app/views/_controls.html.erb
@@ -1,5 +1,5 @@
 <%# [hyc-override] Overriding partial in hyrax gem to update homepage %>
-<nav class="navbar navbar-light bg-light navbar-expand-sm justify-content-between align-items-center px-2 py-3 border-bottom" role="navigation" aria-label="Root Menu">
+<nav class="navbar navbar-light bg-light navbar-expand-sm justify-content-between align-items-baseline px-2 py-3 border-bottom" role="navigation" aria-label="Root Menu">
     <ul class="nav navbar-nav col-sm-5">
       <li class="nav-item <%= 'active' if current_page?(hyrax.root_path) %>">
         <%= link_to t(:'hyrax.links.browse_all'), main_app.search_catalog_path, class: "nav-link", aria: current_page?(main_app.search_catalog_path) ? {current: 'page'} : nil %></li>

diff --git a/app/views/catalog/_search_form.html.erb b/app/views/catalog/_search_form.html.erb
@@ -9,7 +9,7 @@
       < %= t("hyrax.search.form.q.label", application_name: application_name) %>
     </label> -->
 
-    <div class="input-group col-sm-9">
+    <div class="input-group col">
       <%# [hyc-override] Add aria label %>
       <%= text_field_tag :q, current_search_parameters , 'aria-label': 'Search', class: "q form-control", id: "search-field-header", placeholder: t("hyrax.search.form.q.placeholder") %>
 
@@ -18,7 +18,7 @@
           <%= t('hyrax.search.button.html') %>
         </button>
         <% if current_user %>
-          <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 
             <span class="sr-only" data-search-element="label"><%= t("hyrax.search.form.option.all.label_long", application_name: application_name) %></span>
             <span aria-hidden="true"><%= t("hyrax.search.form.option.all.label_short") %></span>