Bootstrap 5

sul-dlss · Aug 21, 2024 · 573e055 · 573e055
1 parent 20f3898
commit 573e055
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 98 deletions.
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
@@ -7,13 +7,15 @@
     }
   }
 
-  a:hover, a:focus {
+  a:hover,
+  a:focus {
     text-decoration: underline;
   }
 
   li {
     a {
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         border-bottom: 0;
       }
     }
@@ -37,10 +39,6 @@ textarea:focus {
   @include focus-outline;
 }
 
-#main-container {
-  padding-bottom: $form-group-margin-bottom;
-}
-
 .location-and-access {
   padding-right: 1ch;
 }

diff --git a/app/assets/stylesheets/library_hours.scss b/app/assets/stylesheets/library_hours.scss
@@ -1,17 +1,16 @@
 // Import all individual stylesheets here
-@import 'base';
-@import 'layout';
-
-@import 'top-navbar';
-@import 'sul-footer';
+@import "base";
+@import "layout";
 
+@import "top-navbar";
+@import "sul-footer";
 
 .date-range {
-  background-color: $well-bg;
+  background-color: $color-beige-10;
 
   @include media-breakpoint-up(sm) {
     .date-input {
-      padding-right: ($spacer * .75);
+      padding-right: ($spacer * 0.75);
     }
   }
 
@@ -22,13 +21,13 @@
   @include media-breakpoint-down(xs) {
     h4 {
       // same ps py-2 in BS4
-      padding: 0 ($spacer * .5);
+      padding: 0 ($spacer * 0.5);
     }
 
     .pager {
       justify-content: center;
     }
-   }
+  }
 }
 
 .closed {
@@ -47,7 +46,7 @@ th.location-name {
 td.hours,
 th.hours {
   width: 100px;
-  padding: .5rem;
+  padding: 0.5rem;
 }
 
 th.location-name,
@@ -56,7 +55,7 @@ th.hours {
 }
 
 td.exceptions {
-//  @extend .alert-info;
+  //  @extend .alert-info;
 }
 
 td.holiday,
@@ -68,13 +67,10 @@ th small {
   font-size: 70%;
 }
 
-.well a {
-  color: $well-link;
-}
-
 // Override editable library background images
-.editableform-loading, .editable-clear-x {  
-  background: none !important;  
+.editableform-loading,
+.editable-clear-x {
+  background: none !important;
 }
 
 .alert-link {

diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss
@@ -1,4 +1,3 @@
-
 // Extracted from:
 //   https://github.com/sul-dlss/sul_styles/blob/master/app/assets/stylesheets/sul-styles/su_web_colors.scss
 //   https://github.com/sul-dlss/sul_styles/blob/master/app/assets/stylesheets/sul-styles/su_primary_colors.scss
@@ -8,7 +7,6 @@ $color-gray: #3f3c30;
 // $color-black: #000;
 // $color-beige-40: #d5d0c0;
 $color-beige-30: #e3dfd5;
-$color-beige-20: #e9e6df;
 $color-beige-10: #f2f1eb;
 $color-beige-05: #fbfbf9;
-// $color-pantone-401: #b6b1a9;
+// $color-pantone-401: #b6b1a9;
diff --git a/app/assets/stylesheets/top-navbar.scss b/app/assets/stylesheets/top-navbar.scss
@@ -16,35 +16,33 @@
 #topnav-container {
   background-color: $brand-primary;
   height: $brandbar-height;
-  
+
   .row {
     width: 100%;
   }
 
-  @include media-breakpoint-down(xs) { 
+  @include media-breakpoint-down(sm) {
     height: $brandbar-collapsed-height;
   }
 
   .navbar-brand {
-    @extend .text-hide;
-
     height: $brandbar-height;
     margin-left: 0;
     padding: 0;
 
-    @include media-breakpoint-down(xs) { 
+    @include media-breakpoint-down(sm) {
       height: $brandbar-collapsed-height;
     }
 
     img {
       height: $brandbar-height;
 
-      @include media-breakpoint-down(xs) { 
+      @include media-breakpoint-down(sm) {
         height: $brandbar-collapsed-height;
       }
     }
 
-    @include media-breakpoint-down(xs) { 
+    @include media-breakpoint-down(sm) {
       margin-left: 15px;
     }
   }
@@ -54,7 +52,7 @@
     z-index: $zindex-dropdown;
 
     a {
-      color: lighten($gray-base, 86%);;
+      color: lighten($gray-base, 86%);
     }
   }
 

diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
@@ -3,7 +3,6 @@ $sul-footer-bg-color: $color-beige-10;
 $gray-base: #000;
 $gray-dark: lighten($gray-base, 20%);
 $link-color: $gray-dark;
-$dark-orange: #925b20;
 $nav-color: #fbfbf9;
 
 $brand-primary: $color-cardinal-red;
@@ -13,10 +12,12 @@ $pagination-active-border: #696969;
 // BS4 syntax for changing primary theme colors
 $theme-colors: (
   "primary": $color-cardinal-red,
+  "secondary": #6c757d,
+  "danger": $color-cardinal-red,
 );
 
 // 1rem = 16px in BS4. .94 approximates the previous font size which was specified as 15px
-$font-size-base: .94rem;
+$font-size-base: 0.94rem;
 $line-height-base: 1.5;
 
 $btn-default-color: $color-gray;
@@ -35,23 +36,20 @@ $font-size-h4: floor(($font-size-base * 1.2));
 $headings-font-weight: 100;
 
 $body-bg: $color-beige-05;
-$font-family-sans-serif: 'Source Sans Pro', 'Arial Unicode MS', Helvetica, sans-serif;
+$font-family-sans-serif: "Source Sans Pro", "Arial Unicode MS", Helvetica,
+  sans-serif;
 $txt-color: $gray-base;
 
 $gray-41-percent: #696969;
 $sul-focus-outline: #eaab00;
 
 $navbar-default-link-color: $color-cardinal-red;
 
-$well-bg: $color-beige-10;
-$well-border: $color-beige-20;
-$well-link: $dark-orange;
-
 $breadcrumb-active-color: inherit;
 $breadcrumb-bg: inherit;
 $breadcrumb-color: inherit;
 $breadcrumb-padding-horizontal: 0;
-$breadcrumb-separator: '»';
+$breadcrumb-separator: "»";
 
 //@at-root: $brand-primary;
 $navbar-inverse-border: $color-dark-red;
@@ -68,7 +66,6 @@ $top-nav-bar-height: 35px;
 $brandbar-collapsed-height: 50px;
 $brandbar-height: 100px;
 $brandbar-padding-vertical: (($brandbar-height - $line-height-base) * 0.5);
-$sul-shadow-color: rgba(0, 0, 0, .2);
+$sul-shadow-color: rgba(0, 0, 0, 0.2);
 
 $input-height-base: $input-height;
-
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,15 +1,10 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "controllers"
-import "popper.js"
-
-import jquery from 'jquery'
-window.$ = jquery
-
+import * as Popper from "@popperjs/core"
 import "bootstrap"
 import "@hotwired/turbo-rails"
 
 window.addEventListener("load", function() {
-  jquery('[data-toggle="tooltip"]').tooltip({
-    trigger: 'hover'
-  });
-});
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+});
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -33,7 +33,7 @@
       <div id="su-content"> <!-- #su-content start -->
         <div id="outer-container" class="container-fluid">
           <%= render 'shared/top_navbar' %>
-          <section id="main-container" role="main" class="container">
+          <section id="main-container" role="main" class="container pb-3">
             <%= breadcrumbs style: :bootstrap4 %>
             <%= render 'shared/global_alert' %>
             <%= render 'shared/flashes' %>

diff --git a/app/views/libraries/_location_hours.html.erb b/app/views/libraries/_location_hours.html.erb
@@ -23,7 +23,7 @@
             <span itemprop="validFrom" content="<%= l calendars.first.date %>" aria-hidden="true"></span>
             <span itemprop="validThrough" content="<%= l calendars.first.date %>" aria-hidden="true"></span>
             <% calendars.each do |d|  %>
-            <span data-toggle="tooltip" data-placement="left" title="<%= [d.summary, d.description].reject(&:blank?).compact.join(" / ") %>">
+            <span data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="<%= [d.summary, d.description].reject(&:blank?).compact.join(" / ") %>">
               <%= render 'calendars/time', calendar: d %>
             </span>
             <% end %>

diff --git a/app/views/libraries/_range.html.erb b/app/views/libraries/_range.html.erb
@@ -5,29 +5,28 @@
         <span class="fas fa-arrow-left" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
       <% end unless @range.begin.before?(24.months.ago)%>
-      <h4 class="font-weight-light mb-0"><%= l(@range.begin, format: :short) %> – <%= l(@range.end, format: :short) %></h4>
+      <h4 class="fw-light mb-0"><%= l(@range.begin, format: :short) %> – <%= l(@range.end, format: :short) %></h4>
       <%= link_to params.to_unsafe_h.merge(week: (@range.begin + 1.week + 1.day).strftime("%GW%V")) do %>
         <span class="fas fa-arrow-right" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
       <% end unless @range.end.after?(18.months.from_now) %>
     </div>
 
     <div class="col-lg-6 col-xs-12">
-      <form method="GET" class="form form-horizontal row justify-content-lg-end justify-content-sm-center">
-        
+      <form method="GET" class="form d-flex justify-content-lg-end justify-content-sm-center">
+
         <div class="date-input">
           <label for="jump-date" class="control-label sr-only">Jump to:</label>
           <div class="input-group">
             <input value="<%= Time.zone.today %>" name="date" type="date" class="form-control" id="jump-date" data-href="<%= url_for(params.to_unsafe_h.merge(week: "%GW%V")) %>"/>
-            <div class="input-group-append">
-              <input value="Go" type="submit" class="btn btn-primary"/>
-            </div>
+            <input value="Go" type="submit" class="btn btn-primary"/>
+
           </div>
         </div>
-      
+
         <div class="col-xs-12 d-flex" id="jump-term-group">
           <h3 class="sr-only">Jump to quarters &amp; holidays</h3>
-          <button id="jump-term" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+          <button id="jump-term" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             Quarters &amp; holidays <span class="caret"></span>
           </button>
           <ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -49,9 +48,9 @@
             <% end %>
           </ul>
         </div>
-      
+
       </form>
     </div>
-  
+
   </div>
 </div>
diff --git a/app/views/shared/_nav_link_list.html.erb b/app/views/shared/_nav_link_list.html.erb
@@ -9,5 +9,5 @@
   <% end %>
 <% end %>
 <li class=<%= local_assigns[:item_class] ? item_class : '' %>>
-  <%= link_to 'Feedback', feedback_path, data: { toggle: 'collapse', target: '#feedback-form' } %>
+  <%= link_to 'Feedback', feedback_path, data: { bs_toggle: 'collapse', bs_target: '#feedback-form' } %>
 </li>
diff --git a/app/views/shared/_top_navbar.html.erb b/app/views/shared/_top_navbar.html.erb
@@ -14,22 +14,20 @@
 
 <nav id="topnav-container" class="navbar navbar-expand-sm navbar-light">
   <div class="container">
-    <div class="row justify-content-between">
-      <%= link_to 'http://library.stanford.edu', class: 'navbar-brand' do %>
-      <%= image_tag 'logo.svg', alt: 'Stanford University Libraries' %>
-      <% end %>
-      <button class="btn-light navbar-toggler bg-light mr-1" type="button" data-toggle="collapse"
-        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
-        aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon mr-auto"></span>
-      </button>
+    <%= link_to 'http://library.stanford.edu', class: 'navbar-brand' do %>
+    <%= image_tag 'logo.svg', alt: 'Stanford University Libraries' %>
+    <% end %>
+    <button class="btn-light navbar-toggler bg-light me-1" type="button" data-bs-toggle="collapse"
+      data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+      aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon me-auto"></span>
+    </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <div class="d-block d-sm-none">
-          <ul class="navbar-nav mr-auto pl-3">
-            <%= render "shared/nav_link_list", item_class: "nav-item" %>
-          </ul>
-        </div>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="d-block d-sm-none">
+        <ul class="navbar-nav me-auto ps-3">
+          <%= render "shared/nav_link_list", item_class: "nav-item" %>
+        </ul>
       </div>
     </div>
   </div>

diff --git a/app/views/shared/feedback_forms/_form.html.erb b/app/views/shared/feedback_forms/_form.html.erb
@@ -47,7 +47,7 @@
       <div class="form-group row">
         <div class="col-md-9 offset-md-3">
           <button type="submit" class="btn btn-primary">Send</button>
-          <%= link_to 'Cancel', :back, class: 'cancel-link', data: {toggle: 'collapse', target: '#feedback-form'} %>
+          <%= link_to 'Cancel', :back, class: 'cancel-link', data: { bs_toggle: 'collapse', bs_target: '#feedback-form'} %>
         </div>
       </div>
     </div>

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -4,7 +4,6 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
-pin "popper.js", to: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/esm/popper.min.js"
-pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.js"
-pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
+pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/[email protected]/dist/umd/popper.min.js'
+pin 'bootstrap', to: 'https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.js'
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_08_01_194246) do
+ActiveRecord::Schema[7.1].define(version: 2023_08_01_194246) do
   create_table "active_storage_attachments", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
@@ -26,7 +26,7 @@
     t.string "filename", null: false
     t.string "content_type"
     t.text "metadata"
-    t.integer "byte_size", null: false
+    t.bigint "byte_size", null: false
     t.string "checksum"
     t.datetime "created_at", precision: nil, null: false
     t.string "service_name", null: false