🧹 Upgrade views from Bootstrap 3 to 4

This commit is a first swing of upgrading all the views from Bootstrap 3
to 4.  There's still a lot of work to be done to make the views look
good but this is a good first step.

app/views/_admin_util_links.html.erb

@@ -1,22 +1,24 @@
 <% if user_signed_in? %>
   <% if can? :manage, Account %>
-    <ul class="nav navbar-nav">
-      <li>
-        <%= link_to main_app.proprietor_accounts_path do %>
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <%= link_to main_app.proprietor_accounts_path, class: 'nav-link' do %>
           <span class="fa fa-gears"></span> <%= t("hyku.proprietor.accounts.nav") %>
         <% end %>
       </li>
-      <li>
-        <%= link_to main_app.proprietor_users_path do %>
+      <li class="nav-item">
+        <%= link_to main_app.proprietor_users_path, class: 'nav-link' do %>
           <span class="fa fa-users"></span> <%= t("hyku.proprietor.users.nav") %>
         <% end %>
       </li>
     </ul>
   <% end %>
 <% end %>
-<ul id="user_utility_links" class="nav navbar-nav navbar-right">
+<ul id="user_utility_links" class="navbar-nav ml-auto">
   <%= render 'shared/locale_picker' if available_translations.size > 1 %>
   <% if user_signed_in? %>
-    <li><%= link_to t("hyrax.toolbar.profile.logout"), main_app.destroy_user_session_path %></li>
+    <li class="nav-item">
+      <%= link_to t("hyrax.toolbar.profile.logout"), main_app.destroy_user_session_path, class: 'nav-link' %>
+    </li>
   <% end %>
 </ul>

app/views/_logo.html.erb

@@ -1,10 +1,10 @@
-  <% if logo_image %>
-    <a id="logo" href="<%= hyrax.root_path %>" data-no-turbolink="true">
-      <span class="glyphicon glyphicon-globe" role="img" aria-label="<%= application_name %>" aria-hidden="true"></span>
-      <%= image_tag logo_image, alt: block_for(name: 'logo_image_text') %>
-    </a>
-  <% else %>
-    <a id="logo" class="navbar-brand" href="<%= hyrax.root_path %>" data-no-turbolink="true">
-      <span class="institution_name"><%= application_name %></span>
-    </a>
-  <% end %>
+<% if logo_image %>
+  <a id="logo" href="<%= hyrax.root_path %>" data-no-turbolink="true">
+    <i class="fa fa-globe" role="img" aria-label="<%= application_name %>" aria-hidden="true"></i>
+    <%= image_tag logo_image, alt: block_for(name: 'logo_image_text') %>
+  </a>
+<% else %>
+  <a id="logo" class="navbar-brand" href="<%= hyrax.root_path %>" data-no-turbolink="true">
+    <span class="institution_name"><%= application_name %></span>
+  </a>
+<% end %>

app/views/_masthead.html.erb

@@ -1,22 +1,18 @@
-<nav id="masthead" class="navbar navbar-inverse navbar-static-top" role="navigation" aria-label="masthead">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-collapse" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <%= render '/logo' %>
-    </div>
+<%# OVERRIDE Hyrax v5.0.0rc1 to render either admin or user util links %>
 
-    <div class="collapse navbar-collapse" id="top-navbar-collapse">
+<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">
       <% if admin_host? %>
         <%= render '/admin_util_links' %>
       <% else %>
         <%= render '/user_util_links' %>
       <% end %>
     </div>
-  </div>
-</nav>
+  </nav>
+</header>

app/views/_user_util_links.html.erb

@@ -1,31 +1,29 @@
-<ul id="user_utility_links" class="nav navbar-nav navbar-right">
+<ul id="user_utility_links" class="navbar-nav ml-auto">
   <%= render 'shared/locale_picker' if available_translations.size > 1 %>
   <% if user_signed_in? %>
-    <li>
+    <li class="nav-item">
       <%= render_notifications(user: current_user) %>
     </li>
-    <li class="dropdown">
-      <%= link_to hyrax.dashboard_profile_path(current_user), role: 'button', data: { toggle: 'dropdown' }, aria: { haspopup: true, expanded: false, controls: 'user-util-links' } do %>
+    <li class="nav-item dropdown">
+      <%= link_to hyrax.dashboard_profile_path(current_user), class: 'nav-link dropdown-toggle', id: 'navbarDropdown', role: 'button', data: { toggle: 'dropdown' }, aria: { haspopup: true, expanded: false } do %>
         <span class="sr-only"><%= t("hyrax.toolbar.profile.sr_action") %></span>
