blacklight-spotlight 3.0.0.rc2 → 3.0.0

data/app/assets/javascripts/spotlight/user/browse_group_categories.js

@@ -0,0 +1,59 @@
+(function( $ ){
+
+  $.fn.browseGroupCategories = function( options ) {
+    // Create some defaults, extending them with any options that were provided
+    var settings = $.extend( { }, options);
+    var $container, slider;
+
+    function init() {
+      var data = $container.data();
+      var sidebar = $container.data().sidebar;
+      var items = data.browseGroupCategoriesCount;
+      var dir = $('html').attr('dir');
+      var controls = $container.parent().find('.browse-group-categories-controls')[0];
+
+      slider = tns({
+        container: $container[0],
+        controlsContainer: controls,
+        loop: false,
+        nav: false,
+        items: 1,
+        slideBy: 'page',
+        textDirection: dir,
+        responsive: {
+          576: {
+            items: itemCount(items, sidebar)
+          }
+        }
+      });
+    }
+
+    // Destroy the slider instance, as tns will change the dom elements, causing some issues with turbolinks
+    function setupDestroy() {
+      document.addEventListener('turbolinks:before-cache', function() {
+        if (slider && slider.destroy) {
+          slider.destroy();
+        }
+      });
+    }
+
+    function itemCount(items, sidebar) {
+      if (items < 3) {
+        return items;
+      }
+      return sidebar ? 3 : 4;
+    }
+
+    return this.each(function() {
+      $container = $(this);
+      init();
+      setupDestroy();
+    });
+  }
+})( jQuery );
+
+Spotlight.onLoad(function() {
+  $('[data-browse-group-categories-carousel]').each(function(i, el) {
+    $(el).browseGroupCategories();
+  });
+});

data/app/assets/javascripts/spotlight/user/index.js

@@ -4,4 +4,5 @@
 //= require bootstrap/tooltip
 //= require bootstrap/popover
 //= require bootstrap/carousel
+//= require tiny-slider
 //= require_tree .

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

@@ -1,29 +1,44 @@
 Spotlight.onLoad(function(){
   $('.zpr-link').on('click', function() {
-    $('#blacklight-modal .modal-content').html('<div id="osd-modal-container"></div>');
+    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">',
-      '  <a id="osd-zoom-in"><%= Blacklight::Icon.new('add_circle').file_source.strip %></a>',
-      '  <a id="osd-zoom-out"><%= Blacklight::Icon.new('remove_circle').file_source.strip %></a>',
-      '  <a id="osd-home"><%= Blacklight::Icon.new('resize_small').file_source.strip %></a>',
-      '  <a id="osd-full-page"><%= Blacklight::Icon.new('custom_fullscreen').file_source.strip %></a>',
+      '<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(controls);
+
     $('#osd-modal-container').append('<div id="osd-div"></div>');
-    $('#osd-div').css('height', '400px');
+    $('#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",
-      homeButton:       "osd-home",
-      fullPageButton:   "osd-full-page",
-      nextButton:       "osd-next",
-      previousButton:   "osd-previous",
+      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')]
     })
   });

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

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

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

@@ -38,6 +38,14 @@ $image-overlay-max-height: 300px;
   }
 }
 
+#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

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

@@ -73,7 +73,6 @@ form.edit_solr_document {
   .bootstrap-tagsinput {
     @extend .clearfix;
     cursor: text;
-    display: block;
   }
   .bg-warning.form-text {
     font-size: 0.9em;
@@ -82,6 +81,7 @@ form.edit_solr_document {
 }
 
 .bootstrap-tagsinput {
+  display: block;
   .twitter-typeahead {
     width: auto;
   }
@@ -117,9 +117,35 @@ form.edit_solr_document {
   @extend .clearfix;
 }
 
-#save-this-search {
-  float:left;
-  margin-right: $spacer * 0.1;
+#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,

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

@@ -70,3 +70,12 @@
     display: inline;
   }
 }
+
+.download-csv {
+  align-items: flex-end;
+  display: flex;
+
+  .btn-primary {
+    margin-bottom: $spacer;
+  }
+}

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

@@ -70,10 +70,22 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar / 5) - $tile-margin;
   }
 
   .category-title {
-    font-size: $font-size-lg;
+    font-size: $h4-font-size;
     line-height: 1.2;
     margin: 0;
     padding: $spacer / 4;
+
+    @media (min-width: breakpoint-min("sm")) {
+      font-size: 1.125rem;
+    }
+
+    @media (min-width: breakpoint-min("md")) {
+      font-size: $h5-font-size;
+    }
+
+    @media (min-width: breakpoint-min("lg")) {
+      font-size: $h4-font-size;
+    }
   }
 
   .category-subtitle {
@@ -83,6 +95,10 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar / 5) - $tile-margin;
   .item-count {
     font-size: $font-size-base;
     text-transform: uppercase;
+
+    @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-min("lg")) {
+      font-size: $font-size-sm;
+    }
   }
 }
 
@@ -190,6 +206,23 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar / 5) - $tile-margin;
   }
 }
 
+[data-sidebar="true"] {
+  // Font size smaller at "lg" breakpoint only when there is a sidebar
+  .browse-category {
+    .category-title {
+      @media (min-width: breakpoint-min("lg")) and (max-width: breakpoint-min("xl")) {
+        font-size: $h5-font-size;
+      }
+    }
+
+    .item-count {
+      @media (min-width: breakpoint-min("lg")) and (max-width: breakpoint-min("xl")) {
+        font-size: $font-size-sm;
+      }
+    }
+  }
+}
+
 // Special cases where the sizing above doesn't work when there is a sidebar.
 // Note that "lg" with a sidebar has the same available width as "md"
 // without a sidebar.

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

