blacklight-spotlight 3.0.0.rc1 → 3.0.0.rc6

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,19 +117,45 @@ form.edit_solr_document {
   @extend .clearfix;
 }
 
-#save-this-search {
-  float:left;
-  margin-right: $spacer * 0.1;
+#sortAndPerPage {
+  align-items: flex-end;
 }
 
-#document {
-  dd.blacklight-exhibit_tags {
-    color: $body-bg;
-    line-height: 2em;
+.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;
+    }
   }
 }

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

@@ -1,141 +1,269 @@
 $featured-browse-category-border-color: $border-color;
 $featured-browse-category-caption-color: $white;
-$container-tablet: 720px;
-$container-desktop: 960px;
-$container-large-desktop: 1140px;
-// Large desktop
-$featured-browse-category-margin-large-desktop: 15px;
-$no-sidebar-large-desktop-large-image-width: floor(($container-large-desktop)/ 3) - $featured-browse-category-margin-large-desktop;
-$no-sidebar-large-desktop-medium-image-width: floor(($container-large-desktop)/ 5) - $featured-browse-category-margin-large-desktop;
-
-$with-sidebar-large-desktop-width: floor($container-large-desktop - ($container-large-desktop)/ 4);  // sidebar space to remove
-$with-sidebar-large-desktop-large-image-width: floor(($with-sidebar-large-desktop-width)/ 2) - ($featured-browse-category-margin-large-desktop * 2);
-$with-sidebar-large-desktop-medium-image-width: 265px;
-
-// Desktop
-$featured-browse-category-margin-desktop: 20px;
-$no-sidebar-desktop-large-image-width: floor(($container-desktop)/ 3) - $featured-browse-category-margin-desktop;
-
-$with-sidebar-desktop-width: floor($container-desktop - ($container-desktop)/ 4);  // sidebar space to remove
-$with-sidebar-desktop-large-image-width: floor(($with-sidebar-desktop-width)/ 2) - ($featured-browse-category-margin-desktop * 2);
-$with-sidebar-desktop-medium-image-width: floor(($with-sidebar-desktop-width)/ 3) - ($featured-browse-category-margin-desktop);
-
-// Tablet
-$featured-browse-category-margin-tablet: 20px;
-$no-sidebar-tablet-large-image-width: floor(($container-tablet)/ 3) - $featured-browse-category-margin-tablet;
-$with-sidebar-tablet-large-image-width: floor(($container-tablet)/ 2) - ($featured-browse-category-margin-tablet * 2);
-
-// Extra small
-$no-sidebar-xs-image-width: 190px;
-$with-sidebar-xs-image-width: $no-sidebar-xs-image-width;
-
-// Height adjustments
-$aspect-ratio-factor-large-image: 0.75; // 4:3 width:height
-$aspect-ratio-factor-medium-image: 1; // 1:1 width: height
+
+// These are the widths of the main content area at each viewport width
+$container-sm: 510px; // (Bootstrap 4 "sm")
+$container-md: 690px; // (Bootstrap 4 "md")
+$container-lg: 930px; // (Bootstrap 4 "lg")
+$container-xl: 1100px; // (Bootstrap 4 "xl")
+$container-xl-sidebar: 825px; // ("xl" main content area when sidebar present)
+
+// The aspect ratio factor determines the height of the tile.
+// Can use different values because images are background images
+// and will fit the container without distortion.
+$aspect-ratio-factor-4x3: 0.75; // 4:3 width:height
+$aspect-ratio-factor-1x1: 1; // 1:1 width: height
+
+// Horizontal space between tiles
+$tile-margin: 16px;
+
+// Limits size of tile in cases where calculations create unreasonably large tile
+$maximum-tile-width: 290px;
+
+// `xs` viewport width; always display one full-width tile, wrapping others
+$xs-one-tile-width: $maximum-tile-width;
+
+// `sm` viewport width
+$sm-one-tile-width: $xs-one-tile-width;
+$sm-two-tile-width: ($container-sm / 2) - $tile-margin;
+$sm-three-tile-width: ($container-sm / 3) - $tile-margin;
+
+// `md` viewport width
+$md-one-tile-width: $xs-one-tile-width;
+$md-two-tile-width: ($container-md/ 2) - $tile-margin;
+$md-three-tile-width: ($container-md / 3) - $tile-margin;
+
+// `lg` viewport width
+$lg-one-tile-width: $xs-one-tile-width;
+$lg-two-tile-width: ($container-lg/ 2) - $tile-margin;
+$lg-three-tile-width: ($container-lg / 3) - $tile-margin;
+$lg-four-tile-width: ($container-lg / 4) - $tile-margin;
+$lg-five-tile-width: ($container-lg / 5) - $tile-margin;
+
+// `xl` viewport width
+$xl-one-tile-width: $xs-one-tile-width;
+$xl-two-tile-width: ($container-xl/ 2) - $tile-margin;
+$xl-three-tile-width: ($container-xl / 3) - $tile-margin;
+$xl-four-tile-width: ($container-xl / 4) - $tile-margin;
+$xl-five-tile-width: ($container-xl / 5) - $tile-margin;
+
+// `xl` with sidebar viewport width
+$xl-sidebar-three-tile-width: ($container-xl-sidebar / 3) - $tile-margin;
+$xl-sidebar-four-tile-width: ($container-xl-sidebar / 4) - $tile-margin;
+$xl-sidebar-five-tile-width: ($container-xl-sidebar / 5) - $tile-margin;
 
 .browse-category {
   background-size: cover;
   background-position: center;
+  background-repeat: no-repeat;
   border: 2px solid $featured-browse-category-border-color;
   border-radius: $border-radius-lg;
   position: relative;
-  float: left;
-  background-repeat: no-repeat;
+
   .category-caption {
+    bottom: 16px; // assumes default font-size of 16px, using browser default of 1 rem == 16px
     color: $featured-browse-category-caption-color;
     position: absolute;
-    bottom: 16px; // assumes default font-size of 16px, using browser default of 1 rem == 16px
     text-align: center;
-    text-shadow: 0 1px 0 #000000;
+    text-shadow: 0 1px 0 $black;
     width: 100%;
   }
+
   .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 {
     display: block;
   }
+
   .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;
+    }
   }
 }
 