-        <span class="hidden-xs">&nbsp;<%= current_user.name %></span>
+        <%= current_user.name %>
         <span class="sr-only"> <%= t("hyrax.toolbar.profile.sr_target") %></span>
-        <span class="fa fa-user" aria-hidden="true"></span>
-        <span class="caret"></span>
+        <i class="fa fa-user" aria-hidden="true"></i>
       <% end %>
-      <ul id="user-util-links" class="dropdown-menu dropdown-menu-right" role="menu">
-        <li><%= link_to t("hyrax.toolbar.dashboard.menu"), hyrax.dashboard_path %></li>
-
-        <li class="divider"></li>
-	<% if Devise.mappings[:user]&.registerable? %>
-          <li><%= link_to t("hyku.toolbar.profile.edit_registration"), main_app.edit_user_registration_path %></li>
+      <div id="user-util-links" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+        <a class="dropdown-item" href="<%= hyrax.dashboard_path %>"><%= t("hyrax.toolbar.dashboard.menu") %></a>
+        <div class="dropdown-divider"></div>
+        <% if Devise.mappings[:user]&.registerable? %>
+          <a class="dropdown-item" href="<%= main_app.edit_user_registration_path %>"><%= t("hyku.toolbar.profile.edit_registration") %></a>
         <% end %>
-        <li><%= link_to t("hyrax.toolbar.profile.logout"), main_app.destroy_user_session_path %></li>
-      </ul>
-    </li><!-- /.btn-group -->
+        <a class="dropdown-item" href="<%= main_app.destroy_user_session_path %>"><%= t("hyrax.toolbar.profile.logout") %></a>
+      </div>
+    </li>
   <% else %>
-    <li>
-      <%= link_to main_app.single_signon_index_path do %>
-        <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> <%= t("hyrax.toolbar.profile.login") %>
+    <li class="nav-item">
+      <%= link_to main_app.single_signon_index_path, class: 'nav-link' do %>
+        <i class="fa fa-sign-in" aria-hidden="true"></i> <%= t("hyrax.toolbar.profile.login") %>
       <% end %>
     </li>
   <% end %>

app/views/account_sign_up/new.html.erb

@@ -4,7 +4,7 @@
 
 <div class="row">
   <div class="col-md-8">
-    <%= form_for(@account, url: account_sign_up_path(@account), html: { class: 'form form-horizontal' }) do |f| %>
+    <%= form_for(@account, url: account_sign_up_path(@account), html: { class: 'form' }) do |f| %>
         <% if @account.errors.any? %>
           <div id="error_explanation" class="alert alert-danger">
             <%= pluralize(@account.errors.count, "error") %> prohibited this repository from being saved:
@@ -16,15 +16,15 @@
           </div>
         <% end %>
 
-        <div class="form-group">
-          <%= f.label :name, 'Short name', class: 'col-md-2 control-label' %>
+        <div class="form-group row">
+          <%= f.label :name, 'Short name', class: 'col-md-2 col-form-label' %>
           <div class="col-md-10">
             <%= f.text_field :name, class: 'form-control' %>
-            <span class="help-block">A single or hyphenated name used for technical aspects of the repository (e.g., "acme" or "acme-library").</span>
+            <small class="form-text text-muted">A single or hyphenated name used for technical aspects of the repository (e.g., "acme" or "acme-library").</small>
           </div>
         </div>
 
-        <%= f.submit class: 'btn btn-primary pull-right' %>
+        <%= f.submit class: 'btn btn-secondary float-right' %>
       <% end %>
   </div>
 </div>

app/views/admin/accounts/edit.html.erb

@@ -4,9 +4,9 @@
 
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default account-form">
+    <div class="card account-form">
       <%= simple_form_for([:admin, @account], url: admin_account_path, :html => { class: 'form' }) do |f| %>
-        <div class="panel-body">
+        <div class="card-body">
           <% if @account.errors.any? %>
             <div id="error_explanation">
               <h2><%= pluralize(@account.errors.count, "error") %> prohibited this account from being saved:</h2>
@@ -24,11 +24,11 @@
           </div>
 
           <% current_account.public_settings.each do |key, value| %>
-            <%= render 'shared/settings', f:f, key: key, value: value %>
+            <%= render 'shared/settings', f: f, key: key, value: value %>
           <% end %>
 
-          <div class="panel-footer">
-            <%= f.submit class: 'btn btn-primary pull-right' %>
+          <div class="card-footer">
+            <%= f.submit class: 'btn btn-secondary float-right' %>
           </div>
         </div>
       <% end %>

app/views/admin/groups/_form.html.erb

@@ -5,15 +5,15 @@
     target_path = admin_group_path(@group)
   end
 %>