@@ -0,0 +1,3 @@
+.modal-body .form-check-label {
+  margin-bottom: 0.5rem;
+}

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

@@ -114,3 +114,11 @@ tr.dd-item {
 .dd3-content .card-header {
   padding: .5rem 1rem
 }
+
+.dd3-content.tag {
+  .dd3-handle {
+    display: none;
+  }
+
+  padding-left: 0;
+}

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

@@ -5,7 +5,9 @@
 @import "spotlight/sir-trevor_overrides";
 @import "spotlight/attachments";
 @import "spotlight/pages";
+@import "spotlight/breadcrumbs";
 @import "spotlight/browse";
+@import "spotlight/browse_group_categories_block";
 @import "spotlight/header";
 @import "spotlight/footer";
 @import "spotlight/catalog";
@@ -17,6 +19,7 @@
 @import "spotlight/featured_browse_categories_block";
 @import "spotlight/item_text_block";
 @import "spotlight/uploaded_items_block";
+@import "spotlight/modals";
 @import "spotlight/multi_image_selector";
 @import "spotlight/multi_up_item_grid";
 @import "spotlight/slideshow_block";
@@ -31,6 +34,7 @@
 @import "spotlight/collapse_toggle";
 @import "spotlight/translations";
 @import "spotlight/utilities";
+@import "spotlight/view_larger";
 @import "spotlight/accessibility";
 
 

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

@@ -0,0 +1,22 @@
+#osd-modal-container {
+  .controls {
+    .custom-close-controls {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .zoom-controls {
+      bottom: 0;
+      position: absolute;
+      z-index: 999;
+    }
+    svg {
+      fill: $white;
+    }
+  }
+  #osd-div {
+    background: $gray-700;
+    height: calc(100vh - 80px);
+  }
+}

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

@@ -0,0 +1,92 @@
+@import "tiny-slider";
+
+.browse-group-categories-block {
+  padding-bottom: $spacer * .75;
+  padding-top: $spacer * .75;
+  
+  .browse-categories .browse-category {
+    .category-caption {
+      z-index: 100;
+    }
+
+    .hover-overlay {
+      height: 100%;
+      position: absolute;
+      width: 100%;
+    }
+
+    &:hover {
+      .hover-overlay {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
+      }
+    }
+  }
+  
+  .spotlight-flexbox.browse-categories .box {
+    display: flex;
+  }
+
+  .browse-group-categories-controls {
+    list-style: none;
+    li {
+      display: inline-block;
+      cursor: pointer;
+    }
+
+    .blacklight-icon-arrow-alt-circle-left, .blacklight-icon-arrow-alt-circle-right {
+      display: inline-block;
+      fill: $gray-600;
+      height: 44px;
+      width: 44px;
+      
+      &:hover,&:focus {
+        fill: $gray-700;
+      }
+    }
+
+    li[aria-disabled="true"] {
+      cursor: auto;
+    }
+
+    [aria-disabled="true"] {
+      .blacklight-icon-arrow-alt-circle-left, .blacklight-icon-arrow-alt-circle-right {
+        fill: $gray-400;
+
+        &:hover,&:focus {
+          fill: $gray-400;
+        }
+      }
+    }
+  }
+
+  // Coming from tiny-slider, make sure these disappear when navigating via turbolinks
+  .tns-controls {
+    display: none;
+  }
+
+  @media screen and (min-width: breakpoint-min("md")) {
+    .browse-group-categories-controls {
+      .blacklight-icon-arrow-alt-circle-left, .blacklight-icon-arrow-alt-circle-right {
+        height: 32px;
+        width: 32px;
+      }
+    }
+
+    &[data-browse-group-categories-count="2"],&[data-browse-group-categories-count="3"] {
+      .browse-group-categories-controls {
+        display: none !important;
+      }
+    }
+  }
+}
+
+[dir="rtl"] {
+  .browse-group-categories-block .blacklight-icon-arrow-alt-circle-left, .blacklight-icon-arrow-alt-circle-right{
+    transform: rotate(180deg);
+  }
+  // Hack to override overflow issue not fixed in RTL upstream in tiny-slider
+  .tns-visually-hidden {
+    left: 0;
+    right: -10000em;
+  }
+}

data/app/assets/stylesheets/spotlight/typeahead.css

@@ -41,37 +41,37 @@
   .tt-suggestion {
     font-size: 18px;
     line-height: 24px;
-    padding: 3px 20px 3px 100px;
+    padding: 3px 1rem 3px 1rem;
     margin-bottom: 1em;
 
     &.tt-cursor {
       color: #fff;
       background-color: #0097cf;
     }
-    p {
-      margin: 0;
-    }
-    .document-thumbnail {
-      float: left;
-      width: 60px;
-      padding: 0;
-      margin: 0;
-      margin-left: -80px;
-      position: relative;
+  }
+}
+
+.tt-dataset-tags {
+  p {
+    white-space: nowrap !important;
+  }
+}
 
-      img {
-        max-width: 60px;
-        max-height: 60px;
-      }
+.autocomplete-item {
+  display: flex;
+
+  p {
+    margin: 0;
+  }
+  .document-thumbnail {
+    margin-right: 1rem;
+    min-width: 60px;
+    padding: 0;
+    width: 60px;
 
-      img:hover {
-        position: absolute;
-        right: -3px;
-        top: -3px;
-        max-width: 160px;
-        max-height: 100px;
-        border: 3px solid theme-colors("info");
-      }
+    img {
+      max-width: 60px;
+      max-height: 60px;
     }
   }
 }