Fix facet prev/next pagination nav display within and outside of modals. Fixes #3524 (#3548)

- render pagination & sort links near the top so scrolling isn't necessary to see/click them
- style the top & bottom nav consistently
- ensure these elements wrap appropriately in mobile/narrow viewports
- improve display of facet browse UI when viewed on a facet page (as opposed to modal)

Author: seanaery

app/assets/builds/blacklight.css

@@ -423,9 +423,6 @@ main {
   border-radius: 5px;
 }
 
-.modal-content .facet-pagination.top {
-  display: none; /* Doesn't display in a modal, but would display on a new page (e.g. without Javascript) */
-}
 .modal-content .page-sidebar {
   display: none;
 }
@@ -437,6 +434,12 @@ main {
   display: none;
 }
 
+.modal-footer:not(.modal .modal-footer) {
+  border-top: var(--bs-border-width) solid var(--bs-border-color);
+  padding-top: 1rem;
+  margin-top: 1rem;
+}
+
 .remove .bi {
   height: 1em;
   width: 1em;

app/assets/stylesheets/blacklight/_modal.scss

@@ -3,10 +3,6 @@
 }
 
 .modal-content {
-  .facet-pagination.top {
-    display: none; /* Doesn't display in a modal, but would display on a new page (e.g. without Javascript) */
-  }
-
   .page-sidebar {
     display: none;
   }
@@ -21,3 +17,12 @@
 .blacklight-modal-close {
   display: none;
 }
+
+// When modal content is rendered outside of a modal, Bootstrap css variables like
+// --bs-modal-footer-border-width are undefined (only in .modal scope). So we apply
+// light styling to the modal footer when it's not in a modal.
+.modal-footer:not(.modal .modal-footer) {
+  border-top: var(--bs-border-width) solid var(--bs-border-color);
+  padding-top: 1rem;
+  margin-top: 1rem;
+}

app/views/catalog/facet.html.erb

@@ -1,14 +1,15 @@
 <%= render Blacklight::System::ModalComponent.new do |component| %>
-  <% component.with_prefix do %>
-    <div class="facet-pagination top d-flex w-100 justify-content-between">
-      <%= render :partial=>'facet_pagination' %>
-    </div>
-  <% end %>
 
-  <% component.with_title { facet_field_label(@facet.key) } %>
-  <%= render Blacklight::Search::FacetSuggestInput.new(facet: @facet, presenter: @presenter) %>
+  <div class="card card-body bg-light p-3 mb-3 border-0">
+    <% component.with_title { facet_field_label(@facet.key) } %>
+    <%= render Blacklight::Search::FacetSuggestInput.new(facet: @facet, presenter: @presenter) %>
+    <%= render partial: 'facet_index_navigation' if @facet.index_range && @display_facet.index? %>
 
-  <%= render partial: 'facet_index_navigation' if @facet.index_range && @display_facet.index? %>
+  </div>
+
+  <div class="facet-pagination top d-flex flex-wrap w-100 justify-content-between border-bottom pb-3 mb-3">
+    <%= render :partial=>'facet_pagination' %>
+  </div>
 
   <div class="facet-extended-list">
     <%= render Blacklight::FacetComponent.new(display_facet: @display_facet,
@@ -17,7 +18,7 @@
   </div>
 
   <% component.with_footer do %>
-    <div class="facet-pagination bottom flex-row justify-content-between">
+    <div class="facet-pagination bottom d-flex flex-wrap w-100 justify-content-between">
       <%= render :partial=>'facet_pagination' %>
     </div>
   <% end %>