-<div class="panel panel-default">
+<div class="card">
   <%= simple_form_for @group, url: target_path do |f| %>
-    <div class="panel-body">
+    <div class="card-body">
       <%= f.input :humanized_name, label: t('hyku.admin.groups.label.humanized_name'), required: true %>
       <%= f.input :description, as: :text, label: t('hyku.admin.groups.label.description'), hint: '' %>
     </div>
-    <div class="panel-footer text-right">
+    <div class="card-footer text-right">
       <%= link_to t('simple_form.cancel'), admin_groups_path, class: 'btn btn-link action-cancel' %>
-      <%= f.submit class: 'btn btn-primary action-save' %>
+      <%= f.submit class: 'btn btn-secondary action-save' %>
     </div>
   <% end %>
 </div>

app/views/admin/groups/_nav.html.erb

@@ -2,10 +2,10 @@
 <div class="panel-tab-wrapper">
   <ul class="nav nav-tabs">
     <% navigation_presenter.tabs.each do |tab| %>
-      <%= content_tag :li, role: 'presentation', class: tab.css_class do %>
-        <%= link_to tab.name, tab.path %>
-      <% end %>
+      <li class="nav-item" role="presentation">
+        <%= link_to tab.name, tab.path, class: "nav-link #{'active' if tab.css_class == 'active'}" %>
+      </li>
     <% end %>
   </ul>
-  <%= link_to t('hyku.admin.groups.nav.index'), admin_groups_path, class: 'pull-right nav-escape-link' %>
+  <%= link_to t('hyku.admin.groups.nav.index'), admin_groups_path, class: 'float-right nav-escape-link' %>
 </div>

app/views/admin/groups/_per_page.html.erb

@@ -5,7 +5,7 @@
   <% if params[:page].present? %>
     <%= f.input :page, as: :hidden, input_html: { name: :page, value: params[:page] } %>
   <% end %>
-  <%= f.input :per, collection: [10, 25, 100], include_blank: false, required: false, selected: params[:per], input_html: { class: 'js-per-page__select', name: :per } %>
+  <%= f.input :per, collection: [10, 25, 100], include_blank: false, required: false, selected: params[:per], input_html: { class: 'js-per-page__select custom-select', name: :per } %>
   <%= t('hyku.admin.groups.label.per_page') %>
-  <%= f.submit class: 'btn btn-default js-per-page__submit' %>
+  <%= f.submit class: 'btn btn-secondary js-per-page__submit' %>
 <% end %>

app/views/admin/groups/_search.html.erb

@@ -5,11 +5,11 @@
   <% if params[:page].present? %>
     <%= f.input :page, as: :hidden, input_html: { name: :page, value: params[:page] } %>
   <% end %>
-  <div class="form-group list-scope">
-    <%= f.input :q, required: false, input_html: { class: 'list-scope__query', name: :q, value: params[:q] }, wrapper_html: { class: 'list-scope__query-wrapper'} %>
+  <div class="form-group mb-2 list-scope">
+    <%= f.input :q, required: false, input_html: { class: 'form-control list-scope__query', name: :q, value: params[:q] }, wrapper_html: { class: 'list-scope__query-wrapper'} %>
     <% if params[:q].present? %>
-      <%= link_to content_tag(:span, '&times;'.html_safe, :'aria-hidden' => true),  @target, class: 'close list-scope__reset', :'aria-label' => t('hyku.admin.groups.action.search.clear') %>
+      <%= link_to content_tag(:span, '&times;'.html_safe, :'aria-hidden' => true),  @target, class: 'btn btn-sm btn-secondary close list-scope__reset', :'aria-label' => t('hyku.admin.groups.action.search.clear') %>
     <% end %>
   </div>
-  <%= f.submit class: 'btn btn-primary list-scope__submit' %>
+  <%= f.submit class: 'btn btn-primary mb-2 list-scope__submit' %>
 <% end %>

app/views/admin/groups/index.html.erb

@@ -1,6 +1,6 @@
 <% content_for :page_title, construct_page_title(t('hyku.admin.groups.title.index'), t('hyku.admin.title')) %>
 <% provide :page_header do %>
-  <%if can? :edit, Hyrax::Group %>
+  <% if can? :edit, Hyrax::Group %>
     <h1>
       <span class="fa fa-users"></span>
       <%= t('hyku.admin.groups.title.index') %>
@@ -13,25 +13,25 @@
   <% end %>
 <% end %>
 
-<div class="panel panel-default group-listing">
-  <div class="panel-heading">
+<div class="card group-listing">
+  <div class="card-header">
     <% group_count = Hyrax::Group.count %>
     <% if group_count == 1 %>
       <%= t('hyku.admin.groups.describe_singular_quantity_html') %>
     <% else %>
       <%= t('hyku.admin.groups.describe_quantity_html', number: group_count ) %>
     <% end %>
     <% if can? :create, Hyrax::Group %>
