blacklight-spotlight 4.4.0 → 4.6.0

data/app/assets/stylesheets/spotlight/_blacklight_configuration.scss

@@ -11,13 +11,11 @@
       @include edit-in-place-highlighting;
     }
 
-    // the effect of position: relative on table elements is undefined, so put a div in there.
-    // this fix is for Firefox
     .handle-wrap {
-      position: relative;
       padding: 0.75rem 0.75rem 0.75rem 40px;
       margin: 0;
       margin-top: -1px;
+      height: 100%;
     }
 
     .dd3-handle:before {
@@ -77,7 +75,10 @@
   .metadata-select {
     display: inline-block;
     text-wrap: nowrap;
-    min-width: 72px;
+  }
+
+  .select-label {
+    font-weight: normal;
   }
 }
 

data/app/assets/stylesheets/spotlight/_browse.scss

@@ -48,12 +48,6 @@ $image-overlay-max-height: 300px;
 
 .browse-landing {
   text-align: center;
-  // Placeholder for vertically alignment - might already be available from use in another feature
-  %vertical-align {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
 
   .category {
     margin-bottom: $spacer;
@@ -77,18 +71,16 @@ $image-overlay-max-height: 300px;
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 100%;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2), rgba(0, 0, 0, .4));
+    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 70%, rgba(46, 45, 41, 0) 100%);
     color: $white;
-    padding: 8%;
+    padding: 50px 20px 20px 20px;
     text-align: center;
