Merge pull request #4446 from pulibrary/4081-bootstrap5

[#4081] Update to bootstrap 5
pulibrary · Nov 26, 2024 · 351ee36 · 351ee36
2 parents 38d7442 + 9db5764
commit 351ee36
Show file tree

Hide file tree

Showing 71 changed files with 836 additions and 1,251 deletions.
diff --git a/Gemfile b/Gemfile
@@ -14,7 +14,8 @@ gem 'blacklight-hierarchy'
 gem 'blacklight-marc', '~>8.1'
 # slider limit support
 gem 'blacklight_range_limit', '~> 8.2'
-gem 'bootstrap', '~> 4.6'
+gem 'bootstrap', '~> 5.2.0'
+gem 'psych'
 # Capistrano
 # In the Capistrano documentation, it has these limited to the development group, and `require: false``
 gem 'capistrano', '~> 3.4'
@@ -75,8 +76,6 @@ gem 'rsolr'
 # Should this be in the test, development group?
 gem 'rspec-rails'
 gem 'rubyzip', '>= 1.2.2'
-# Use SCSS for stylesheets
-gem 'sass-rails', '~> 6.0'
 gem 'simple_form'
 gem 'sneakers'
 gem 'sprockets-es6'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -155,9 +155,10 @@ GEM
       blacklight (>= 7.25.2, < 9)
       deprecation
       view_component (>= 2.54, < 4)
-    bootstrap (4.6.2.1)
+    bootstrap (5.2.3)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.16.1, < 2)
+      popper_js (>= 2.11.6, < 3)
+      sassc-rails (>= 2.0.0)
     builder (3.3.0)
     bunny (2.23.0)
       amq-protocol (~> 2.3, >= 2.3.1)
@@ -458,7 +459,7 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.9)
-    popper_js (1.16.1)
+    popper_js (2.11.8)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -476,7 +477,7 @@ GEM
       rack (>= 1.0, < 4)
     rack-mini-profiler (3.3.1)
       rack (>= 1.2.0)
-    rack-protection (4.1.0)
+    rack-protection (4.1.1)
       base64 (>= 0.1.0)
       logger (>= 1.6.0)
       rack (>= 3.0.0, < 4)
@@ -596,8 +597,6 @@ GEM
       rubocop-rspec (~> 3, >= 3.0.1)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -718,9 +717,10 @@ GEM
     vite_rails (3.0.19)
       railties (>= 5.1, < 9)
       vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.9.0)
+    vite_ruby (3.9.1)
       dry-cli (>= 0.7, < 2)
       logger (~> 1.6)
+      mutex_m
       rack-proxy (~> 0.6, >= 0.6.1)
       zeitwerk (~> 2.2)
     voight_kampff (2.0.0)
@@ -763,7 +763,7 @@ DEPENDENCIES
   blacklight-marc (~> 8.1)
   blacklight_dynamic_sitemap
   blacklight_range_limit (~> 8.2)
-  bootstrap (~> 4.6)
+  bootstrap (~> 5.2.0)
   capistrano (~> 3.4)
   capistrano-passenger
   capistrano-rails
@@ -807,6 +807,7 @@ DEPENDENCIES
   openurl (~> 1.0)
   pg
   pry-byebug
+  psych
   puma (~> 6.4)
   rack-attack
   rack-mini-profiler
@@ -823,7 +824,6 @@ DEPENDENCIES
   rubocop-rspec
   rubocop-rspec_rails
   rubyzip (>= 1.2.2)
-  sass-rails (~> 6.0)
   selenium-webdriver
   simple_form
   sneakers

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,5 +1,5 @@
 //= link_tree ../images
-//= link application.css
 //= link application.js
+//= link application.css
 //= link print.css
 //= link requests/application.js
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -14,12 +14,7 @@
 //= require jquery_ujs
 //= require popper
 //
