WIP Bootstrap 5

.dassie/Gemfile

@@ -9,7 +9,8 @@ end
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 gem 'bootsnap', '>= 1.1.0', require: false
-gem 'bootstrap', '~> 4.0'
+gem 'bootstrap', '~> 5.3'
+gem 'browse-everything', github: 'samvera/browse-everything', branch: '2.x-stable-dlp'
 gem 'coffee-rails', '~> 4.2'
 gem 'dalli'
 gem 'devise'

.dassie/app/assets/javascripts/application.js

@@ -21,7 +21,8 @@
 //= require twitter/typeahead
 //= require bootstrap
 //= require jquery.dataTables
-//= require dataTables.bootstrap4
+//= require dataTables
+//= require dataTables.bootstrap5
 //= require blacklight/blacklight
 //= require blacklight_gallery
 

.dassie/app/assets/stylesheets/application.css

@@ -11,6 +11,6 @@
  * It is generally better to create a new file per style scope.
  *
  *= require_tree .
- *= require dataTables.bootstrap4
+ *= require dataTables.bootstrap5
  *= require_self
  */

.koppie/Gemfile

@@ -9,7 +9,8 @@ end
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 gem 'bootsnap', '>= 1.1.0', require: false
-gem 'bootstrap', '~> 4.0'
+gem 'bootstrap', '~> 5.3'
+gem 'browse-everything', github: 'samvera/browse-everything', branch: '2.x-stable-dlp'
 gem 'coffee-rails', '~> 4.2'
 gem 'dalli'
 gem 'devise'
@@ -39,6 +40,7 @@ gem 'turbolinks', '~> 5'
 gem 'twitter-typeahead-rails', '0.11.1.pre.corejavascript'
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 gem 'uglifier', '>= 1.3.0'
+gem 'valkyrie', github: 'samvera/valkyrie', branch: 'main'
 
 group :development do
   gem 'better_errors' # add command line in browser when errors

.koppie/app/assets/javascripts/application.js

@@ -21,7 +21,8 @@
 //= require twitter/typeahead
 //= require bootstrap
 //= require jquery.dataTables
-//= require dataTables.bootstrap4
+//= require dataTables
+//= require dataTables.bootstrap5
 //= require blacklight/blacklight
 //= require blacklight_gallery
 

.koppie/app/assets/stylesheets/application.css

@@ -11,7 +11,7 @@
  * It is generally better to create a new file per style scope.
  *
  *= require_tree .
- *= require dataTables.bootstrap4
+ *= require dataTables.bootstrap5
  *= require_self
  */
 

app/assets/stylesheets/hyrax/_badge.scss

@@ -1,7 +1,7 @@
 .badge-enabled {
-  @extend .badge-success;
+  @extend .bg-success;
 }
 
 .badge-disabled {
-  @extend .badge-secondary;
+  @extend .bg-secondary;
 }

app/assets/stylesheets/hyrax/_browse_everything_overrides.scss

@@ -1,4 +1,4 @@
-@import "browse_everything/browse_everything_bootstrap4";
+
 
 #browse-everything {
   top: 10%;

app/assets/stylesheets/hyrax/_featured.scss

