Merge pull request #437 from trln/BL-8-css

Blacklight 8 / Bootstrap 5 updates

app/assets/javascripts/trln_argon/bookmark_share.js

@@ -12,7 +12,7 @@ $(document).on('click', '#share_bookmarksLink', function( e ){
 
 
   // create modal
-  $('#content').append('<div class="modal fade" id="bookmark-modal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">' + shareBookmarksText + '</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><p class="form-text">' + shareBookmarksHelperText + '</p><div class="input-group"><input id="sharing-url-holder" type="text" class="form-control" data-autoselect="" value="' + bookmarkShareURL + '" aria-label="' + shareBookmarksText + '" readonly=""><span class="input-group-btn"><button id="copy-to-clipboard" class="btn btn-outline-secondary" type="button" data-toggle="tooltip" data-placement="bottom" title="Copy to clipboard"><i class="fa fa-clipboard" aria-hidden="true"></i></button></span></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button></div></div></div></div>');
+  $('#content').append('<div class="modal fade" id="bookmark-modal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">' + shareBookmarksText + '</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><p class="form-text">' + shareBookmarksHelperText + '</p><div class="input-group"><input id="sharing-url-holder" type="text" class="form-control" data-autoselect="" value="' + bookmarkShareURL + '" aria-label="' + shareBookmarksText + '" readonly=""><span class="input-group-btn"><button id="copy-to-clipboard" class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copy to clipboard"><i class="fa fa-clipboard" aria-hidden="true"></i></button></span></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button></div></div></div></div>');
 
   // open modal
   $('#bookmark-modal').modal('show');

app/assets/javascripts/trln_argon/location_facet.js

@@ -27,7 +27,7 @@ Blacklight.onLoad(function() {
           facetLocationWrapper.find('ul.facet-hierarchy > .twiddle-open > ul > li').slice( parseInt(locationFacetLimit) ).hide();
 
           // add 'more' and 'less' button at end
-          facetLocationWrapper.find('ul.facet-hierarchy > .twiddle-open > ul').append( "<li role='treeitem' class='location-more-toggle-wrapper'><a class='more_locations_link'>more <span class='sr-only'>Locations</span> »</a><a class='less_locations_link' style='display: none;'>less <span class='sr-only'>Locations</span> »</a></li>" );
+          facetLocationWrapper.find('ul.facet-hierarchy > .twiddle-open > ul').append( "<li role='treeitem' class='location-more-toggle-wrapper'><a class='more_locations_link'>more <span class='visually-hidden'>Locations</span> »</a><a class='less_locations_link' style='display: none;'>less <span class='visually-hidden'>Locations</span> »</a></li>" );
 
           // click 'more' to show all
           facetLocationWrapper.find('.more_locations_link').click(function() {

app/assets/stylesheets/trln_argon/blacklight_advanced_search.scss

@@ -44,7 +44,7 @@ h2.query-criteria-heading label {
     width: 100%;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     .submit-buttons {
       margin-top: 15px;
       text-align: left;

app/assets/stylesheets/trln_argon/trln_argon_shared.scss

@@ -1712,6 +1712,8 @@ h2.local-filter-heading  {
 
 .twitter-typeahead {
   z-index: auto;
+  flex-grow: 1;
+
   .tt-menu {
     max-height: 300px;
     overflow-y: auto;

app/components/trln_argon/advanced_search_facet_field_component.html.erb

@@ -1,9 +1,9 @@
-<div class="form-group row advanced-search-facet">
-  <label class="col-12 col-md-3 col-form-label font-weight-bold" id="<%= facet_field.key %>" for="<%= facet_field.key %>">
+<div class="mb-3 row advanced-search-facet">
+  <label class="col-12 col-md-3 col-form-label fw-bold" id="<%= facet_field.key %>" for="<%= facet_field.key %>">
     <%= facet_field.label %>
   </label>
   <div class="col-12 col-md-9">
-    <select multiple="multiple" name="<%= field_param %>" id="<%= facet_field.key %>" class="form-control custom-select advanced-search-facet-select">
+    <select multiple="multiple" name="<%= field_param %>" id="<%= facet_field.key %>" class="form-control form-select advanced-search-facet-select">
     <% facet_field.display_facet.items.each do |item| %>
      <option value="<%= item.value %>"<%= selected?(item) %>><%= display_value(item) %></option>
      <% end %>

app/components/trln_argon/advanced_search_form_component.html.erb

@@ -45,7 +45,7 @@
   <hr>
 
   <% if sort_fields_select %>
-    <div class="form-group row mb-4">
+    <div class="row mb-4">
       <div class="col-md-6 col-sm-6 col-xs-6 sorting" style="display: inline-flex">
         <%= content_tag :label, t('blacklight.advanced_search.form.sort_label'), for: 'sort', class: 'col-form-label' %>
         <%= sort_fields_select %>

app/components/trln_argon/advanced_search_form_component.rb

@@ -11,7 +11,7 @@ def initialize_search_field_controls
       search_fields.values.each.with_index do |field, i|
         with_search_field_control do
           fields_for('clause[]', i, include_id: false) do |f|
-            content_tag(:div, class: 'form-group advanced-search-field row mb-3') do
+            content_tag(:div, class: 'advanced-search-field row mb-4') do
               f.label(:query, field.display_label('search'), class: 'col-12 col-md-3 col-form-label') +
                 content_tag(:div, class: 'col-12 col-md-9') do
                   f.hidden_field(:field, value: field.key) +

app/components/trln_argon/advanced_search_range_limit_component.html.erb

@@ -1,13 +1,13 @@
 <!-- Fetch and display publication year range input if configured. -->
-<div class="form-group row advanced-search-facet">
+<div class="mb-3 row advanced-search-facet">
   <%= label_tag @facet_field.label.parameterize,
-    class: "col-12 col-sm-6 col-md-3 col-form-label font-weight-bold" do %>
+    class: "col-12 col-sm-6 col-md-3 col-form-label fw-bold" do %>
     <%= @facet_field.label %>
   <% end %>
   <div class="col-12 col-sm-6 col-md-9 range_limit">
-    <label for="range_publication_year_isort_begin" class="sr-only">Publication date range (starting year)</label>
+    <label for="range_publication_year_isort_begin" class="visually-hidden">Publication date range (starting year)</label>
     <%= render_range_input(@facet_field.key, :begin) %> – 
-    <label for="range_publication_year_isort_end" class="sr-only">Publication date range (ending year)</label>
+    <label for="range_publication_year_isort_end" class="visually-hidden">Publication date range (ending year)</label>
     <%= render_range_input(@facet_field.key, :end) %>
   </div>
 </div>

app/components/trln_argon/advanced_search_range_limit_component.rb

@@ -15,7 +15,7 @@ def render_range_input(solr_field, type, input_label = nil, maxlength = 4)
         default = params['range'][solr_field][type]
       end
 
-      html = label_tag("range[#{solr_field}][#{type}]", input_label, class: 'sr-only') if input_label.present?
+      html = label_tag("range[#{solr_field}][#{type}]", input_label, class: 'visually-hidden') if input_label.present?
       html ||= ''.html_safe
       html + text_field_tag("range[#{solr_field}][#{type}]",
                             default,

app/components/trln_argon/constraint_layout_component.html.erb

@@ -10,7 +10,7 @@
   <% if @remove_path.present? %>
     <%= link_to(@remove_path, class: 'btn btn-outline-secondary remove') do %>
       <span class="remove-icon" aria-hidden="true">✖</span>
-      <span class="sr-only visually-hidden">
+      <span class="visually-hidden">
         <%= if @label.blank?
             t('blacklight.search.filters.remove.value', value: @value)
           else

app/components/trln_argon/constraints_component.html.erb

@@ -1,8 +1,8 @@
 <% if @render_headers %>
-  <h2 class="sr-only visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
+  <h2 class="visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
 <% end %>
 <% if @render_headers %>
-  <span class="constraints-label sr-only visually-hidden"><%= t('blacklight.search.filters.title') %></span>
+  <span class="constraints-label visually-hidden"><%= t('blacklight.search.filters.title') %></span>
 <% end %>
 <% if query_constraints_area.present? %>
   <% query_constraints_area.each do |constraint| %>

app/components/trln_argon/metadata_header_field_layout_component.rb

@@ -1,6 +1,6 @@
 module TrlnArgon
   class MetadataHeaderFieldLayoutComponent < Blacklight::MetadataFieldLayoutComponent
-    def initialize(field:, label_class: 'sr-only', value_class: '')
+    def initialize(field:, label_class: 'visually-hidden', value_class: '')
       super
       @field = field
       @key = @field.key.parameterize

app/components/trln_argon/metadata_list_field_layout_component.rb

@@ -1,6 +1,6 @@
 module TrlnArgon
   class MetadataListFieldLayoutComponent < Blacklight::MetadataFieldLayoutComponent
-    def initialize(field:, label_class: 'sr-only', value_class: '')
+    def initialize(field:, label_class: 'visually-hidden', value_class: '')
       super
       @field = field
       @key = @field.key.parameterize

app/components/trln_argon/search_bar_component.html.erb

@@ -1,25 +1,25 @@
 <%= form_tag @url, method: @method, class: @classes.join(' '), role: 'search', 'aria-label' => scoped_t('submit') do %>
   <%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
   <% if search_fields.length > 1 %>
-    <label for="search_field" class="sr-only visually-hidden"><%= scoped_t('search_field.label') %></label>
+    <label for="search_field" class="visually-hidden"><%= scoped_t('search_field.label') %></label>
   <% end %>
-  <div class="form-group mast-search">
+  <div class="mb-3 mast-search">
     <div class="input-group">
       <%= prepend %>
       <% if search_fields.length > 1 %>
           <%= select_tag(:search_field,
                        options_for_select(search_fields, h(@search_field)),
                        #title: scoped_t('search_field.title'),
                        id: "#{@prefix}search_field",
-                       class: "custom-select form-select search-field") %>
+                       class: "form-select search-field") %>
       <% elsif search_fields.length == 1 %>
         <%= hidden_field_tag :search_field, search_fields.first.last %>
       <% end %>
 
-      <label for="<%= @prefix %><%= @query_param %>" class="sr-only visually-hidden"><%= scoped_t('search.label') %></label>
+      <label for="<%= @prefix %><%= @query_param %>" class="visually-hidden"><%= scoped_t('search.label') %></label>
       <%= text_field_tag @query_param, @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", id: "#{@prefix}q", autocomplete: autocomplete_path.present? ? "off" : "", autofocus: @autofocus, data: { autocomplete_enabled: autocomplete_path.present?, autocomplete_path: autocomplete_path }  %>
 
-      <span class="input-group-append">
+      <span>
         <%= append %>
         <%= search_button || render(Blacklight::SearchButtonComponent.new(id: "#{@prefix}search", text: scoped_t('submit'))) %>
       </span>

app/views/catalog/_citation.html.erb

@@ -1,6 +1,6 @@
 <div class="modal-header">
   <p><i>These citations are automatically generated and may not always be correct. Double-check your citations to make sure they match an official citation manual or guide.</i></p>
-  <button type="button" class="ajax-modal-close close" data-dismiss="modal" aria-hidden="true">×</button>
+  <button type="button" class="ajax-modal-close btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
 </div>
 
 <%= render TrlnArgon::Document::CitationComponent.with_collection(@documents) if @documents.present? %>

app/views/catalog/_constraints.html.erb

@@ -1,12 +1,12 @@
 <% if query_has_constraints? %>
   <div id="appliedParams" class="clearfix constraints-container" role="navigation" aria-label="Search Constraints">
-    <div class="float-left">
+    <div class="float-start">
       <%= solr_query_request %>
     </div>
-    <div class="float-left">
+    <div class="float-start">
       <%= render(TrlnArgon::StartOverButtonComponent.new(classes: 'catalog_startOverLink btn btn-primary btn-sm')) %>
     </div>
-    <div class="float-left">
+    <div class="float-start">
       <%= link_to 'Edit Search', advanced_search_url(params.permit!.except(:controller, :action).to_h), :class => "catalog_editSearchLink btn btn-outline-secondary btn-sm", :id=>"editSearchLink" %>
     </div>
     <span class="constraints-label"><%= t('blacklight.search.filters.title') %></span>

app/views/catalog/_home_text.html.erb

@@ -1,5 +1,5 @@
-<div class="jumbotron text-center">
-  <h1 class="jumbotron-heading"><%= t('blacklight.home.welcome') %></h1>
+<div class="p-5 mb-4 bg-light rounded-3 text-center">
+  <h1 class="display-6 fw-bold"><%= t('blacklight.home.welcome') %></h1>
 
   <p class="lead"><%= t('blacklight.home.blurb') %></p>
 </div>

app/views/catalog/_index_items_latest_received.html.erb

@@ -2,7 +2,7 @@
 <% unless lr_text.blank? %>
 <div class="<%= latest_received_wrapper_class %>">
       <dl>
-        <dt><span class='latest-received-badge badge badge-info'><%= t('trln_argon.show.badge.latest_received') %></span></dt>
+        <dt><span class='latest-received-badge badge'><%= t('trln_argon.show.badge.latest_received') %></span></dt>
         <dd>
         	<span class='latest-received'>
         	<% if lr_url.blank? %>
@@ -11,7 +11,7 @@
             	<a href="<%= lr_url %>"
             		onclick="viewin = window.open('<%= lr_url %>', 'latestreceived', 'scrollbars,menubar=1, location-1, resizable,width=750,height=600'); viewin.focus();"
     				class='latest-received-link new-window-link'
-    				target='latestreceived' onclick><%= t('trln_argon.latest_received.link_text') %> 
+    				target='latestreceived' onclick><%= t('trln_argon.latest_received.link_text') %>
     				<i class='fa fa-external-link' aria-hidden='true'></i>
     				<span><%= t('trln_argon.show.a11y_text.latest_received') %>
  				</a>

app/views/catalog/_items_section.html.erb

@@ -38,7 +38,7 @@
 
                 <% item_data['items'].first(num_display_items).each do |item| %>
 
-                  <div class="row no-gutters item <%= loc_n %> <%= loc_b %>" data-item-barcode="<%= get_item_id(item) %>">
+                  <div class="row g-0 item <%= loc_n %> <%= loc_b %>" data-item-barcode="<%= get_item_id(item) %>">
 
                     <%= render partial: "items_section_item", locals: { document: document, item: item, loc_b: loc_b, loc_n: loc_n } %>
 
@@ -56,7 +56,7 @@
 
                     <% next if i < num_display_items %>
 
-                    <div class="row no-gutters item <%= loc_n %> <%= loc_b %>" data-item-barcode="<%= get_item_id(item) %>">
+                    <div class="row g-0 item <%= loc_n %> <%= loc_b %>" data-item-barcode="<%= get_item_id(item) %>">
 
                       <%= render partial: "items_section_item", locals: { document: document, item: item, loc_b: loc_b, loc_n: loc_n } %>
 
@@ -69,11 +69,11 @@
                 <div class="col-lg-12">
                   <div class="items-toggle">
 
-                    <a href="javascript:void(0);" class="expander btn btn-sm btn-info shower" data-toggle='collapse' data-target='<%= "#item-container-#{document.id}-#{loc_n}-#{document_index}" %>' aria-expanded='false' aria-controls='<%= "item-container-#{document.id}-#{loc_n}-#{document_index}" %>'>
+                    <a href="javascript:void(0);" class="expander btn btn-sm btn-info shower" data-bs-toggle='collapse' data-bs-target='<%= "#item-container-#{document.id}-#{loc_n}-#{document_index}" %>' aria-expanded='false' aria-controls='<%= "item-container-#{document.id}-#{loc_n}-#{document_index}" %>'>
                       <%= t('trln_argon.show.controls.show') %> <%= t('trln_argon.show.controls.all') %> <%= item_data['items'].length %> <%= t('trln_argon.show.controls.items') %> <i class="fa fa-plus-circle" aria-hidden="true"></i>
                     </a>
 
-                    <a href="#<%= document.id %>-<%= loc_n %>-<%= document_index %>-preview" class="expander btn btn-sm btn-info hider" data-toggle='collapse' data-target='<%= "#item-container-#{document.id}-#{loc_n}-#{document_index}" %>' aria-expanded='false' aria-controls='<%= "item-container-#{document.id}-#{loc_n}-#{document_index}" %>'>
+                    <a href="#<%= document.id %>-<%= loc_n %>-<%= document_index %>-preview" class="expander btn btn-sm btn-info hider" data-bs-toggle='collapse' data-bs-target='<%= "#item-container-#{document.id}-#{loc_n}-#{document_index}" %>' aria-expanded='false' aria-controls='<%= "item-container-#{document.id}-#{loc_n}-#{document_index}" %>'>
                       <%= t('trln_argon.show.controls.hide') %> <%= t('trln_argon.show.controls.items') %> <i class="fa fa-minus-circle" aria-hidden="true"></i>
                     </a>
 

app/views/catalog/_items_section_item.html.erb

@@ -2,14 +2,14 @@
 
   <div class="<%= call_number_wrapper_class(action: action_name) %>">
     <dl>
-    <dt><span class='call-number-badge badge badge-info'><%= t('trln_argon.show.badge.call_number') %></span></dt>
+    <dt><span class='call-number-badge badge'><%= t('trln_argon.show.badge.call_number') %></span></dt>
     <dd><span class='call-number'><%= call_number_display(item) %></span> <%= render partial: 'location_link', locals: { document: document, loc_b: loc_b, loc_n: loc_n, item: item } %></dd>
     </dl>
   </div>
 
   <div class="<%= status_wrapper_class(action: action_name) %> status-wrapper" <%= assign_item_id_as_id(item) %>>
     <dl>
-      <dt><span class='status-badge badge badge-info'><%= t('trln_argon.show.badge.status') %></span></dt>
+      <dt><span class='status-badge badge'><%= t('trln_argon.show.badge.status') %></span></dt>
       <dd>
        <% available_class = item_availability_display(item) %>
        <% due_date = item_due_date(item) %>
@@ -27,7 +27,7 @@
 
   <div class="<%= item_note_wrapper_class({ action: action_name, item_length: item_notes_display(item).length }) %> item-note-wrapper">
     <dl>
-      <dt><span class='item-note-badge badge badge-info'><%= t('trln_argon.show.badge.item_note') %></span></dt>
+      <dt><span class='item-note-badge badge'><%= t('trln_argon.show.badge.item_note') %></span></dt>
       <dd><%= item_notes_display(item) %></dd>
     </dl>
   </div>

app/views/catalog/_items_section_summary.html.erb

@@ -16,7 +16,7 @@
 
           <div class="<%= call_number_wrapper_class %>">
             <dl>
-              <dt><span class='call-number-badge badge badge-info'><%= t('trln_argon.show.badge.call_number') %></span></dt>
+              <dt><span class='call-number-badge badge'><%= t('trln_argon.show.badge.call_number') %></span></dt>
               <dd><span class='call-number'><%= h['call_no'] %></span></dd>
             </dl>
           </div>
@@ -28,8 +28,8 @@
         <% if h.fetch('summary', '').present? %>
 
           <div class="<%= holdings_summary_wrapper_class %>">
-            <dl class="row no-gutters" id="item-summary-<%= loc_b %>-<%= loc_n %>-<%= document.id %>">
-              <dt><span class='summary-badge badge badge-info'><%= t('trln_argon.show.badge.summary') %></span></dt>
+            <dl class="row g-0" id="item-summary-<%= loc_b %>-<%= loc_n %>-<%= document.id %>">
+              <dt><span class='summary-badge badge'><%= t('trln_argon.show.badge.summary') %></span></dt>
               <dd>
 
                 <div class="summary-text-wrapper">
@@ -55,7 +55,7 @@
           <div class="<%= holdings_note_class %>">
 
             <dl>
-              <dt><span class='holding-note-badge badge badge-info'><%= t('trln_argon.show.badge.holding_note') %></span></dt>
+              <dt><span class='holding-note-badge badge'><%= t('trln_argon.show.badge.holding_note') %></span></dt>
               <dd><%= [*h['notes']].join("; "); %></dd>
             </dl>
 

app/views/catalog/_local_filter.html.erb

@@ -12,7 +12,7 @@
                   title: "#{t("trln_argon.local_filter.search_verb")} #{t("trln_argon.local_filter.searching_local", local_institution_name: institution_long_name)}",
                   onclick: "window.location='#{search_catalog_path(query_state)}'"
                 ) do %>
-    <span class="sr-only">icon</span><span class="icon-wrapper"></span>
+    <span class="visually-hidden">icon</span><span class="icon-wrapper"></span>
   <% end %>
 
   <%= label_tag( local_button_id,
@@ -31,7 +31,7 @@
                   title: "#{t("trln_argon.local_filter.search_verb")} #{t("trln_argon.local_filter.searching_trln")}",
                   onclick: "window.location='#{search_trln_path(query_state)}'"
                 ) do %>
-    <span class="sr-only">icon</span><span class="icon-wrapper"></span>
+    <span class="visually-hidden">icon</span><span class="icon-wrapper"></span>
   <% end %>
 
   <%= label_tag( trln_button_id,