Merge pull request #2066 from samvera/bootstrap-5-views

Bootstrap 5 views

Gemfile

@@ -96,6 +96,7 @@ gem 'spring-watcher-listen', '~> 2.0.0', group: %i[development]
 gem 'terser' # to support the Safe Navigation / Optional Chaining operator (?.) and avoid uglifier precompile issue
 gem 'tether-rails'
 gem 'turbolinks', '~> 5'
+gem 'twitter-typeahead-rails', '0.11.1.pre.corejavascript'
 gem 'web-console', '>= 3.3.0', group: %i[development] # <%= console %> in views
 gem 'webdrivers', '~> 4.7.0', group: %i[test]
 gem 'webmock', group: %i[test]

Gemfile.lock

@@ -1295,6 +1295,10 @@ GEM
     turbolinks (5.2.1)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
+    twitter-typeahead-rails (0.11.1.pre.corejavascript)
+      actionpack (>= 3.1)
+      jquery-rails
+      railties (>= 3.1)
     typhoeus (1.4.1)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
@@ -1459,6 +1463,7 @@ DEPENDENCIES
   terser
   tether-rails
   turbolinks (~> 5)
+  twitter-typeahead-rails (= 0.11.1.pre.corejavascript)
   web-console (>= 3.3.0)
   webdrivers (~> 4.7.0)
   webmock

app/assets/javascripts/application.js

@@ -10,12 +10,10 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require codemirror
-//= require codemirror-autorefresh
-//= require codemirror/modes/css
 //= require jquery3
 //= require rails-ujs
 //= require popper
+//= require twitter/typeahead
 //= require bootstrap
 //= require jquery.fontselect
 //= require jquery.dataTables
@@ -47,6 +45,11 @@
 //= require bulkrax/application
 
 //= require hyrax
+
+//= require codemirror
+//= require codemirror-autorefresh
+//= require codemirror/modes/css
+
 //= require iiif_print
 
 //= require jquery.flot.pie

app/presenters/hyku/collapsable_section_presenter.rb

@@ -1,28 +1,29 @@
 # frozen_string_literal: true
 
 module Hyku
-  # Draws a collapsable list widget using the Bootstrap 3 / Collapse.js plugin
+  # Draws a collapsable list widget using the Bootstrap 4 / Collapse.js plugin
   class CollapsableSectionPresenter < Hyrax::CollapsableSectionPresenter
-    # Override Hyrax 3.5.0 to pass in html_options
+    # Override Hyrax v5.0.0rc2 to pass in the title attribute
     # rubocop:disable Metrics/ParameterLists
-    def initialize(view_context:, text:, id:, icon_class:, open:, html_options: {})
+    def initialize(view_context:, text:, id:, icon_class:, open:, title: nil)
       # rubocop:enable Metrics/ParameterLists
       super(view_context:, text:, id:, icon_class:, open:)
-      @html_options = html_options
+      @title = title
     end
 
-    attr_reader :html_options
+    attr_reader :title
 
     private
 
     def button_tag
-      tag.a({ role: 'button',
-              class: "#{button_class}collapse-toggle",
-              data: { toggle: 'collapse' },
-              href: "##{id}",
-              onclick: "toggleCollapse(this)",
-              'aria-expanded' => open,
-              'aria-controls' => id }.merge(html_options)) do
+      tag.a(role: 'button',
+            class: "#{button_class}collapse-toggle nav-link",
+            data: { toggle: 'collapse' },
+            href: "##{id}",
+            onclick: "toggleCollapse(this)",
+            'aria-expanded' => open,
+            'aria-controls' => id,
+            title:) do
         safe_join([tag.span('', class: icon_class, 'aria-hidden': true),
                    tag.span(text)], ' ')
       end

app/presenters/hyku/menu_presenter.rb

@@ -50,16 +50,16 @@ def show_task?
     end
 
     # Draw a collaspable menu section. The passed block should contain <li> items.
-    # Override Hyrax 3.5.0 to pass in html_options
+    # Override Hyrax v5.0.0rc2 to pass in title attribute
     # rubocop:disable Metrics/ParameterLists
-    def collapsable_section(text, id:, icon_class:, open:, **html_options, &block)
+    def collapsable_section(text, id:, icon_class:, title:, open:, &block)
       # rubocop:enable Metrics/ParameterLists
       CollapsableSectionPresenter.new(view_context:,
                                       text:,
                                       id:,
                                       icon_class:,
-                                      open:,
-                                      html_options:).render(&block)
+                                      title:,
+                                      open:).render(&block)
     end
   end
 end

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 %>