@@ -27,7 +27,7 @@ ol#featured_works {
   }
 
   .main {
-    padding: $custom-select-padding-y-sm;
+    padding: $form-select-padding-y-sm;
   }
 
   .featured-label {

app/assets/stylesheets/hyrax/_form.scss

@@ -13,8 +13,8 @@ td.status {
 
   span {
     @extend .badge;
-    &.on { @extend .badge-success; }
-    &.off { @extend .badge-secondary; }
+    &.on { @extend .bg-success; }
+    &.off { @extend .bg-secondary; }
   }
 }
 

app/assets/stylesheets/hyrax/_home-page.scss

@@ -8,7 +8,7 @@
 }
 
 .image-masthead {
-  border-bottom: 1px solid $nav-divider-color;
+  border-bottom: 1px solid $gray-200;
   margin-bottom: $navbar-padding-y * 2.5;
   position: relative;
 

app/assets/stylesheets/hyrax/_nestable.scss

@@ -32,9 +32,9 @@ tr.dd-item {
 
 .dd-handle { display: block; height: 100%; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
     background: #fafafa;
-    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
-    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
-    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
+    background: -webkit-linear-gradient(to bottom, #fafafa 0%, #eee 100%);
+    background:    -moz-linear-gradient(to bottom, #fafafa 0%, #eee 100%);
+    background:         linear-gradient(to bottom, #fafafa 0%, #eee 100%);
     -webkit-border-radius: 3px;
             border-radius: 3px;
     box-sizing: border-box; -moz-box-sizing: border-box;
@@ -80,8 +80,8 @@ tr.dd-item {
 
 .dd3-content { display: block; margin: 5px 0; padding: 0 0 0 30px;
     background: #fafafa;
-    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
-    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
+    background: -webkit-linear-gradient(to bottom, #fafafa 0%, #eee 100%);
+    background:    -moz-linear-gradient(to bottom, #fafafa 0%, #eee 100%);
     background:         linear-gradient(to bottom, #fafafa 0%, #eee 100%);
     -webkit-border-radius: 3px;
             border-radius: 3px;
@@ -101,8 +101,8 @@ tr.dd-item {
     white-space: nowrap; overflow: hidden;
     border: 1px solid #aaa;
     background: #ddd;
-    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
-    background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
+    background: -webkit-linear-gradient(to bottom, #ddd 0%, #bbb 100%);
+    background: -moz-linear-gradient(to bottom, #ddd 0%, #bbb 100%);
     background: -o-linear-gradient(to bottom, #ddd 0%, #bbb 100%);
     background: linear-gradient(to bottom, #ddd 0%, #bbb 100%);
     border-top-right-radius: 0;

app/assets/stylesheets/hyrax/_work-show.scss

@@ -75,8 +75,8 @@ ul.tabular {
 
   // Button row which sits below the title, and above panel content for a page
   .button-row-top-two-column {
-    margin-bottom: $btn-block-spacing-y;
-    margin-top: $btn-block-spacing-y;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
 
     @media screen and (max-width: 767px) {
       > div {

app/assets/stylesheets/hyrax/dashboard.scss

@@ -64,12 +64,12 @@ body.dashboard {
 
     h1 {
       font-size: $h2-font-size;
-      margin-left: $table-cell-padding-sm;
+      margin-left: $table-cell-padding-x-sm;
       margin-top: $input-btn-padding-y;
 
       .fa {
         color: $gray;
-        margin-right: $table-cell-padding-sm;
+        margin-right: $table-cell-padding-x-sm;
       }
     }
 

app/assets/stylesheets/hyrax/sidebar.scss

@@ -1,5 +1,5 @@
-$drawer-small: 40px;
-$drawer-large: 260px;
+$drawer-small: 2.5rem;
+$drawer-large: 16.25rem;
 $gutter-width: $grid-gutter-width/2;
 
 .main-content {

app/views/_flash_msg.html.erb

@@ -1,7 +1,7 @@
 <% { notice: 'alert-success', error: 'alert-danger', alert: 'alert-warning' }.each do |type, flash_dom_class| %>
   <% if flash[type].present? %>
     <div class="alert <%= flash_dom_class %> alert-dismissable" role="alert">
-      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+      <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <%= sanitize Array.wrap(flash[type]).join(tag(:br)) %>
     </div>
     <% flash.delete(type) %>

app/views/_masthead.html.erb

@@ -1,12 +1,14 @@
 <header aria-label="header" class="top-header">
   <nav id="masthead" class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between <%= placement_class %>" role="navigation" aria-label="masthead">
-    <h1 class="sr-only"><%= application_name %></h1>
-    <%= render '/logo' %>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse justify-content-end" id="top-navbar-collapse">
-      <%= render '/user_util_links' %>
+    <div class="container-fluid">
+      <h1 class="sr-only"><%= application_name %></h1>
+      <%= render '/logo' %>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-collapse" aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse justify-content-end" id="top-navbar-collapse">
+        <%= render '/user_util_links' %>
+      </div>
     </div>
   </nav>
 </header>

app/views/_user_util_links.html.erb

@@ -5,7 +5,7 @@
       <%= render_notifications(user: current_user) %>
     </li>
     <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only"><%= t("hyrax.toolbar.profile.sr_action") %></span>
         <span><%= current_user.name %></span>
         <span class="sr-only"> <%= t("hyrax.toolbar.profile.sr_target") %></span>

app/views/catalog/_search_form.html.erb

@@ -15,7 +15,7 @@
           <%= t('hyrax.search.button.html') %>
         </button>
         <% if current_user %>
-          <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+          <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
 
             <span class="sr-only" data-search-element="label"><%= t("hyrax.search.form.option.all.label_long", application_name: application_name) %></span>
             <span aria-hidden="true"><%= t("hyrax.search.form.option.all.label_short") %></span>

app/views/hyrax/base/_citations.html.erb

@@ -3,7 +3,7 @@
       <%= link_to t(".citations"), hyrax.citations_work_path(presenter), id: 'citations', class: 'btn btn-secondary btn-sm mr-2' %>
     <% end %>
     <div class="btn-group">
-      <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <%= t('.header') %>
       </button>
       <ul class="dropdown-menu">

app/views/hyrax/base/_form_files.html.erb

@@ -34,8 +34,8 @@
           </div>
           <% if Hyrax.config.browse_everything? %>
             <%= button_tag(type: 'button', class: 'btn btn-success', id: "browse-btn",
-              'data-toggle' => 'browse-everything', 'data-route' => browse_everything_engine.root_path,
-              'data-target' => "#{f.object.persisted? ? "#edit_#{f.object.model.model_name.param_key}_#{f.object.model.id}" : "#new_#{f.object.model.model_name.param_key}"}" ) do %>
+              'data-bs-toggle' => 'browse-everything', 'data-bs-route' => browse_everything_engine.root_path,
+              'data-bs-target' => "#{f.object.persisted? ? "#edit_#{f.object.model.model_name.param_key}_#{f.object.model.id}" : "#new_#{f.object.model.model_name.param_key}"}" ) do %>
               <span class="fa fa-plus"></span>
               <%= t('hyrax.upload.browse_everything.browse_files_button') %>
             <% end %>

app/views/hyrax/base/_guts4form.html.erb

@@ -6,7 +6,7 @@
       <ul class="nav nav-tabs" role="tablist">
         <% (tabs - ['share']).each_with_index do | tab, i | %>
           <li role="presentation" class="nav-item">
-            <a class="nav-link <% if i == 0 %>active<% end %>" href="#<%= tab %>" aria-controls="<%= tab %>" role="tab" data-toggle="tab">
+            <a class="nav-link <% if i == 0 %>active<% end %>" href="#<%= tab %>" aria-controls="<%= tab %>" role="tab" data-bs-toggle="tab">
               <%= form_tab_label_for(form: f.object, tab: tab) %>
             </a>
           </li>

app/views/hyrax/base/_show_actions.html.erb

@@ -5,7 +5,7 @@
         <input type="checkbox" aria-label="Batch Documents" style="display:none" name="batch_document_ids[]" id="batch_document_<%= presenter.id %>" value="<%= presenter.id %>" class="batch_document_selector" checked="checked" />
         <%= button_tag t('hyrax.dashboard.my.action.add_to_collection'),
                       class: 'btn btn-secondary submits-batches submits-batches-add',
-                      data: { toggle: "modal", target: "#collection-list-container" } %>
+                      data: { 'bs-toggle': "modal", 'bs-target': "#collection-list-container" } %>
       <% end %>
       <% if presenter.work_featurable? %>
         <%= link_to t('.feature'), hyrax.featured_work_path(presenter, format: :json),
@@ -32,7 +32,7 @@
       <% end %>
       <% if presenter.valid_child_concerns.length > 0 %>
         <div class="btn-group">
-          <button type="button" class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button type="button" class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <%= t('.attach_child') %>
           </button>
           <div class="dropdown-menu">
@@ -42,7 +42,7 @@
           </div>
         </div>
       <% end %>
-      <%= link_to t('.delete'), [main_app, presenter], class: 'btn btn-danger', data: { confirm: t('.confirm_delete', work_type: presenter.human_readable_type) }, method: :delete %>
+      <%= link_to t('.delete'), [main_app, presenter], class: 'btn btn-danger', data: { 'bs-confirm': t('.confirm_delete', work_type: presenter.human_readable_type) }, method: :delete %>
     <% end %>
   </div>
 </div>

app/views/hyrax/base/_work_button_row.html.erb

@@ -7,7 +7,7 @@
       <% end %>
       <% if presenter.valid_child_concerns.length > 0 %>
         <div class="btn-group">
-          <button type="button" class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button type="button" class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-menu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <%= t('.attach_child') %>
           </button>
           <ul class="dropdown-menu">
@@ -19,15 +19,15 @@
           </ul>
         </div>
       <% end %>
-      <%= link_to t(".delete"), [main_app, presenter], class: 'btn btn-danger', data: { confirm: t(".delete_type", type: {presenter.human_readable_type}) }, method: :delete %>
+      <%= link_to t(".delete"), [main_app, presenter], class: 'btn btn-danger', data: { 'bs-confirm': t(".delete_type", type: {presenter.human_readable_type}) }, method: :delete %>
     <% end %>
   </div>
   <div class="col-sm-6 text-right">
     <% if presenter.show_deposit_for?(collections: @user_collections) %>
       <input type="checkbox"  style="display:none" name="batch_document_ids[]" id="batch_document_<%= presenter.id %>" value="<%= presenter.id %>" class="batch_document_selector" checked="checked" />
       <%= button_tag t('hyrax.dashboard.my.action.add_to_collection'),
                     class: 'btn btn-secondary submits-batches submits-batches-add',
-                    data: { toggle: "modal", target: "#collection-list-container" } %>
+                    data: { 'bs-toggle': "modal", 'bs-target': "#collection-list-container" } %>
     <% end %>
     <% if presenter.work_featurable? %>
       <%= link_to t(".feature"), hyrax.featured_work_path(presenter, format: :json),

app/views/hyrax/content_blocks/_form.html.erb

@@ -2,17 +2,17 @@
 <div class="card tabs">
   <ul class="nav nav-tabs" role="tablist">
     <li id="announcement-nav-item" class="nav-item">
-      <a href="#announcement_text" role="tab" data-toggle="tab" class="nav-link active nav-safety-confirm">
+      <a href="#announcement_text" role="tab" data-bs-toggle="tab" class="nav-link active nav-safety-confirm">
         <%= t(:'hyrax.content_blocks.tabs.announcement_text') %>
       </a>
     </li>
     <li id="marketing-nav-item" class="nav-item">
-      <a href="#marketing" role="tab" data-toggle="tab" class="nav-link nav-safety-confirm">
+      <a href="#marketing" role="tab" data-bs-toggle="tab" class="nav-link nav-safety-confirm">
         <%= t(:'hyrax.content_blocks.tabs.marketing_text') %>
       </a>
     </li>
     <li id="researcher-nav-item" class="nav-item">
-      <a href="#researcher" role="tab" data-toggle="tab" class="nav-link nav-safety-confirm">
+      <a href="#researcher" role="tab" data-bs-toggle="tab" class="nav-link nav-safety-confirm">
         <%= t(:'hyrax.content_blocks.tabs.featured_researcher') %>
       </a>
     </li>

app/views/hyrax/homepage/index.html.erb

@@ -6,7 +6,7 @@
     <% if @presenter.create_many_work_types? %>
       <%= link_to '#',
         class: "btn btn-primary btn-lg",
-        data: { behavior: 'select-work', toggle: 'modal', target: '#worktypes-to-create', 'create-type' => 'single' } do %>
+        data: { 'behavior': 'select-work', 'bs-toggle': 'modal', 'bs-target': '#worktypes-to-create', 'create-type' => 'single' } do %>
         <i class="fa fa-upload" aria-hidden="true"></i> <%= t('hyrax.share_button') %>
       <% end %>
     <% else # simple link to the first work type %>

app/views/hyrax/my/_admin_set_action_menu.html.erb

@@ -2,7 +2,7 @@
 <% ul_id = 'admin-set-action-dropdown-ul-' + id %>
 
 <div class="btn-group">
-  <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenu_<%= id %>" aria-haspopup="true" aria-expanded="false" aria-controls="<%= ul_id %>">
+  <button class="btn btn-default btn-sm dropdown-toggle" data-bs-toggle="dropdown" type="button" id="dropdownMenu_<%= id %>" aria-haspopup="true" aria-expanded="false" aria-controls="<%= ul_id %>">
     <span class="sr-only"><%= t("hyrax.dashboard.my.sr.press_to") %> </span>
     <%= t("hyrax.dashboard.my.action.select") %>
   </button>

app/views/hyrax/my/_collection_action_menu.html.erb

@@ -2,7 +2,7 @@
 <% ul_id = 'collection-action-dropdown-ul-' + id %>
 
 <div class="btn-group">
-  <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenu_<%= id %>" aria-haspopup="true" aria-expanded="false" aria-controls="<%= ul_id %>">
+  <button class="btn btn-default btn-sm dropdown-toggle" data-bs-toggle="dropdown" type="button" id="dropdownMenu_<%= id %>" aria-haspopup="true" aria-expanded="false" aria-controls="<%= ul_id %>">
     <span class="sr-only"><%= t("hyrax.dashboard.my.sr.press_to") %> </span>
     <%= t("hyrax.dashboard.my.action.select") %>
   </button>

app/views/hyrax/my/_facet_selected.html.erb

@@ -4,7 +4,7 @@
     <% v.each do |selected_facet| %>
       <% link_options = remove_facet_params(k, selected_facet, params).merge(action: :index) %>
       <div class="alert alert-warning">
-        <%= link_to "X", hyrax.url_for(link_options), { class: "close", data: { dismiss: "alert" } } %>
+        <%= link_to "X", hyrax.url_for(link_options), { class: "close", data: { 'bs-dismiss': "alert" } } %>
         <i class="fa fa-check"></i> <strong><%= selected_facet %></strong>
       </div>
     <% end %>

app/views/hyrax/my/_work_action_menu.html.erb

@@ -2,7 +2,7 @@
 
 <div class="btn-group">
 
-  <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenu_<%= document.id %>" aria-haspopup="true" aria-expanded="false" aria-controls="<%= ul_id %>">
+  <button class="btn btn-default btn-sm dropdown-toggle" data-bs-toggle="dropdown" type="button" id="dropdownMenu_<%= document.id %>" aria-haspopup="true" aria-expanded="false" aria-controls="<%= ul_id %>">
     <span class="sr-only"><%= t("hyrax.dashboard.my.sr.press_to") %> </span>
     <%= t("hyrax.dashboard.my.action.select") %>
   </button>
@@ -22,7 +22,7 @@
                     method: :delete,
                     id: 'action-delete-work',
                     data: {
-                      confirm: t("hyrax.dashboard.my.action.work_confirmation", application_name: application_name) } do %>
+                      'bs-confirm': t("hyrax.dashboard.my.action.work_confirmation", application_name: application_name) } do %>
           <%= t("hyrax.dashboard.my.action.delete_work") %>
         <% end %>
       </li>