-    text-shadow: 0 1px 0 $black;
+
     // prevents potential blur caused by the vertical-align technique
     transform-style: preserve-3d;
 
     .browse-category-title {
       font-size: $h3-font-size;
-      @extend %vertical-align;
 
       .category-subtitle {
         display: block;

data/app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss

@@ -61,12 +61,14 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
   position: relative;
 
   .category-caption {
-    bottom: 16px; // assumes default font-size of 16px, using browser default of 1 rem == 16px
+    bottom: 0px;
     color: $featured-browse-category-caption-color;
     position: absolute;
     text-align: center;
-    text-shadow: 0 1px 0 $black;
     width: 100%;
+    padding: 35px 15px 15px;
+    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 70%, rgba(46, 45, 41, 0) 100%);
+    border-radius: $border-radius-lg;
   }
 
   .category-title {

data/app/components/spotlight/bulk_action_component.html.erb

@@ -0,0 +1,8 @@
+<div class="dropdown bulk-actions-dropdown">
+  <%= button %>
+  <div class="dropdown-menu" aria-labelledby="bulk-actions-button">
+    <% bulk_actions.each do |key, _config| %>
+      <%= link_to t("spotlight.bulk_actions.#{key}.heading"), '#', class: 'dropdown-item', data: { toggle: "modal", "bs-toggle": "modal", target: "##{key.to_s.dasherize}-modal", "bs-target": "##{key.to_s.dasherize}-modal" } %>
+    <% end %>
+  </div>
+</div>

data/app/components/spotlight/bulk_action_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Displays the "Bulk actions" button and dropdown
+  class BulkActionComponent < ViewComponent::Base
+    def initialize(bulk_actions:, button_classes: 'btn btn-secondary dropdown-toggle')
+      @bulk_actions = bulk_actions
+      @button_classes = button_classes
+      super
+    end
+
+    attr_reader :button_classes, :bulk_actions
+
+    def button
+      button_tag t(:'spotlight.bulk_actions.label'), id: 'bulk-actions-button', class: button_classes,
+                                                     data: { toggle: 'dropdown', 'bs-toggle': 'dropdown' },
+                                                     aria: { haspopup: true, expanded: false }
+    end
+  end
+end

data/app/components/spotlight/header_navigation_link_component.html.erb

@@ -0,0 +1 @@
+  <li class="nav-item <%= "active" if @active %>"><%= link_to @label, @path, class: 'nav-link' %></li>

data/app/components/spotlight/header_navigation_link_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # This draws a navigation link in the header.
+  # A downstream application may switch out the implementation to use different styles, etc.
+  class HeaderNavigationLinkComponent < ViewComponent::Base
+    def initialize(path:, active:, label:)
+      @path = path
+      @active = active
+      @label = label
+      super
+    end
+  end
+end

data/app/components/spotlight/save_search_component.html.erb

@@ -0,0 +1,25 @@
+<%= button %>
+<div class="modal fade" id="save-modal" tabindex="-1" role="dialog" aria-labelledby="save-modal-label" aria-hidden="true">
+  <div class="modal-dialog">
+  <%= bootstrap_form_for form_path, html: { novalidate: true } do |f| %>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.saved_search.label') %></h4>
+        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <%= f.text_field :title, label: t(:'spotlight.saved_search.title') %>
+        <%= label_tag :id, t(:'spotlight.saved_search.id'), class: 'col-form-label' %>
+        <%= select_tag :id, options_for_select(searches.map { |s| [s.full_title, s.id] }), include_blank: true, class: 'form-control' %>
+        <%= render Blacklight::HiddenSearchStateComponent.new(params: search_state.params_for_search.except(:qt, :page)) %>
+      </div>
+      <div class="modal-footer d-flex flex-row-reverse justify-content-start">
+        <%= f.submit nil, class: 'btn btn-primary' %>
+        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
+      </div>
+    </div>
+    <% end %>
+  </div>
+</div>

data/app/components/spotlight/save_search_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Displays the "Save this search" button and modal
+  class SaveSearchComponent < ViewComponent::Base
+    def initialize(button_classes: 'btn btn-secondary')
+      @button_classes = button_classes
+      super
+    end
+
+    attr_reader :button_classes
+
+    delegate :search_state, :current_exhibit, to: :helpers
+    delegate :searches, to: :current_exhibit
+
+    def button
+      button_tag t(:'spotlight.saved_search.label'), id: 'save-this-search', class: button_classes,
+                                                     data: { toggle: 'modal', 'bs-toggle': 'modal', target: '#save-modal', 'bs-target': '#save-modal' }
+    end
+
+    def form_path
+      [helpers.spotlight, current_exhibit, Spotlight::Search.new]
+    end
+  end
+end

data/app/components/spotlight/translations/subheading_component.html.erb

@@ -0,0 +1,3 @@
+<h2 class='translation-subheading mt-4'>
+  <%= text %>
+</h2>

data/app/components/spotlight/translations/subheading_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Spotlight
+  module Translations
+    # Draws a sub-heading for a translation.
+    class SubheadingComponent < ViewComponent::Base
+      def initialize(key:)
+        @key = key
+        super
+      end
+
+      def text
+        t(@key, scope: 'spotlight.translations')
+      end
+    end
+  end
+end

data/app/controllers/spotlight/accessibility_controller.rb

@@ -7,17 +7,10 @@ module Spotlight
     before_action :authenticate_user!
     load_and_authorize_resource :exhibit, class: Spotlight::Exhibit
 
-    include Spotlight::Base
-    include Spotlight::SearchHelper
-
     def alt_text
-      authorize! :curate, @exhibit
-
-      @limit = 5
       # Sort by newest except for the homepage, which is always first
       pages_with_alt = @exhibit.pages.order(Arel.sql('id = 1 DESC, created_at DESC')).select { |elem| elem.content.any?(&:alt_text?) }
-      pages = params[:show_all] ? pages_with_alt : pages_with_alt.first(@limit)
-      @pages = pages.map { |page| get_alt_info(page) }
+      @pages = pages_with_alt.map { |page| get_alt_info(page) }
       @has_alt_text = @pages.sum { |page| page[:has_alt_text] }
       @total_alt_items = @pages.sum { |page| page[:can_have_alt_text] }
 
@@ -30,6 +23,8 @@ module Spotlight
       can_have_alt_text = 0
       has_alt_text = 0
       page.content.each do |content|
+        next unless content.alt_text?
+
         content.item&.each_value do |item|
           can_have_alt_text += 1
           has_alt_text += 1 if item['alt_text'].present? || item['decorative'].present?

data/app/helpers/spotlight/application_helper.rb

@@ -124,14 +124,13 @@ module Spotlight
       end.keys.map(&:to_s)
     end
 
-    def select_deselect_button
-      button_tag(
-        t(:'.deselect_all'),
-        class: 'btn btn-secondary btn-sm metadata-select',
+    # Create checkbox for selecting/deselecting metadata fields for a given view in metadata configuration
+    def select_deselect_action(id)
+      check_box_tag(
+        id,
+        class: 'metadata-select',
         data: {
-          behavior: 'metadata-select',
-          'deselect-text' => t(:'.deselect_all'),
-          'select-text' => t(:'.select_all')
+          behavior: 'metadata-select'
         }
       )
     end

data/app/helpers/spotlight/main_app_helpers.rb

@@ -46,7 +46,7 @@ module Spotlight
       if current_exhibit_theme && current_exhibit&.theme != 'default'
         stylesheet_link_tag "#{tag}_#{current_exhibit_theme}"
       else
-        Rails.logger.warn "Exhibit theme '#{current_exhibit_theme}' not in the list of available themes: #{current_exhibit&.themes}"
+        Rails.logger.debug { "Exhibit theme '#{current_exhibit_theme}' not in the list of available themes: #{current_exhibit&.themes}" }
         stylesheet_link_tag(tag)
       end
     end

data/app/javascript/spotlight/admin/blacklight_configuration.js

@@ -1,53 +1,50 @@
 export default class {
   connect() {
-    // Add Select/Deselect all button behavior
+    // Add Select/Deselect all input behavior
     this.addCheckboxToggleBehavior();
     this.addEnableToggleBehavior();
   }
   
-  // Add Select/Deselect all button behavior
+  // Add Select/Deselect all behavior for metadata field names for a given view e.g. Item details. 
   addCheckboxToggleBehavior() {
     $("[data-behavior='metadata-select']").each(function(){
-      var button = $(this)
-      var parentCell = button.parents("th");
+      var selectCheckbox = $(this);
+      var parentCell = selectCheckbox.parents("th");
       var table = parentCell.closest("table");
       var columnRows = $("tr td:nth-child(" + (parentCell.index() + 1) + ")", table);
       var checkboxes = $("input[type='checkbox']", columnRows);
-      swapSelectAllButtonText(button, columnRows);
-      // Add the check/uncheck behavior to the button
-      // and swap the button text if necessary
-      button.on('click', function(e){
-        e.preventDefault();
+      updateSelectAllInput(selectCheckbox, columnRows);
+      // Add the check/uncheck behavior to the select/deselect all checkbox
+      selectCheckbox.on('click', function(e){
         var allChecked = allCheckboxesChecked(columnRows);
         columnRows.each(function(){
           $("input[type='checkbox']", $(this)).prop('checked', !allChecked);
-          swapSelectAllButtonText(button, columnRows);
         });
       });
-      // Swap button text when a checkbox value changes
+      // When a single checkbox is selected/unselected, the "All" checkbox should be updated accordingly.
       checkboxes.each(function(){
         $(this).on('change', function(){
-          swapSelectAllButtonText(button, columnRows);
+          updateSelectAllInput(selectCheckbox, columnRows);
         });
-      });
+      }); 
     });
+
     // Check number of checkboxes against the number of checked
     // checkboxes to determine if all of them are checked or not
     function allCheckboxesChecked(elements) {
       return ($("input[type='checkbox']", elements).length == $("input[type='checkbox']:checked", elements).length)
     }
-    // Swap the button text to "Deselect all"
-    // when all the checkboxes are checked and
-    // "Select all" when any are unchecked
-    function swapSelectAllButtonText(button, elements) {
+
+    // Check or uncheck the "All" checkbox for each view column, e.g. Item details, List, etc.
+    function updateSelectAllInput(checkbox, elements) {
       if ( allCheckboxesChecked(elements) ) {
-        button.text(button.data('deselect-text'));
+        checkbox.prop('checked', true);
       } else {
-        button.text(button.data('select-text'));
+        checkbox.prop('checked', false);
       }
     }
   }
-
+    
   addEnableToggleBehavior() {
     $("[data-behavior='enable-feature']").each(function(){
       var checkbox = $(this);
@@ -62,4 +59,4 @@ export default class {
       });
     });
   }
-}
+}

data/app/javascript/spotlight/admin/blocks/uploaded_items_block.js

@@ -137,8 +137,8 @@ SirTrevor.Blocks.UploadedItems = (function(){
           </div>
           <div class="col-md-4">
             <input name="${this.zpr_key}" type="hidden" value="false" />
-            <input name="${this.zpr_key}" id="${this.formId(this.zpr_key)}" data-key=${this.zpr_key}" type="checkbox" value="true" />
-            <label for="${this.formId(this.zpr_key)}">${ i18n.t("blocks:solr_documents:zpr:title")}</label>
+            <input name="${this.zpr_key}" id="${this.formId(this.zpr_key)}" data-key="${this.zpr_key}" type="checkbox" value="true" />
+            <label for="${this.formId(this.zpr_key)}">${i18n.t("blocks:solr_documents:zpr:title")}</label>
           </div>
         </div>
         ${this.text_area()}

data/app/models/spotlight/blacklight_configuration.rb

@@ -253,7 +253,7 @@ module Spotlight
         original_config = blacklight_config.index_fields[custom_field.field] || {}
         field = Blacklight::Configuration::IndexField.new original_config.merge(
           custom_field.configuration.merge(
-            key: custom_field.field, field: custom_field.solr_field, custom_field: true
+            key: custom_field.field, field: custom_field.solr_field, custom_field: true, type: 'custom-field'
           )
         )
         [custom_field.field, field]
@@ -358,6 +358,7 @@ module Spotlight
 
       options = f.blacklight_options || {}
       options[:label] = f.label if f.label
+      options[:type] = 'uploaded'
 
       config.add_index_field key, options
     end

data/app/models/spotlight/page_configurations.rb

@@ -40,7 +40,8 @@ module Spotlight
         'autocomplete-exhibit-pages-path': page_autocomplete_endpoint,
         'autocomplete-exhibit-browse-groups-path': browse_groups_autocomplete_endpoint,
         'autocomplete-exhibit-searches-path': search_autocomplete_endpoint,
-        'preview-url': page_preview_url
+        'preview-url': page_preview_url,
+        'exhibit-path': spotlight.exhibit_path(current_exhibit)
       }.merge(downstream_parameters)
     end
 

data/app/views/catalog/_bulk_actions.html.erb

@@ -1,12 +1,3 @@
-<div class="dropdown bulk-actions-dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="bulk-actions-button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <%= t(:'spotlight.bulk_actions.label') %>
-  </button>
-  <div class="dropdown-menu" aria-labelledby="bulk-actions-button">
-    <% blacklight_config.bulk_actions.each do |key, _config| %>
-      <%= link_to t("spotlight.bulk_actions.#{key}.heading"), '#', class: 'dropdown-item', data: { toggle: "modal", "bs-toggle": "modal", target: "##{key.to_s.dasherize}-modal", "bs-target": "##{key.to_s.dasherize}-modal" } %>
-    <% end %>
-  </div>
-</div>
+<%= render Spotlight::BulkActionComponent.new(bulk_actions: blacklight_config.bulk_actions) %>
 
 <%= render_filtered_partials(blacklight_config.bulk_actions) %>

data/app/views/catalog/_save_search.html.erb

@@ -1,25 +1 @@
-<%= button_tag t(:'spotlight.saved_search.label'), id: "save-this-search", class: 'btn btn-secondary',  data: { toggle: "modal", "bs-toggle": "modal", target: "#save-modal", "bs-target": "#save-modal" } %>
-<div class="modal fade" id="save-modal" tabindex="-1" role="dialog" aria-labelledby="save-modal-label" aria-hidden="true">
-  <div class="modal-dialog">
-  <%= bootstrap_form_for [spotlight, current_exhibit, Spotlight::Search.new], html: { novalidate: true } do |f| %>
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.saved_search.label') %></h4>
-        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-          <span aria-hidden="true" class="visually-hidden">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <%= f.text_field :title, label: t(:'spotlight.saved_search.title') %>
-        <%= label_tag :id, t(:'spotlight.saved_search.id'), class: 'col-form-label' %>
-        <%= select_tag :id, options_for_select(current_exhibit.searches.map { |s| [s.full_title, s.id] }), include_blank: true, class: 'form-control' %>
-        <%= render Blacklight::HiddenSearchStateComponent.new(params: search_state.params_for_search.except(:qt, :page)) %>
-      </div>
-      <div class="modal-footer d-flex flex-row-reverse justify-content-start">
-        <%= f.submit nil, class: 'btn btn-primary' %>
-        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
-      </div>
-    </div>
-    <% end %>
-  </div>
-</div>
+<%= render Spotlight::SaveSearchComponent.new %>

data/app/views/layouts/spotlight/base.html.erb

@@ -36,7 +36,7 @@
     <%= render partial: 'shared/masthead' %>
     <%= content_for?(:header_content) ? yield(:header_content) : "" %>
 
-    <main id="main-container" class="<%= container_classes %>" role="main" aria-label="<%= t('blacklight.main.aria.main_container') %>">
+    <main id="main-container" class="<%= container_classes %>" aria-label="<%= t('blacklight.main.aria.main_container') %>">
       <%= content_for(:container_header) %>
 
       <%= render partial: 'shared/flash_msg', layout: 'shared/flash_messages' %>

data/app/views/shared/_about_navbar.html.erb

@@ -1,3 +1,3 @@
 <% if current_exhibit.main_about_page %>
-  <li class="nav-item <%= "active" if on_about_page? %>"><%= link_to navigation.label_or_default, [spotlight, current_exhibit, current_exhibit.main_about_page], class: 'nav-link' %></li>
+  <%= render Spotlight::Engine.config.spotlight.header_navigation_link_component.new(active: on_about_page?, label: navigation.label_or_default, path: [spotlight, current_exhibit, current_exhibit.main_about_page]) %>
 <% end %>

data/app/views/shared/_browse_navbar.html.erb

@@ -1,3 +1,3 @@
 <% if current_exhibit.browse_categories? %>
-  <li class="nav-item <%= "active" if on_browse_page? %>"><%= link_to navigation.label_or_default, spotlight.exhibit_browse_index_path(current_exhibit), class: 'nav-link' %></li>
+  <%= render Spotlight::Engine.config.spotlight.header_navigation_link_component.new(active: on_browse_page?, label: navigation.label_or_default, path: spotlight.exhibit_browse_index_path(current_exhibit)) %>
 <% end %>

data/app/views/shared/_curated_features_navbar.html.erb

@@ -10,6 +10,9 @@
       </ul>
     </li>
   <% else %>
-    <li class="nav-item <%= "active" if current_page?(url_for([spotlight, published_top_level_feature_pages.first.exhibit, published_top_level_feature_pages.first])) %>"><%= link_to published_top_level_feature_pages.first.title, [spotlight, published_top_level_feature_pages.first.exhibit, published_top_level_feature_pages.first], class: 'nav-link' %></li>
+    <%= render Spotlight::Engine.config.spotlight.header_navigation_link_component.new(active: current_page?(url_for([spotlight, published_top_level_feature_pages.first.exhibit, published_top_level_feature_pages.first])),
+                                                              label: published_top_level_feature_pages.first.title,
+                                                              path: [spotlight, published_top_level_feature_pages.first.exhibit, published_top_level_feature_pages.first]) %>
+
   <% end %>
 <% end %>

data/app/views/shared/_masthead.html.erb

@@ -14,7 +14,7 @@
   <% end %>
 <% end %>
 
-<header class="masthead <%= 'image-masthead' if current_masthead %> <%= 'resource-masthead' if resource_masthead? %>" role="banner">
+<header class="masthead <%= 'image-masthead' if current_masthead %> <%= 'resource-masthead' if resource_masthead? %>">
   <% if current_masthead %>
     <span class='background-container' style="background-image: url('<%= current_masthead.iiif_url %>')"></span>
     <span class='background-container-gradient'></span>

data/app/views/spotlight/accessibility/alt_text.html.erb

@@ -55,10 +55,4 @@
       </tr>
     <% end %>
   </tbody>
-</table>
-
-<% unless params[:show_all] || @pages.length < @limit %>
-  <%= link_to '?show_all=true', class: 'ml-3' do %>
-    Show all<%= blacklight_icon('chevron_right') %>
-  <% end %>
-<% end %>
+</table>

data/app/views/spotlight/admin_users/index.html.erb

@@ -53,7 +53,7 @@
   <div class="mb-4">
     <h3 class="instructions"><%= t :'.admins_curators' %></h3>
     <div id="admins_curators" class="card card-body bg-light">
-      <div class='btn-toolbar float-right float-end'>
+      <div class='btn-toolbar float-right align-self-end'>
         <button class="btn btn-sm btn-secondary copy-email-addresses" data-clipboard-target="#admins_curators">
             <%= t('.copy') %>
         </button>
@@ -87,7 +87,7 @@
                       data: { method: :delete, turbo_method: :delete },
                       class: 'btn btn-sm btn-danger') unless user == current_user %>
               <% else %>
-                <%= link_to(t('.update'), admin_user_path(user), 
+                <%= link_to(t('.update'), admin_user_path(user),
                       data: { method: :patch, turbo_method: :patch },
                       class: 'btn btn-sm btn-secondary') %>
               <% end %>

data/app/views/spotlight/bulk_updates/_upload.html.erb

@@ -9,7 +9,7 @@
       <div class="input-group">
         <%= file_field_tag :file, class: 'form-control', accept: '.csv,text/csv', 'aria-described-by': 'bulk-update-form-help' %>
         <div class="input-group-append">
-          <%= f.submit t('.submit'), class: 'btn btn-primary' %>
+          <%= f.submit t('.submit'), class: 'btn btn-primary rounded-0 rounded-end' %>
         </div>
       </div>
     </div>

data/app/views/spotlight/custom_fields/form_group/_text.html.erb

@@ -18,6 +18,6 @@
         <%= f.text_area_without_bootstrap field.slug, multiple: field.is_multiple?, value: nil, class: "form-control field-#{field.slug}" %>
       </div>
     <% end %>
-    <%= content_tag :button, t('helpers.action.add_another'), class: 'btn btn-info btn-sm h-100', data: { action: 'add-another', template_id: "spotlight-field-template-#{field.slug}" } %>
+    <%= content_tag :button, t('helpers.action.add_another'), class: 'btn btn-info btn-sm col-auto h-100', data: { action: 'add-another', template_id: "spotlight-field-template-#{field.slug}" } %>
   <% end %>
 </div>

data/app/views/spotlight/custom_fields/form_group/_vocab.html.erb

@@ -18,6 +18,6 @@
         <%= f.text_field_without_bootstrap field.slug, multiple: field.is_multiple?, value: nil, class: "form-control field-#{field.slug}" %>
       </div>
     <% end %>
-    <%= content_tag :button, t('helpers.action.add_another'), class: 'btn btn-info btn-sm h-100', data: { action: 'add-another', template_id: "spotlight-field-template-#{field.slug}" } %>
+    <%= content_tag :button, t('helpers.action.add_another'), class: 'btn btn-info btn-sm col-auto h-100', data: { action: 'add-another', template_id: "spotlight-field-template-#{field.slug}" } %>
   <% end %>
 </div>

data/app/views/spotlight/feature_pages/_header.html.erb

@@ -2,8 +2,8 @@
   <% page = p.object %>
   <div class="home_page">
     <h2><%= t('spotlight.pages.index.feature_pages.home_pages_header') %></h2>
-    <div class="card d-flex">
-      <div class="card-body d-flex bg-light page main">
+    <div class="card d-flex bg-light">
+      <div class="card-body d-flex page main">
         <div class="flex-grow-1 align-self-center">
           <%= p.hidden_field :id, value: page.id , class: 'form-control form-control-sm' %>
           <h3 class="h6 card-title" data-in-place-edit-target=".edit-in-place" data-in-place-edit-field-target="[data-edit-field-target='true']">

data/app/views/spotlight/metadata_configurations/_metadata_field.html.erb

@@ -27,5 +27,12 @@
         <%= field.check_box_without_bootstrap type, checked: config.send(type), disabled: !config.immutable.send(type).nil?, hide_label: true %>
       </td>
     <% end %>
+    <td class="text-center">
+      <% if config.type %>
+        <%= t(:".types.#{config.type}") %>
+      <% end %>
+    </td>
+
+
   <% end %>
 </tr>

data/app/views/spotlight/metadata_configurations/edit.html.erb

@@ -16,16 +16,27 @@
             <div>
               <%= t :'.view.show' %>
             </div>
-            <%= select_deselect_button %>
+            <div class="text-center">
+              <%= label_tag 'item_details', class: 'select-label'  do %>
+                <%= select_deselect_action(t :'.view.select_id') %>
+                <%= t(:'.select_all') %>
+              <% end %>
+            </div>
           </th>
           <% available_view_fields.keys.each do |type| %>
             <th class="text-center">
               <div>
                 <%= t :".view.#{type}", default: t("blacklight.search.view.#{type}", default: type.to_s.humanize.titleize) %>
               </div>
-              <%= select_deselect_button %>
+              <div class="text-center">
+                <%= label_tag t(:'.deselect_all') + type.to_s, class: 'select-label'  do %>
+                  <%= select_deselect_action(t(:'.deselect_all') + type.to_s) %>
+                  <%= t(:'.select_all') %>
+                <% end %>
+              </div>
             </th>
           <% end %>
+          <th class="text-center"><%= t :'.type_label' %></th>
         </tr>
       </thead>
       <tbody class="metadata_fields dd dd-list" data-behavior="nestable" data-max-depth="1" data-list-node-name="tbody" data-item-node-name="tr" data-expand-btn-HTML=" " data-collapse-btn-HTML=" ">

data/app/views/spotlight/shared/_honeypot_field.html.erb

@@ -1,4 +1,4 @@
-<span style="display:none;visibility:hidden;">
+<div style="display:none;visibility:hidden;">
   <% honeypot_field_name = Spotlight::Engine.config.spambot_honeypot_email_field %>
   <%= f.email_field honeypot_field_name, label: t(:'spotlight.shared.report_a_problem.honeypot_field_explanation') %>
-</span>
+</div>

data/app/views/spotlight/sir_trevor/blocks/_browse_block.html.erb

@@ -5,7 +5,7 @@
     <% browse_block.searches.each_with_index do |search, index| %>
       <div class="box category-<%= (index + 1) %>">
         <%= link_to spotlight.exhibit_browse_path(search.exhibit, search) do %>
-          <div class="browse-category" style='background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
+          <div class="browse-category" style='background-image: url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
             <div class="category-caption">
               <p class="category-title">
                 <%= search.title %>

data/app/views/spotlight/sir_trevor/blocks/_browse_group_categories_block.html.erb

@@ -23,7 +23,7 @@
         <% group.searches.published.each_with_index do |search, index| %>
           <div class="box category-1 justify-content-center justify-content-md-space-around">
             <%= link_to spotlight.exhibit_browse_group_path(current_exhibit, group, search), class: 'justify-content-center' do %>
-              <div class="browse-category" style='background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
+              <div class="browse-category" style='background-image: url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
                 <div class="category-caption">
                   <p class="category-title">
                     <%= search.title %>