Merge pull request #3253 from OregonDigital/feature/exploreCollection…

…sBootstrapUpgrade Explore Collections bootstrap upgrade
OregonDigital · Jan 29, 2025 · 0eabffd · 0eabffd
2 parents 8651666 + cd8c258
commit 0eabffd
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 54 deletions.
diff --git a/app/assets/stylesheets/oregon_digital/_buttons.scss b/app/assets/stylesheets/oregon_digital/_buttons.scss
@@ -52,6 +52,9 @@ input.link {
     }
   }
 }
+.btn-sm {
+  font-size: 14px;
+}
 .btn-lg {
   padding: 16px 24px;
   font-size: 18px;

diff --git a/app/assets/stylesheets/oregon_digital/_search.scss b/app/assets/stylesheets/oregon_digital/_search.scss
@@ -339,38 +339,42 @@ em {
 div.pagination {
   display: flex;
   justify-content: center;
+  margin: 20px 0;
 }
-ul.pagination li {
-  &.active span {
-    background-color: $contrast-orange;
-    border: none;
-    color: $navy-blue;
-  }
-  &.next span,
-  &.next a,
-  &.previous span,
-  &.previous a {
-    background: none;
-  }
-  &.disabled {
-    span,
-    span:hover,
-    span:focus,
-    a,
-    a:hover,
-    a:focus {
-      color: $dark-grey;
+ul.pagination {
+  align-items: center;
+  li {
+    &.active span.page-link {
+      background-color: $contrast-orange;
+      border: none;
+      color: $navy-blue;
+    }
+    &.next span,
+    &.next a,
+    &.previous span,
+    &.previous a {
+      background: none;
+    }
+    &.disabled {
+      span,
+      span:hover,
+      span:focus,
+      a,
+      a:hover,
+      a:focus {
+        color: $dark-grey;
+      }
     }
-  }
 
-  a,
-  span {
-    background-color: $very-light-grey;
-    border: none;
-    margin: 0 .25em;
+    a,
+    span {
+      background-color: $very-light-grey;
+      border: none;
+      margin: 0 .25em;
+      padding: 6px 12px;
+    }
   }
 }
-
 /* Gallery specific */
 #content {
   flex-direction: column;

diff --git a/app/assets/stylesheets/oregon_digital/explore_collections/_buttons.scss b/app/assets/stylesheets/oregon_digital/explore_collections/_buttons.scss
@@ -64,7 +64,7 @@ $triangle-size: $block-border-size*4;
   width:$triangle-size*2;
   height:$triangle-size*2;
   overflow:hidden;
-  position:absolute;
+  position:relative;
   visibility: hidden;
 }
 .notch::before,
@@ -89,12 +89,11 @@ $triangle-size: $block-border-size*4;
 
 /* Notch on Bottom Middle */
 .notch-xMiddle-yBottom {
-  bottom:-$triangle-size*2;
   left:50%;
   transform:rotate(90deg) translateY(50%);
 }
 
-@media (min-width: breakpoint-min(sm)) {
+@media (min-width: breakpoint-min(md)) {
   $block-border-size: 5px;
   $triangle-size: $block-border-size*4;
   .notch {
@@ -113,12 +112,6 @@ $triangle-size: $block-border-size*4;
     left:-($triangle-size + $block-border-size*2);
   }
 
-  /* Notch on Bottom Middle */
-  .notch-xMiddle-yBottom {
-    bottom:-$triangle-size*2;
-    // left:50%;
-    // transform:rotate(90deg) translateY(50%);
-  }
   #explore-tabs a {
     height: 55px;
     width: 150px;

diff --git a/app/assets/stylesheets/oregon_digital/explore_collections/_masonry_view.scss b/app/assets/stylesheets/oregon_digital/explore_collections/_masonry_view.scss
@@ -6,13 +6,13 @@
     border-top: $very-light-grey 2px solid;
     width: calc(16.666% - 20px);
 
-    @media (max-width: breakpoint-min(md)) {
+    @media (max-width: breakpoint-min(xl)) {
       & {
         width: calc(25% - 30px);
       }
     }
 
-    @media (max-width: breakpoint-min(sm)) {
+    @media (max-width: breakpoint-min(md)) {
       & {
         width: calc(50% - 20px);
       }
@@ -26,13 +26,13 @@
   #masonry-gutter-sizer {
     width: 20px;
 
-    @media (max-width: breakpoint-min(md)) {
+    @media (max-width: breakpoint-min(xl)) {
       & {
         width: 30px;
       }
     }
 
-    @media (max-width: breakpoint-min(sm)) {
+    @media (max-width: breakpoint-min(md)) {
       & {
         width: 40px;
       }

diff --git a/app/assets/stylesheets/oregon_digital/explore_collections/_showcase.scss b/app/assets/stylesheets/oregon_digital/explore_collections/_showcase.scss
@@ -31,7 +31,7 @@ form#explore-collection-search {
 #sortAndPerPage.explore-collections-per-page {
   padding: 2em 0 1em 0;
 
-  @media (max-width: breakpoint-max(xs)) {
+  @media (max-width: breakpoint-max(sm)) {
     & {
       padding-left: 2em;
       padding-right: 2em;
@@ -44,21 +44,21 @@ form#explore-collection-search {
     font-weight: bold;
     padding-bottom: 2em;
 
-    @media (max-width: breakpoint-max(sm)) {
+    @media (max-width: breakpoint-max(lg)) {
       & {
         display: block;
       }
     }
   }
 
   .explore-collections-search-widgets {
-    @media (max-width: breakpoint-max(sm)) {
+    @media (max-width: breakpoint-max(lg)) {
       & {
         float: left !important;
       }
     }
 
-    @media (min-width: breakpoint-max(sm)) {
+    @media (min-width: breakpoint-max(lg)) {
       transform: 0 15%;
     }
 

diff --git a/app/controllers/oregon_digital/explore_collections_controller.rb b/app/controllers/oregon_digital/explore_collections_controller.rb
@@ -106,7 +106,7 @@ def build_breadcrumbs
       all: 'all',
       osu: 'osu',
       uo: 'uo',
-      my: 'my collections'
+      my: 'my'
     }.freeze
 
     def search_service

diff --git a/app/views/_masthead.html.erb b/app/views/_masthead.html.erb
@@ -1,6 +1,6 @@
 <!-- OVERRIDDEN FROM HYRAX TO PUSH THROUGH THE CHANGES TO _user_util_links -->
 <header class="header dropshadow-align" aria-label="header">
-  <nav id="masthead" class="navbar navbar-light navbar-expand-md fixed-top">
+  <nav id="masthead" class="navbar navbar-light navbar-expand-md">
     <div class="container-fluid">
 
       <div class="navbar-header"> 

diff --git a/app/views/oregon_digital/explore_collections/_explore_tabs.html.erb b/app/views/oregon_digital/explore_collections/_explore_tabs.html.erb
@@ -2,35 +2,35 @@
   <ul class='nav nav-pills visible-all-inline-block'>
     <li class="<%= 'active' if tab == controller.class::TABS[:all] %>">
       <div class="stacker-container">
-        <%= link_to 'All', all_collections_path, class: 'btn btn-outline' %>
+        <%= link_to 'All', all_collections_path, class: 'btn btn-sm btn-outline' %>
         <div class="notch notch-xMiddle-yBottom"></div>
       </div>
     </li>
     <li class="<%= 'active' if tab == controller.class::TABS[:osu] %>">
       <div class="stacker-container">
-        <%= link_to osu_collections_path, class: 'btn btn-outline hidden-xs' do %>
+        <%= link_to osu_collections_path, class: 'btn btn-sm btn-outline d-none d-md-block' do %>
           Oregon State <br> University
         <% end %>
-        <%= link_to 'OSU', osu_collections_path, class: 'btn btn-outline visible-xs' %>
+        <%= link_to 'OSU', osu_collections_path, class: 'btn btn-sm btn-outline d-sm-block d-md-none' %>
         <div class="notch notch-xMiddle-yBottom"></div>
       </div>
     </li>
     <li class="<%= 'active' if tab == controller.class::TABS[:uo] %>">
       <div class="stacker-container">
-        <%= link_to uo_collections_path, class: 'btn btn-outline hidden-xs' do %>
+        <%= link_to uo_collections_path, class: 'btn btn-sm btn-outline d-none d-md-block' do %>
           University of <br> Oregon
         <% end %>
-        <%= link_to 'UO', uo_collections_path, class: 'btn btn-outline visible-xs' %>
+        <%= link_to 'UO', uo_collections_path, class: 'btn btn-sm btn-outline d-sm-block d-md-none' %>
         <div class="notch notch-xMiddle-yBottom"></div>
       </div>
     </li>
     <% unless current_user.nil? %>
     <li class="<%= 'active' if tab == controller.class::TABS[:my] %>">
       <div class="stacker-container">
-        <%= link_to my_collections_path, class: 'btn btn-outline hidden-xs' do %>
+        <%= link_to my_collections_path, class: 'btn btn-sm btn-outline d-none d-md-block' do %>
           My <br> Collections
         <% end %>
-        <%= link_to 'My', my_collections_path, class: 'btn btn-outline visible-xs hidden-sm' %>
+        <%= link_to 'My', my_collections_path, class: 'btn btn-sm btn-outline d-sm-block d-md-none' %>
         <div class="notch notch-xMiddle-yBottom"></div>
       </div>
     </li>

diff --git a/app/views/oregon_digital/explore_collections/_index_masonry.html.erb b/app/views/oregon_digital/explore_collections/_index_masonry.html.erb
@@ -3,7 +3,6 @@
     <%= link_to(url_for_document(document)) do |body| %>
       <span class="gradient-wrapper"><%= image_tag thumbnail_url(document), alt: "" %></span>
       <p class="visible-all-inline h5">
-      </p>
         <%= document.title_or_label.truncate(89).html_safe %>
         <% if current_ability.admin? ? false : controller.institution_restricted?(document.id) %>
           <span class="glyphicon glyphicon-lock"></span>