blacklight-spotlight 4.7.1 → 5.0.0.pre.alpha1

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

@@ -6,12 +6,3 @@
     outline: $input-focus-border-color auto 5px;
   }
 }
-
-// CSS for accessibility dashboard
-.alt-text-status .bi-exclamation-triangle-fill {
-  fill: $warning;
-}
-
-.alt-text-status .bi-check-circle-fill {
-  fill: $success;
-}

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

@@ -0,0 +1,49 @@
+auto-complete {
+  width: 100%;
+  z-index: $zindex-dropdown !important; /* get typeahead to float on top of e.g. leaflet */
+  ul {
+    list-style-type: none;
+    z-index: $zindex-dropdown !important;
+    margin-top: 2px;
+    max-height: 360px;
+    overflow-y: auto;
+    padding: 8px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  }
+
+  [role="option"]{
+    font-size: 18px;
+    line-height: 24px;
+    padding: 3px 1rem 3px 1rem;
+    margin-bottom: 1em;
+  }
+}
+
+auto-complete [aria-selected="true"],
+auto-complete [role="option"]:hover {
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.autocomplete-item {
+  display: flex;
+
+  p {
+    margin: 0;
+  }
+  .document-thumbnail {
+    margin-right: 1rem;
+    min-width: 60px;
+    padding: 0;
+    width: 60px;
+
+    img {
+      max-width: 60px;
+      max-height: 60px;
+    }
+  }
+}

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

@@ -15,7 +15,6 @@
       padding: 0.75rem 0.75rem 0.75rem 40px;
       margin: 0;
       margin-top: -1px;
-      height: 100%;
     }
 
     .dd3-handle:before {

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

@@ -1,15 +1,10 @@
-.submit-search-text {
-  @extend .sr-only !optional;
-  @extend .visually-hidden !optional;
-}
-
 .search-query-form {
   z-index: 1;
 
   .input-group {
     width: 100%;
   }
-  
+
   .search-btn {
     max-height: 2.375rem;
   }

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

@@ -54,8 +54,8 @@ $image-overlay-max-height: 300px;
   }
 
   .image-overlay {
-    border: 2px solid $gray-600;
-    border-radius: $border-radius-lg;
+    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+    border-radius: var(--bs-border-radius);
     max-height: 240px;
     min-height: 140px;
     overflow: hidden;

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

@@ -4,7 +4,6 @@
   .thumbnail-column {
     box-sizing: content-box;
     min-width: 60px;
-
   }
 
   .document-thumbnail {
@@ -20,7 +19,9 @@
     object-fit: cover;
   }
 
-  .document-counter {display: none;}
+  .document-counter {
+    display: none;
+  }
 
   .index_title {
     margin-top: 0;
@@ -43,8 +44,7 @@
     text-align: center;
     li {
       @extend .badge;
-      @extend .badge-secondary !optional;
-      @extend .bg-secondary !optional;
+      @extend .bg-secondary;
       a {
         color: #fff;
       }
@@ -52,14 +52,27 @@
   }
 }
 
-.document, tr.doc-row, li.dd-item, .autocomplete-item {
+.document,
+tr.doc-row,
+li.dd-item,
+.autocomplete-item {
   &.blacklight-private {
-    .index_title, h1, .card-title, .autocomplete-title {
+    .index_title,
+    h1,
+    .card-title,
+    .autocomplete-title {
       @include private-label;
     }
   }
 }
 
+// Don't show the private label until Blacklight reports success
+tr.doc-row:has(input.toggle-visibility:disabled:not(:checked)) {
+  .index_title::after {
+    display: none;
+  }
+}
+
 .blacklight-catalog-admin {
   .add-items-nav {
     margin-bottom: $spacer;
@@ -71,33 +84,20 @@
 }
 
 form.edit_solr_document {
-  .bootstrap-tagsinput {
-    @extend .clearfix;
-    cursor: text;
-  }
   .bg-warning.form-text {
     font-size: 0.9em;
     padding: 3px 6px;
   }
 }
 
-.bootstrap-tagsinput {
-  display: block;
-  .twitter-typeahead {
-    width: auto;
-  }
-
-  .tt-input {
-    vertical-align: baseline !important;
-  }
-}
-
-.blacklight-catalog-edit, .blacklight-catalog-show {
+.blacklight-catalog-edit,
+.blacklight-catalog-show {
   .img-thumbnail {
     @extend .col-md-6;
   }
 
-  .tags, .dl-horizontal {
+  .tags,
+  .dl-horizontal {
     @extend .col-md-6;
   }
 
@@ -120,7 +120,8 @@ form.edit_solr_document {
   width: 60%;
   margin-left: -1 * $spacer * 0.1;
 
-  .btn, .btn-group {
+  .btn,
+  .btn-group {
     margin-left: $spacer * 0.1;
     margin-top: $spacer * 0.25;
   }
@@ -141,28 +142,26 @@ form.edit_solr_document {
 .document {
   .blacklight-exhibit_tags a {
     @extend .badge;
-    @extend .badge-secondary !optional;
-    @extend .bg-secondary !optional;
+    @extend .bg-secondary;
 
     &:not(:last-child) {
-      @extend .mr-2 !optional;
-      @extend .me-2 !optional;
+      @extend .me-2;
     }
   }
 }
 
 .visibility-toggle {
-	.no-js & {
-		input[type="submit"] {
-			display: inline
-		}
-
-		div.toggle-visibility {
-			display: none
-		}
-	}
-
-	input[type="submit"] {
-		display: none;
-	}
+  .no-js & {
+    input[type="submit"] {
+      display: inline;
+    }
+
+    div.toggle-visibility {
+      display: none;
+    }
+  }
+
+  input[type="submit"] {
+    display: none;
+  }
 }

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

@@ -21,7 +21,7 @@
     }
     input[type='submit'] {
       @extend .btn;
-      @extend .btn-secondary;
+      @extend .btn-primary;
       @extend .btn-sm;
     }
     display: none;

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

@@ -83,3 +83,10 @@
     margin-bottom: $spacer;
   }
 }
+
+// In various admin views we use leaflet maps and autocomplete. They both set
+// the same z-index value, so we need to override the leaflet z-index to make
+// sure the leaflet controls don't appear over the autocomplete dropdown.
+.leaflet-top, .leaflet-bottom {
+  z-index: 950;
+}

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

@@ -1,9 +1,6 @@
 $exhibit-card-overlay-padding: $card-img-overlay-padding * 0.5 !default;
-$exhibit-card-overlay-opacity: 0.85 !default;
-$exhibit-card-bg: $card-bg !default;
 
 .exhibit-card {
-  background: $exhibit-card-bg;
   overflow-y: hidden;
   padding-bottom: 3rem;
 
@@ -36,7 +33,13 @@ $exhibit-card-bg: $card-bg !default;
   }
 
   .card-img-overlay {
-    background: rgba($exhibit-card-bg, $exhibit-card-overlay-opacity);
+    --exhibit-card-overlay-opacity: .7;
+    --exhibit-card-overlay-rgb: 255, 255, 255;
+    --exhibit-card-overlay-bg: rgba(
+      var(--exhibit-card-overlay-rgb),
+      var(--exhibit-card-overlay-opacity)
+    );
+    background: var(--exhibit-card-overlay-bg);
     border-bottom-left-radius: calc(0.25rem - 1px);
     border-bottom-right-radius: calc(0.25rem - 1px);
     display: flex;
@@ -82,7 +85,7 @@ $exhibit-card-bg: $card-bg !default;
     outline: $input-focus-border-color auto 5px;
 
     // Use WebKit focus styles if available
-    @supports (-webkit-appearance:none) {
+    @supports (-webkit-appearance: none) {
       outline-color: -webkit-focus-ring-color;
     }
 

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

@@ -56,8 +56,8 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  border: 2px solid $featured-browse-category-border-color;
-  border-radius: $border-radius-lg;
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+  border-radius: var(--bs-border-radius);
   position: relative;
 
   .category-caption {
@@ -69,7 +69,7 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
     width: 100%;
     padding: 5%;
     background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 45%, rgba(46, 45, 41, 0) 100%);
-    border-radius: $border-radius-lg;
+    border-radius: var(--bs-border-radius);
     display: flex;
     flex-direction: column; 
     justify-content: flex-end;

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

@@ -143,3 +143,16 @@
     width: 1px;
   }
 }
+
+.link-unstyled {
+  &,
+  &:visited,
+  &:hover,
+  &:active,
+  &:focus,
+  &:active:hover {
+    color: inherit;
+    text-decoration: none;
+    font-weight: inherit;
+  }
+}

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

@@ -1,5 +1,5 @@
 @mixin edit-in-place-highlighting() {
-  background: #F7F7D0;
+  background: #f7f7d0;
   cursor: text;
 }
 
@@ -10,9 +10,8 @@
 @mixin private-label() {
   &:after {
     @extend .badge;
-    @extend .badge-warning !optional;
-    @extend .bg-warning !optional;
-    content: 'Private';
+    @extend .bg-warning;
+    content: "Private";
     margin-left: 3px;
     color: black;
   }

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

@@ -26,8 +26,8 @@ tr.dd-item {
   position: relative;
 }
 
-.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
-.dd-list .dd-list { padding-left: 30px; }
+.dd-list { display: block; position: relative; margin: 0; padding: 0 0 5px 0; list-style: none; }
+.dd-list .dd-list { margin-left: 15px; padding-left: 15px; padding-bottom: 0; } // Having this mix of padding and margin improves the experience of dragging left to remove an item from a nested list.
 .dd-collapsed .dd-list { display: none; }
 
 .dd-item,
@@ -55,19 +55,10 @@ tr.dd-item {
     background-position: 0 0, 30px 30px;
 }
 
-.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
-.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
-.dd-dragel .dd-handle {
-            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
-}
-
 /**
  * Nestable Extras
  */
 
-.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
-
-
 .dd-hover > .dd-handle { background: #2ea8e5 !important; }
 
 /**
@@ -93,7 +84,6 @@ tr.dd-item {
 .dd3-content.page-admin {
   position: relative;
 }
-.dd-dragel > .dd3-item > .dd3-content { margin: 0; }
 
 .dd3-item > button { margin-left: 30px; }
 

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

@@ -12,8 +12,7 @@
 }
 
 .primary-actions {
-  @extend .float-right !optional;
-  @extend .float-end !optional;
+  @extend .float-end;
 }
 
 #nested-pages {
@@ -71,7 +70,7 @@
 
     li {
       margin-bottom: 1rem;
-      margin-top: $spacer * .5;
+      margin-top: $spacer * 0.5;
       word-break: break-word;
       .name {
         font-weight: bold;
@@ -82,7 +81,7 @@
   ol.sidenav {
     li {
       color: $gray-900;
-      margin-top: $spacer * .5;
+      margin-top: $spacer * 0.5;
     }
 
     ol.subsection {
@@ -117,7 +116,9 @@
 }
 
 .item-grid-block {
-  h3 { margin-top: 0; }
+  h3 {
+    margin-top: 0;
+  }
 
   .text-col {
     float: none;
@@ -180,7 +181,8 @@
   }
 }
 
-.preview-btn, .preview-exit-btn {
+.preview-btn,
+.preview-exit-btn {
   float: left;
   width: 100px;
 }
@@ -200,7 +202,8 @@
   h2 {
     margin-top: 0;
   }
-  p, ol > li {
+  p,
+  ol > li {
     padding: $spacer * 0.5;
   }
   ol > li:last-child {
@@ -221,7 +224,6 @@
 }
 
 .items-block {
-
   .text-col {
     float: none;
     width: auto;
@@ -279,5 +281,5 @@
 
 .zpr-link {
   @extend .btn-sm;
-  margin-top: $spacer * .75;
+  margin-top: $spacer * 0.75;
 }

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

@@ -1,10 +1,8 @@
 #report-problem-form {
-  display: none;
   border-bottom: 1px solid $gray-600;
 
   h2 {
-    @extend .sr-only !optional;
-    @extend .visually-hidden !optional;
+    @extend .visually-hidden;
   }
 }
 

data/app/assets/stylesheets/spotlight/_sir-trevor_overrides.scss

@@ -75,8 +75,8 @@
 
 .st-block-controls__button {
   @extend .btn;
-  @extend .btn-secondary;
-  @extend .btn-outline-secondary;
+  @extend .btn-primary;
+  @extend .btn-outline-primary;
 
   border: 1px solid $gray-700;
 

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

@@ -30,11 +30,12 @@
 @import "report_a_problem";
 @import "exhibits_index";
 @import "collapse_toggle";
+@import "tag_selector";
 @import "translations";
 @import "utilities";
 @import "view_larger";
 @import "accessibility";
-
+@import "autocomplete";
 
 
 // Styles below keep footer at bottom of viewport

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

@@ -0,0 +1,34 @@
+.tag-selector {
+  .tag-selection-search-bar input {
+    border: none;
+    outline: none;
+  }
+
+  .tag-selector-input {
+    display: none;
+  }
+
+  .dropdown-content {
+    overflow-y: auto;
+    max-height: 180px;
+    label {
+      padding: 5px 10px;
+      cursor: pointer;
+
+      &:hover,
+      &.active {
+        background-color: $light;
+      }
+    }
+  }
+}
+
+.no-js .tag-selector {
+  .tag-selector-input {
+    display: block;
+  }
+
+  .tag-selection-wrapper {
+    display: none;
+  }
+}

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

@@ -4,14 +4,6 @@ $footer-height: 7.5rem !default;
 $masthead-bg: $card-bg !default;
 $masthead-height: 11.25rem !default;
 $masthead-image-blur: 1px !default;
-
-$exhibit-card-height: 350px !default;
-$exhibit-card-bg: $card-bg !default;
-$exhibit-card-border: $card-border-color !default;
-$exhibit-card-gutter: 30px !default;
-$exhibit-card-image-size: 269px !default;
-$exhibit-card-shadow: inset 2px 2px 5px -2px $exhibit-card-border !default;
-
 $navbar-transparent-border: $gray-500 !default;
 $navbar-transparent-page-bg: rgba(0, 0, 0, 0.5) !default;
 

data/app/components/spotlight/analytics/dashboard_component.html.erb

@@ -6,10 +6,10 @@
   <div>
     <%= form.label :start_date, I18n.t("spotlight.dashboards.analytics.start_date_label") %>
     <%= form.date_field :start_date, value: dates['start_date'], min: min_date, max: max_date %>
-    <%= form.label :end_date, I18n.t("spotlight.dashboards.analytics.end_date_label"), class: 'ml-2 ms-2' %>
+    <%= form.label :end_date, I18n.t("spotlight.dashboards.analytics.end_date_label"), class: 'ms-2' %>
     <%= form.date_field :end_date, value: dates['end_date'], min: min_date, max: max_date %>
   </div>
-  <div class="ml-auto ms-auto">
+  <div class="ms-auto">
     <%= form.submit I18n.t("spotlight.dashboards.analytics.submit_date_label"), class: 'btn btn-primary' %>
   </div>
 <% end %>
@@ -62,4 +62,4 @@
   <% end %>
 <% else %>
   <p><%= I18n.t("spotlight.dashboards.analytics.no_results", pageurl: page_url) %></p>
-<% end %>
+<% end %>

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

@@ -1,19 +1,13 @@
-<div class="container breadcrumbs-container" role="navigation" aria-label="<%= t('spotlight.breadcrumb.label') %>">
-  <div class="row">
-    <div class="col-md-12">
-      <nav>
-        <ul class="breadcrumb list-unstyled d-flex">
-          <% breadcrumbs.each do |crumb| %>
-          <li class="breadcrumb-item <%= crumb == breadcrumbs.last ? 'active' : '' %>">
-            <% if crumb.link? && crumb != breadcrumbs.last %>
-              <%= link_to crumb.name, path(crumb.path) %>
-            <% else %>
-              <%= crumb.name %>
-            <% end %>
-          </li>
-          <% end %>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</div>
+<nav class="container breadcrumbs-container" aria-label="<%= t('spotlight.breadcrumb.label') %>">
+  <ol class="breadcrumb">
+    <% breadcrumbs.each do |crumb| %>
+    <li class="breadcrumb-item <%= crumb == breadcrumbs.last ? 'active' : '' %>">
+      <% if crumb.link? && crumb != breadcrumbs.last %>
+        <%= link_to crumb.name, path(crumb.path) %>
+      <% else %>
+        <%= crumb.name %>
+      <% end %>
+    </li>
+    <% end %>
+  </ol>
+</nav>

data/app/components/spotlight/bulk_action_component.rb

@@ -3,7 +3,7 @@
 module Spotlight
   # Displays the "Bulk actions" button and dropdown
   class BulkActionComponent < ViewComponent::Base
-    def initialize(bulk_actions:, button_classes: 'btn btn-secondary dropdown-toggle')
+    def initialize(bulk_actions:, button_classes: 'btn btn-primary dropdown-toggle')
       @bulk_actions = bulk_actions
       @button_classes = button_classes
       super

data/app/components/spotlight/document_component.rb

@@ -5,7 +5,7 @@ module Spotlight
   # This overrides the title method to provide an edit link.
   class DocumentComponent < Blacklight::DocumentComponent
     def title
-      return safe_join([exhibit_edit_link, super, add_document_meta_content(@document)]) if current_exhibit
+      return safe_join([exhibit_edit_link, super]) if current_exhibit
 
       super
     end

data/app/components/spotlight/save_search_component.rb

@@ -3,7 +3,7 @@
 module Spotlight
   # Displays the "Save this search" button and modal
   class SaveSearchComponent < ViewComponent::Base
-    def initialize(button_classes: 'btn btn-secondary')
+    def initialize(button_classes: 'btn btn-outline-primary')
       @button_classes = button_classes
       super
     end

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

@@ -0,0 +1,17 @@
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title { t('spotlight.pages.form.select_image') } %>
+  <% component.with_body do %>
+    <div class='p-3 m-2'>
+      <input type="hidden" name="select_image_region">
+      <p class="instructions"><%= help_text.html_safe %></p>
+      <div class="mx-3" id="resource_block_iiif_cropper" data-behavior="iiif-cropper" data-cropper-key="select_image_<%=@block_item_id%>" data-index-id="<%=@index_id%>" data-crop-width="120" data-crop-height="120">
+    </div>
+  <% end %>
+   <% component.with_footer do %>
+    <div> 
+      <input type='button' class='btn btn-outline-primary' value='Cancel' data-bl-dismiss='modal'>
+      <input id='save-cropping-selection' type='button' class='btn btn-primary' value='Save changes' data-bl-dismiss='modal'>  
+    </div>
+  <% end %>
+<% end %>
+