-      <%= link_to t('hyku.admin.groups.action.create'), new_admin_group_path, class: 'btn btn-primary pull-right new-group' %>
+      <%= link_to t('hyku.admin.groups.action.create'), new_admin_group_path, class: 'btn btn-primary float-right new-group' %>
     <% end %>
   </div>
-  <div class="panel-body">
+  <div class="card-body">
     <div class="container-fluid full-width-container">
       <div class="row">
-        <div class="col-sm-6">
+        <div class="col-md-6">
           <%= render 'per_page', target: admin_groups_path %>
         </div>
-        <div class="col-sm-6 text-right">
+        <div class="col-md-6 text-right">
           <%= render 'search', target: admin_groups_path %>
         </div>
       </div>
@@ -53,7 +53,7 @@
             <tr id=<%= "#{group.name}" %>>
               <td>
                 <b><%= group.humanized_name %></b>
-                <p class='help-block'>
+                <p class='form-text text-muted'>
                   <%= group.description_label %>
                 </p>
               </td>
@@ -71,7 +71,7 @@
               </td>
               <td>
                 <% if can? :edit, Hyrax::Group %>
-                  <%= link_to t('hyku.admin.groups.action.edit'), edit_admin_group_path(group), id: "edit-#{group.name}-group", class: 'btn btn-default' %>
+                  <%= link_to t('hyku.admin.groups.action.edit'), edit_admin_group_path(group), id: "edit-#{group.name}-group", class: 'btn btn-secondary' %>
                 <% end %>
               </td>
             </tr>
@@ -80,7 +80,7 @@
       </table>
     </div>
 
-    <nav class="pull-right">
+    <nav class="float-right">
       <%= paginate @groups %>
     </nav>
   </div>

app/views/admin/groups/new.html.erb

@@ -7,19 +7,19 @@
 <% end %>
 <div class="panel-tab-wrapper">
   <ul class="nav nav-tabs">
-    <li role="presentation" class="active">
-      <a href="javascript:void(0);"><%= t('hyku.admin.groups.nav.attributes') %></a>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" href="javascript:void(0);"><%= t('hyku.admin.groups.nav.attributes') %></a>
     </li>
-    <li role="presentation" class="disabled">
-      <a href="javascript:void(0);"><%= t('hyku.admin.groups.nav.members') %></a>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" href="javascript:void(0);"><%= t('hyku.admin.groups.nav.members') %></a>
     </li>
-    <li role="presentation" class="disabled">
-      <a href="javascript:void(0);"><%= t('hyku.admin.groups.nav.roles') %></a>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" href="javascript:void(0);"><%= t('hyku.admin.groups.nav.roles') %></a>
     </li>
-    <li role="presentation" class="disabled">
-      <a href="javascript:void(0);"><%= t('hyku.admin.groups.nav.delete') %></a>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link disabled" href="javascript:void(0);"><%= t('hyku.admin.groups.nav.delete') %></a>
     </li>
   </ul>
-  <%= link_to t('hyku.admin.groups.nav.index'), admin_groups_path, class: 'pull-right nav-escape-link' %>
+  <%= link_to t('hyku.admin.groups.nav.index'), admin_groups_path, class: 'float-right nav-escape-link' %>
 </div>
 <%= render 'form' %>

app/views/admin/groups/remove.html.erb

@@ -7,15 +7,15 @@
 <% end %>
 
 <%= render 'nav' %>
-<div class="panel panel-default">
-  <div class="panel-body">
-    <blockquote class="callout callout-danger callout-with-action">
+<div class="card">
+  <div class="card-body">
+    <blockquote class="callout callout-danger">
       <h3><%= t('hyku.admin.groups.title.delete', group: @group.humanized_name) %></h3>
       <p>
-      <%= t('hyku.admin.groups.action.remove.description') %>
+        <%= t('hyku.admin.groups.action.remove.description') %>
       </p>
       <div class="callout-action">
-        <%= link_to t('hyku.admin.groups.action.remove.submit'),  admin_group_path(@group), class: "btn btn-danger action-delete #{'disabled' if @group.default_group?}", method: :delete, data: { confirm: t('hyku.admin.groups.action.remove.confirmation') } %>
+        <%= link_to t('hyku.admin.groups.action.remove.submit'), admin_group_path(@group), class: "btn btn-danger action-delete #{'disabled' if @group.default_group?}", method: :delete, data: { confirm: t('hyku.admin.groups.action.remove.confirmation') } %>
       </div>
     </blockquote>
   </div>