-[data-sidebar="false"] {
-  &.categories-1, &.categories-2, &.categories-3 {
+.spotlight-flexbox.browse-categories {
+  justify-content: space-around;
+
+  .box {
+    flex: none;
+    margin-bottom: 1rem;
+    min-width: 150px;
+    padding: 0;
+  }
+}
+
+// Most tile sizing works regardless of sidebar or not, because
+// only "lg" and "xl" have a sidebar, and "lg" with a sidebar
+// is the same width as "md" without a sidebar.
+[data-sidebar="false"],
+[data-sidebar="true"] {
+  &.categories-1, &.categories-2, &.categories-3,
+  &.categories-4, &.categories-5 {
     .browse-category {
-      width: $no-sidebar-xs-image-width;
-      height: $no-sidebar-xs-image-width * $aspect-ratio-factor-large-image;
-      @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
-        width: $no-sidebar-tablet-large-image-width;
-        height: $no-sidebar-tablet-large-image-width * $aspect-ratio-factor-large-image;
+      max-width: $maximum-tile-width;
+      max-height: $maximum-tile-width * $aspect-ratio-factor-4x3;
+      width: $xs-one-tile-width;
+      height: $xs-one-tile-width * $aspect-ratio-factor-4x3;
+    }
+  }
+  &.categories-2 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-two-tile-width;
+        height: $sm-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
       }
-      @media (min-width: breakpoint-min("md")) and (min-width: breakpoint-min("lg")) {
-        width: $no-sidebar-desktop-large-image-width;
-        height: $no-sidebar-desktop-large-image-width * $aspect-ratio-factor-large-image;
+    }
+  }
+  &.categories-3 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-three-tile-width;
+        height: $sm-three-tile-width * $aspect-ratio-factor-4x3;
       }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
       @media (min-width: breakpoint-min("lg")) {
-        width: $no-sidebar-large-desktop-large-image-width;
-        height: $no-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image;
+        width: $lg-three-tile-width;
+        height: $lg-three-tile-width * $aspect-ratio-factor-4x3;
       }
     }
   }
-  &.categories-4, &.categories-5 {
+  &.categories-4 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-two-tile-width;
+        height: $sm-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("lg")) {
+        width: $lg-four-tile-width;
+        height: $lg-four-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-four-tile-width;
+        height: $xl-four-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+  &.categories-5 {
     .browse-category {
-      width: $no-sidebar-large-desktop-medium-image-width;
-      height: $no-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
-      @media (max-width: breakpoint-max("sm")) {
-        width: $no-sidebar-xs-image-width;
-        height: $no-sidebar-xs-image-width * $aspect-ratio-factor-medium-image;
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-three-tile-width;
+        height: $sm-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("lg")) {
+        width: $lg-five-tile-width;
+        height: $lg-five-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-five-tile-width;
+        height: $xl-five-tile-width * $aspect-ratio-factor-4x3;
       }
     }
-    .category-4 {
-      @extend .d-sm-none;
+  }
+}
+
+[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;
+      }
     }
-    .category-5 {
-      @extend .d-md-none;
-      @extend .d-sm-none;
+
+    .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-sidebar="true"] {
-  &.categories-1, &.categories-2 {
+  &.categories-3 {
     .browse-category {
-      width: $with-sidebar-xs-image-width;
-      height: $with-sidebar-xs-image-width * $aspect-ratio-factor-large-image;
-      @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
-        width: $with-sidebar-tablet-large-image-width;
-        height: $with-sidebar-tablet-large-image-width * $aspect-ratio-factor-large-image;
+      @media (min-width: breakpoint-min("lg")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
       }
-      @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
-        width: $with-sidebar-desktop-large-image-width;
-        height: $with-sidebar-desktop-large-image-width * $aspect-ratio-factor-large-image;
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-sidebar-three-tile-width;
+        height: $xl-sidebar-three-tile-width * $aspect-ratio-factor-4x3;
       }
+    }
+  }
+  &.categories-4 {
+    .browse-category {
       @media (min-width: breakpoint-min("lg")) {
-        width: $with-sidebar-large-desktop-large-image-width;
-        height: $with-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image;
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-sidebar-four-tile-width;
+        height: $xl-sidebar-four-tile-width * $aspect-ratio-factor-4x3;
       }
     }
   }
-  &.categories-3, &.categories-4, &.categories-5 {
-   .browse-category {
-    width: $with-sidebar-desktop-medium-image-width;
-    height: $with-sidebar-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
-      @media (max-width: breakpoint-max("sm")) {
-        width: $with-sidebar-xs-image-width;
-        height: $with-sidebar-xs-image-width * $aspect-ratio-factor-medium-image;
-      }
+  &.categories-5 {
+    .browse-category {
       @media (min-width: breakpoint-min("lg")) {
-        width: $with-sidebar-large-desktop-medium-image-width;
-        height: $with-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-sidebar-five-tile-width;
+        height: $xl-sidebar-five-tile-width * $aspect-ratio-factor-4x3;
       }
     }
   }
-  .category-4, .category-5 {
-    display: none;
-  }
 }