spotlight-frontend 3.5.0-beta.1

package/app/assets/javascripts/spotlight/user/zpr_links.js.erb

@@ -0,0 +1,45 @@
+Spotlight.onLoad(function(){
+  $('.zpr-link').on('click', function() {
+    var modalDialog = $('#blacklight-modal .modal-dialog');
+    var modalContent = modalDialog.find('.modal-content')
+    modalDialog.removeClass('modal-lg')
+    modalDialog.addClass('modal-xl')
+    modalContent.html('<div id="osd-modal-container"></div>');
+    var controls = [
+      '<div class="controls d-flex justify-content-center justify-content-md-end">',
+      '  <div class="custom-close-controls pr-3 pt-3">',
+      '    <button type="button" class="btn btn-dark" data-dismiss="modal" aria-hidden="true"><%= Blacklight::Icon.new('close').file_source.strip %></button>',
+      '  </div>',
+      '  <div class="zoom-controls mb-3 mr-md-3">',
+      '    <button id="osd-zoom-in" type="button" class="btn btn-dark"><%= Blacklight::Icon.new('zoom_in').file_source.strip %></button>',
+      '    <button id="osd-zoom-out" type="button" class="btn btn-dark"><%= Blacklight::Icon.new('zoom_out').file_source.strip %></button>',
+      '  </div>',
+      '  <div id="empty-div-required-by-osd"></div>',
+      '</div>'
+    ].join("\n");
+
+
+    $('#osd-modal-container').append('<div id="osd-div"></div>');
+    $('#osd-modal-container').append(controls);
+
+    $('#blacklight-modal').modal('show');
+    
+    $('#blacklight-modal').one('hidden.bs.modal', function (event) {
+      modalDialog.removeClass('modal-xl')
+      modalDialog.addClass('modal-lg')
+    });
+
+    OpenSeadragon({
+      id: 'osd-div',
+      zoomInButton: "osd-zoom-in",
+      zoomOutButton: "osd-zoom-out",
+      // This is a hack where OpenSeadragon (if using mapped buttons) requires you
+      // to map all of the buttons.
+      homeButton: "empty-div-required-by-osd",
+      fullPageButton: "empty-div-required-by-osd",
+      nextButton: "empty-div-required-by-osd",
+      previousButton: "empty-div-required-by-osd",
+      tileSources: [$(this).data('iiif-tilesource')]
+    })
+  });
+});

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

@@ -0,0 +1,8 @@
+// Global accessibility overrides
+
+// Increase visibility of Firefox focus indicator
+@-moz-document url-prefix() {
+  :focus {
+    outline: $input-focus-border-color auto 5px;
+  }
+}

package/app/assets/stylesheets/spotlight/_attachments.css

@@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/

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

@@ -0,0 +1,82 @@
+.dd-item td {
+  &:first-child {
+    padding: 0;
+
+    .edit-in-place {
+      cursor: text;
+      color: inherit;
+      text-decoration: none;
+    }
+    &:hover {
+      @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;
+
+    }
+
+    .dd3-handle:before {
+      top: 3px;
+    }
+  }
+
+  &.checkbox-cell  {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    label {
+      margin-left: $spacer;
+      margin-right: $spacer;
+      padding-left: 0px;
+      padding-bottom: $table-cell-padding;
+      padding-top: 1 + $table-cell-padding;
+      display: block;
+    }
+    input {
+      display: inline-block;
+      float: none;
+      margin: 0;
+    }
+  }
+}
+
+.dd-table {
+  margin-top: 2 * $spacer;
+
+  th {
+    &:first-child {
+      padding-left: 40px;
+    }
+  }
+}
+
+#nested-fields {
+  margin-bottom: 1em;
+
+  .metadata_fields {
+    .checkbox-cell {
+      vertical-align: middle;
+    }
+  }
+
+  .metadata-select {
+    display: inline-block;
+    min-width: 72px;
+  }
+}
+
+.disabled-sort-option, .disabled-search-option {
+  .card {margin-bottom: 0;}
+}
+
+.sort_fields_admin, .search_fields_admin {
+  .card-title {
+    display: inline;
+  }
+}

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