-//= require bootstrap/util
-//= require bootstrap/alert
-//= require bootstrap/button
-//= require bootstrap/collapse
-//= require bootstrap/dropdown
-//= require bootstrap/modal
+//= require bootstrap
 //
 // Required by Blacklight
 //= require blacklight/blacklight

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -17,7 +17,8 @@
 @import 'variables/breaks';
 @import 'variables/colors';
 @import 'variables/typography';
-
+@import 'bootstrap_override';
+@import 'bootstrap';
 @import 'blacklight';
 @import 'blacklight_marc';
 

diff --git a/app/assets/stylesheets/base/forms.scss b/app/assets/stylesheets/base/forms.scss
@@ -29,13 +29,13 @@ form table th:first-child {
 
 .has-error .error {
   font-weight: bold;
-  color: $brand-danger;
+  color: $danger;
 }
 
 .blacklight-feedback-hidden {
   display: none;
 }
 
-.blacklight-feedback .form-group {
+.blacklight-feedback .mb-3 {
   overflow: auto;
 }
diff --git a/app/assets/stylesheets/blacklight.scss b/app/assets/stylesheets/blacklight.scss
@@ -1,12 +1,3 @@
-//bootstrap variables override
-$table-bg-accent: #f5f4f1;
-$font-size-base: 1rem;
-$brand-primary: #3072AB;
-$brand-success: #3B863B;
-$gray-light: #757575;
-
-@import 'bootstrap';
-
 @import 'blacklight/blacklight';
 @import 'blacklight/blacklight_base';
 @import 'blacklight_marc';
diff --git a/app/assets/stylesheets/bootstrap_override.scss b/app/assets/stylesheets/bootstrap_override.scss
@@ -0,0 +1,2 @@
+$link-decoration: none;
+$link-hover-decoration: underline;
diff --git a/app/assets/stylesheets/components/availability.scss b/app/assets/stylesheets/components/availability.scss
@@ -16,20 +16,24 @@
     margin-right: 0;
     white-space: normal;
 
-    &.badge-secondary {
+    &.bg-secondary {
       color: $gray-light;
+      --bs-bg-opacity: 0;
     }
 
-    &.badge-warning {
+    &.bg-warning {
       color: $dark-orange;
+      --bs-bg-opacity: 0;
     }
 
-    &.badge-danger {
-      color: $brand-danger;
+    &.bg-danger {
+      color: $danger;
+      --bs-bg-opacity: 0;
     }
 
-    &.badge-success {
-      color: $brand-success;
+    &.bg-success {
+      color: $success;
+      --bs-bg-opacity: 0;
     }
   }
 }
@@ -370,7 +374,7 @@
       float: left;
       padding: 6px 5px;
 
-      &.badge-warning {
+      &.bg-warning {
         color: $black;
       }
     }

diff --git a/app/assets/stylesheets/components/header--secondary.scss b/app/assets/stylesheets/components/header--secondary.scss
@@ -48,7 +48,7 @@
     background: transparent;
     padding: 1rem;
     margin: 0;
-    color: darken($blue, 3);
+    color: shade-color($blue, 3);
 
     &:hover,
     &:focus,

diff --git a/app/assets/stylesheets/components/record--subject.scss b/app/assets/stylesheets/components/record--subject.scss
@@ -4,17 +4,17 @@
 
 .field-hierarchy {
   text-decoration: underline;
-  color: darken($orange, 10%);
+  color: shade-color($orange, 10%);
 }
 
 .search-subject:hover,
 .search-title:hover,
 .search-name-title:hover {
-  color: darken($orange, 10%);
+  color: shade-color($orange, 10%);
 }
 
 .search-subject:active,
 .search-title:active,
 .search-name-title:active {
   text-decoration: none;
-}
+}
diff --git a/app/assets/stylesheets/components/search--advanced.scss b/app/assets/stylesheets/components/search--advanced.scss
@@ -16,12 +16,13 @@
 }
 
 .search-field {
-  &.form-group {
+  &.mb-3 {
     margin-bottom: 0;
   }
 
   select.form-control {
     margin-bottom: 1em;
+
     @media (min-width: $bp-medium) {
       width: auto;
       margin-bottom: 0;
@@ -37,7 +38,7 @@
   }
 }
 
-#guided_search .form-group {
+#guided_search .mb-3 {
   margin-left: 0;
 }
 
@@ -73,10 +74,10 @@
 }
 
 .clear-form {
-  color: darken($blue, 3);
+  color: shade-color($blue, 3);
 }
 
-.well > h4 {
+.well>h4 {
   margin: 0.25em 0 0.5em;
 }
 
@@ -99,7 +100,8 @@
   white-space: normal;
 }
 
-.row .range_limit input.range_begin, .row .range_limit input.range_end {
+.row .range_limit input.range_begin,
+.row .range_limit input.range_end {
   width: 5em;
 }
 
@@ -115,12 +117,13 @@
   }
 }
 
-.two-columns-md > * {
+.two-columns-md>* {
   margin: 5px 5px 1rem;
 }
 
 .dropdown .fa-caret-down {
   display: none;
+  width: inherit;
 }
 
 @media (min-width: $bp-small) {
@@ -132,11 +135,11 @@
   }
 }
 
-.dropdown-menu[role=listbox] {         
+.dropdown-menu[role=listbox] {
   max-height: 30vh;
   overflow-y: auto;
 }
 
 input.combobox-multiselect {
   height: 2.5rem;
-}
+}
diff --git a/app/assets/stylesheets/components/search-results.scss b/app/assets/stylesheets/components/search-results.scss
@@ -53,7 +53,7 @@
 }
 
 .document a:hover {
-  color: darken($orange, 10%);
+  color: shade-color($orange, 10%);
   text-decoration: underline;
 }
 