@@ -0,0 +1,21 @@
+.submit-search-text {
+  @extend .sr-only;
+}
+
+.search-query-form {
+  z-index: 1;
+
+  .input-group {
+    width: 100%;
+  }
+  
+  .search-btn {
+    max-height: 2.375rem;
+  }
+
+  .search_field {
+    background: transparent;
+    border: none;
+    font-size: $font-size-sm;
+  }
+}

package/app/assets/stylesheets/spotlight/_bootstrap_overrides.scss

@@ -0,0 +1,105 @@
+.search-input-group {
+  width: auto;
+}
+
+.page-header {
+  @extend .mb-4;
+
+  border-bottom: none;
+  small {
+    @extend .text-muted;
+    font-size: $h2-font-size;
+    display: block;
+  }
+}
+
+.navbar-sm {
+  li > a {
+    padding-top:$spacer !important;
+    padding-bottom:$spacer !important;
+  }
+
+  margin-top: -10px;
+}
+
+.page-sidebar {
+  margin-bottom: 24px;
+
+  .nav-heading {
+    @extend .h5;
+    @extend .border-bottom;
+    @extend .border-secondary;
+
+    padding-bottom: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding-left: 0;
+    padding-top: 0;
+  }
+
+  .nav-link {
+    padding: 0rem 1rem;
+    padding-left: 0px;
+  }
+
+  .nav-link.active {
+    color: $black;
+
+    &:hover {
+      background-color: inherit;
+    }
+  }
+}
+
+.nav-heading {
+  margin: 0;
+  padding:$nav-link-padding-x $nav-link-padding-y;
+}
+
+.btn-nav {
+  margin:$nav-link-padding-x $nav-link-padding-y;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  .badge {
+    font-size: $font-size-base;
+    vertical-align: super;
+  }
+}
+
+#content > .page-header:first-child {
+  margin-top: 0;
+}
+
+#main-container .nav {
+  margin-bottom: $line-height-lg * 1rem;
+}
+
+.nav-tabs {
+  .nav-link.active {
+    font-weight: 600;
+  }
+}
+
+fieldset {
+  margin-bottom: $spacer * 2;
+  margin-top: $spacer * 1;
+}
+
+legend {
+  margin-bottom: $spacer;
+}
+
+small.form-text {
+  margin-bottom: $spacer;
+  margin-top: $spacer * 0.3125;
+}
+
+div.form-check + input[type="file"] {
+  margin-top: $spacer;
+}
+
+@media (max-width: breakpoint-max("md")) {
+  aside.col-md-3 {
+    padding-left: 0;
+  }
+}

package/app/assets/stylesheets/spotlight/_breadcrumbs.scss

@@ -0,0 +1,6 @@
+.truncated-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 30ex;
+}

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

@@ -0,0 +1,158 @@
+$image-overlay-max-height: 300px;
+
+.long-description-text {
+  margin: ($spacer * 2) 0;
+  width: 40em;
+}
+
+.very-long-description-text {
+  width: auto;
+
+  @media (min-width: breakpoint-min("md")) {
+    column-gap: 3em;
+    column-width: 20em;
+  }
+}
+
+.blacklight-browse {
+  .sort-pagination {
+    .page-links {
+      display: none;
+    }
+
+    .search-widgets {
+      margin-left: auto;
+    }
+  }
+}
+
+.blacklight-browse-show {
+  .subtitle {
+    padding-right: $spacer;
+
+    &::before {
+      content: " \000B7 ";
+      color: $text-muted;
+      padding-right: $spacer / 2;
+    }
+  }
+}
+
+#main-container .browse-group-navigation.nav {
+  margin-bottom: $spacer;
+
+  .nav-link {
+    margin-bottom: $spacer * .75;
+  }
+}
+
+.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;
+  }
+
+  .image-overlay {
+    border: 2px solid $gray-600;
+    border-radius: $border-radius-lg;
+    max-height: 240px;
+    min-height: 140px;
+    overflow: hidden;
+    position: relative;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .text-overlay {
+    position: absolute;
+    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));
+    color: $white;
+    padding: 8%;
+    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;
+      }
+
+      small {
+        display: block;
+        color: $white;
+        margin-top: $spacer;
+        text-transform: uppercase;
+      }
+    }
+
+    &:hover {
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
+    }
+  }
+
+  @media screen and (max-width: breakpoint-max("sm")) {
+    $image-overlay-max-height: 240px;
+    .image-overlay {
+      margin: 10px auto;
+      max-height: $image-overlay-max-height;
+      max-width: 350px;
+    }
+    .text-overlay .browse-category-title {font-size: $h3-font-size;}
+  }
+  @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
+    $image-overlay-max-height: 240px;
+    .image-overlay {max-height: $image-overlay-max-height;}
+  }
+  @media screen and (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
+    $image-overlay-max-height: 250px;
+    .text-overlay .browse-category-title {font-size: $h4-font-size;}
+    .image-overlay {max-height: $image-overlay-max-height;}
+  }
+  @media screen and (min-width: breakpoint-min("lg")) {
+    .image-overlay {max-height: $image-overlay-max-height;}
+  }
+}
+
+.search-box-container {
+  margin: 0 auto;
+  width: 100%;
+
+  .col-form-label {
+    text-align: right;
+  }
+
+  .browse-search-form {
+    .btn-reset {
+      background-color: transparent;
+      display: none;
+      left: -40px;
+      z-index: 20;
+    }
+
+    .search-btn {
+      left: -40px;
+      z-index: 30;
+    }
+  }
+
+  .browse-search-expand {
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,161 @@
+#documents.table {
+  font-size: $font-size-base;
+
+  .thumbnail-column {
+    box-sizing: content-box;
+    min-width: 60px;
+
+  }
+
+  .document-thumbnail {
+    border: none;
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  .document-thumbnail img {
+    border: 1px solid $gray-600;
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+  }
+
+  .document-counter {display: none;}
+
+  .index_title {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .checkbox.toggle_visibility {
+    padding-top: 0;
+  }
+}
+
+#documents.documents-list {
+  .document-thumbnail img {
+    max-width: 100px;
+  }
+}
+
+#document {
+  ul.tags {
+    text-align: center;
+    li {
+      @extend .badge;
+      @extend .badge-secondary;
+      a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.document, tr.doc-row, li.dd-item, .autocomplete-item {
+  &.blacklight-private {
+    .index_title, h1, .card-title, .autocomplete-title {
+      @include private-label;
+    }
+  }
+}
+
+.blacklight-catalog-admin {
+  .add-items-nav {
+    margin-bottom: $spacer;
+  }
+
+  .sort-pagination {
+    border-bottom: 0;
+  }
+}
+
+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 {
+  .img-thumbnail {
+    @extend .col-md-6;
+  }
+
+  .edit_solr_document {
+    float: right;
+    @extend .col-md-6;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+  }
+
+  .tags, .dl-horizontal {
+    @extend .col-md-6;
+  }
+
+  #document {
+    @extend .clearfix;
+  }
+}
+
+.edit_solr_document {
+  @extend .clearfix;
+}
+
+#sortAndPerPage {
+  align-items: flex-end;
+}
+
+.search-widgets {
+  align-items: flex-start;
+  display: flex;
+  @media (min-width: breakpoint-min("md")) {
+    justify-content: flex-end;
+  }
+  flex-wrap: wrap;
+  width: 60%;
+  margin-left: -1 * $spacer * 0.1;
+
+  .btn, .btn-group {
+    margin-left: $spacer * 0.1;
+    margin-top: $spacer * 0.25;
+  }
+}
+
+.curator-actions {
+  align-items: flex-start;
+  display: flex;
+  @media (min-width: breakpoint-min("md")) {
+    justify-content: flex-end;
+  }
+  order: -1;
+  width: 100%;
+  margin-left: -1 * $spacer * 0.1;
+}
+
+#document,
+.document {
+  .blacklight-exhibit_tags a {
+    @extend .badge;
+    @extend .badge-secondary;
+
+    &:not(:last-child) {
+      @extend .mr-2;
+    }
+  }
+}

package/app/assets/stylesheets/spotlight/_collapse_toggle.scss

@@ -0,0 +1,14 @@
+// Rotate collapse-chevron element (has a ❯ in it)
+// with the previous siblings collapsed status
+.btn.collapse-toggle {
+  & + .collapse-chevron {
+    display: inline-block;
+    text-align: right;
+    transform: rotate(90deg);
+    width: 16px;
+  }
+  &.collapsed + .collapse-chevron {
+    text-align: left;
+    transform: none;
+  }
+}

package/app/assets/stylesheets/spotlight/_croppable.scss

@@ -0,0 +1,4 @@
+.leaflet-container {
+  height: 400px;
+  margin: 0;
+}