@@ -85,8 +85,8 @@ dd.blacklight-electronic_access_display {
 
 // remove when https://github.com/projectblacklight/blacklight/pull/2125 is released
 .documents-list .document .document-thumbnail {
-    margin-bottom: ($spacer * 3);
-    padding-left: ($spacer * 2);
+  margin-bottom: ($spacer * 3);
+  padding-left: ($spacer * 2);
 }
 
 #spell {
@@ -98,5 +98,5 @@ dd.blacklight-electronic_access_display {
 }
 
 em.highlight-query {
-    background-color: #FFFDD0;
-}
+  background-color: #FFFDD0;
+}
diff --git a/app/assets/stylesheets/components/search.scss b/app/assets/stylesheets/components/search.scss
@@ -2,12 +2,12 @@
 @import "variables/colors";
 @import "variables/typography";
 
-header .search-navbar .input-group .custom-select {
+header .search-navbar .input-group .form-select {
   width: auto;
 }
 
 @media (max-width: $bp-small) {
-  header .search-navbar .input-group .custom-select {
+  header .search-navbar .input-group .form-select {
     width: 100%;
     clear: both;
     display: block;
@@ -25,7 +25,7 @@ header .search-navbar .input-group .custom-select {
   }
 }
 
-header .search-navbar .input-group .input-group-append .search-btn {
+header .search-navbar .input-group .search-btn {
   width: 40px;
   display: flex;
   align-items: center;
@@ -150,7 +150,7 @@ header .search-navbar .input-group .input-group-append .search-btn {
   width: 100%;
 }
 
-.search-query-form .input-group-prepend {
+.search-query-form {
   width: 100%;
 
   @media (min-width: 575px) {
@@ -166,7 +166,7 @@ select::-ms-expand {
   display: none;
 }
 
-#search_field.custom-select {
+#search_field.form-select {
   @media (min-width: 575px) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

diff --git a/app/assets/stylesheets/components/skip-links.scss b/app/assets/stylesheets/components/skip-links.scss
@@ -2,7 +2,7 @@
     height: 2rem;
 }
 #skip-link a {
-    @include sr-only;
-    @include sr-only-focusable;
+    @include visually-hidden;
+    @include visually-hidden-focusable;
     margin: .2rem 0;
 }