blacklight-spotlight 3.0.0.alpha.7 → 3.0.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61d1cc793dd74339242e08e5a0c66ba33ebde6736f25423fa6315bc52ae7fcbf
-  data.tar.gz: 00a54261d57877c5610e244851d82d32b0700c01cb919af5d2ac17481d5e7de9
+  metadata.gz: 7004b788de24eca3d6f0b429b184c56ef6831ca2c161f5472cd6e9b5279bc9d6
+  data.tar.gz: fc95ee6947c984a4789a449986f3d6f2c7d6c10005c5f42039c89b6690cb92eb
 SHA512:
-  metadata.gz: 50cba1c7d20e658be91c54ff2c56f9c296b9b521df5d1054e202d6eba74d6f3dbd67dfeec7701e4061e2db0f26e66e0241e3494adea2002280ad68a787a06d2b
-  data.tar.gz: cd32bcc19cfa68295fcc40b2969e47a0623dbe750e3bcb4e3d2fb86b3825f7897a10da3ba87fd4ef3b5f855bb1f7ce875fbca16c12087a53456ca40120a4f0e3
+  metadata.gz: 48af92f233fc293a2d3b1fb3783f12102e0851d0fcd5ddfd188e9e2313b3389742efcd67cc256186e3252cfe0722bc0a0f961bd1665f591396add0bccc22437f
+  data.tar.gz: 5073b54f60041abff381552ff072cfe1c07e6faa61719500c2f85a0e5de8e72a5852dc6571452225c5a27573cb76546b8c703b3f2149e2e4b3e57ab3a82fbcc9

data/README.md

@@ -9,7 +9,7 @@ Read more about what Spotlight is, our motivations for creating it, and how to i
 
 ## Requirements
 
-1. Ruby (2.3.0 or greater)
+1. Ruby (2.5.0 or greater)
 2. Rails (5.1 or greater)
 3. Java (7 or greater) *for Solr*
 4. ImageMagick (http://www.imagemagick.org/script/index.php) due to [carrierwave](https://github.com/carrierwaveuploader/carrierwave#adding-versions)
@@ -93,7 +93,7 @@ Spotlight ships with [`i18n-tasks`](https://github.com/glebm/i18n-tasks) to help
 $ bundle exec i18n-tasks health
 ```
 
-See [developer-facing instructions for enabling translation](https://github.com/projectblacklight/spotlight/wiki/Translations) on the wiki. 
+See [developer-facing instructions for enabling translation](https://github.com/projectblacklight/spotlight/wiki/Translations) on the wiki.
 
 ## Community
 

data/app/assets/javascripts/spotlight/admin/blocks/browse_block.js

@@ -10,7 +10,7 @@ SirTrevor.Blocks.Browse = (function(){
     autocomplete_url: function() {
       return $(this.inner).closest('form[data-autocomplete-exhibit-searches-path]').data('autocomplete-exhibit-searches-path').replace("%25QUERY", "%QUERY");
     },
-    autocomplete_template: function() { return '<div class="autocomplete-item{{#unless published}} blacklight-private{{/unless}}">{{#if thumbnail_image_url}}<div class="document-thumbnail"><img class="img-thumbnail" src="{{thumbnail_image_url}}" /></div>{{/if}}<span class="autocomplete-title">{{title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' },
+    autocomplete_template: function() { return '<div class="autocomplete-item{{#unless published}} blacklight-private{{/unless}}">{{#if thumbnail_image_url}}<div class="document-thumbnail"><img class="img-thumbnail" src="{{thumbnail_image_url}}" /></div>{{/if}}<span class="autocomplete-title">{{full_title}}</span><br/><small>&nbsp;&nbsp;{{description}}</small></div>' },
 
     bloodhoundOptions: function() {
       return {
@@ -21,6 +21,60 @@ SirTrevor.Blocks.Browse = (function(){
       };
     },
 
+    _itemPanel: function(data) {
+      var index = "item_" + this.globalIndex++;
+      var checked;
+      if (data.display == "true") {
+        checked = "checked='checked'"
+      } else {
+        checked = "";
+      }
+      var resource_id = data.slug || data.id;
+      var markup = [
+          '<li class="field form-inline dd-item dd3-item" data-resource-id="' + resource_id + '" data-id="' + index + '" id="' + this.formId("item_" + data.id) + '">',
+            '<input type="hidden" name="item[' + index + '][id]" value="' + resource_id + '" />',
+            '<input type="hidden" name="item[' + index + '][full_title]" value="' + (data.full_title || data.title) + '" />',
+            '<input data-property="weight" type="hidden" name="item[' + index + '][weight]" value="' + data.weight + '" />',
+              '<div class="card d-flex dd3-content">',
+                '<div class="dd-handle dd3-handle"><%= i18n.t("blocks:resources:panel:drag") %></div>',
+                '<div class="card-header item-grid">',
+                  '<div class="d-flex">',
+                    '<div class="checkbox">',
+                      '<input name="item[' + index + '][display]" type="hidden" value="false" />',
+                      '<input name="item[' + index + '][display]" id="'+ this.formId(this.display_checkbox + '_' + data.id) + '" type="checkbox" ' + checked + ' class="item-grid-checkbox" value="true"  />',
+                      '<label class="sr-only" for="'+ this.formId(this.display_checkbox + '_' + data.id) +'"><%= i18n.t("blocks:resources:panel:display") %></label>',
+                    '</div>',
+                    '<div class="pic">',
+                      '<img class="img-thumbnail" src="' + (data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg"))) + '" />',
+                    '</div>',
+                    '<div class="main">',
+                      '<div class="title card-title">' + (data.full_title || data.title) + '</div>',
+                      '<div>' + (data.slug || data.id) + '</div>',
+                    '</div>',
+                    '<div class="remove float-right">',
+                      '<a data-item-grid-panel-remove="true" href="#"><%= i18n.t("blocks:resources:panel:remove") %></a>',
+                    '</div>',
+                  '</div>',
+                '</div>',
+              '</div>',
+            '</li>'
+      ].join("\n");
+
+      var panel = $(_.template(markup)(this));
+      var context = this;
+
+      $('.remove a', panel).on('click', function(e) {
+        e.preventDefault();
+        $(this).closest('.field').remove();
+        context.afterPanelDelete();
+
+      });
+
+      this.afterPanelRender(data, panel);
+
+      return panel;
+    },
+
     item_options: function() { return [
       '<label>',
         '<input type="hidden" name="display-item-counts" value="false" />',

data/app/assets/javascripts/spotlight/admin/blocks/uploaded_items_block.js

@@ -85,9 +85,13 @@ SirTrevor.Blocks.UploadedItems = (function(){
                 '</div>',
                 '<div class="main form-horizontal">',
                   '<div class="title card-title">' + dataTitle + '</div>',
-                  '<div class="field">',
+                  '<div class="field row mr-3">',
                     '<label for="' + this.formId('caption_' + dataId) + '" class="col-form-label col-md-3"><%= i18n.t("blocks:uploaded_items:caption") %></label>',
-                    '<input type="text" class="form-control" id="' + this.formId('caption_' + dataId) + '" name="item[' + index + '][caption]" data-field="caption"/>',
+                    '<input type="text" class="form-control col" id="' + this.formId('caption_' + dataId) + '" name="item[' + index + '][caption]" data-field="caption"/>',
+                  '</div>',
+                  '<div class="field row mr-3">',
+                    '<label for="' + this.formId('link_' + dataId) + '" class="col-form-label col-md-3"><%= i18n.t("blocks:uploaded_items:link") %></label>',
+                    '<input type="text" class="form-control col" id="' + this.formId('link_' + dataId) + '" name="item[' + index + '][link]" data-field="link"/>',
                   '</div>',
                 '</div>',
                 '<div class="remove float-right">',
@@ -99,6 +103,7 @@ SirTrevor.Blocks.UploadedItems = (function(){
 
       var panel = $(_.template(markup)(this));
       panel.find('[data-field="caption"]').val(data.caption);
+      panel.find('[data-field="link"]').val(data.link);
       var context = this;
 
       $('.remove a', panel).on('click', function(e) {

data/app/assets/javascripts/spotlight/admin/crop.es6

@@ -40,6 +40,12 @@ export default class Crop {
     this.renderCropperMap();
 
     if (this.imageLayer) {
+      // Force a broken layer's container to be an element before removing.
+      // Code in leaflet-iiif land calls delete on the image layer's container when removing,
+      // which errors if there is an issue fetching the info.json and stops further necessary steps to execute.
+      if(!this.imageLayer._container) {
+        this.imageLayer._container = $('<div></div>');
+      }
       this.cropperMap.removeLayer(this.imageLayer);
     }
 
@@ -269,6 +275,11 @@ export default class Crop {
 
   successHandler(data, stat, xhr) {
     this.setIiifFields({ tilesource: data.tilesource });
+    this.setUploadId(data.id);
+  }
+
+  setUploadId(id) {
+    $('#' + this.formPrefix + "_upload_id").val(id);
   }
 
   aspectRatioPreservingRectangleEditor(aspect) {

data/app/assets/javascripts/spotlight/admin/sir-trevor/block_controls.js

@@ -40,19 +40,28 @@
       }
     }
 
-    return Object.keys(groups).reduce(function(memo, groupKey) {
-      var group   = groups[groupKey];
-      var groupEl = $("<div class='st-controls-group'><div class='st-group-col-form-label'>" + groupKey + "</div></div>");
+    function generateBlock(groups, key) {
+      var group   = groups[key];
+      var groupEl = $("<div class='st-controls-group'><div class='st-group-col-form-label'>" + key + "</div></div>");
       var buttons = group.reduce(function(memo, btn) {
         return memo += btn;
       }, "");
       groupEl.append(buttons);
-      if (memo.length === 0) {
-        return memo += groupEl[0].outerHTML;
-      } else {
-        return memo += "<hr />" + groupEl[0].outerHTML;
+      return groupEl[0].outerHTML;
+    }
+
+    var standardWidgets = generateBlock(groups, i18n.t("blocks:group:undefined"));
+
+    var exhibitWidgets = Object.keys(groups).map(function(key) {
+      if (key !== i18n.t("blocks:group:undefined")) {
+        return generateBlock(groups, key);
       }
-    }, "");
+    }).filter(function (element) {
+      return element != null;
+    });
+
+    var blocks = [standardWidgets].concat(exhibitWidgets).join("<hr />");
+    return blocks;
   }
 
   function render(Blocks, availableTypes) {
@@ -65,7 +74,7 @@
     elButtons.appendChild(el);
     return elButtons;
   }
-  
+
   global.Spotlight.BlockControls = function() { };
   global.Spotlight.BlockControls.create = function(editor) {
     // REFACTOR - should probably not know about blockManager
@@ -83,10 +92,10 @@
       SirTrevor = null;
       el = null;
     }
-    
+
     function insert(e) {
       e.stopPropagation();
-      
+
       var parent = this.parentNode;
       if (!parent || hide() === parent) { return; }
       $('.st-block__inner', parent).after(el);
@@ -101,7 +110,7 @@
 
     $(editor.wrapper).delegate(".st-block-replacer", "click", insert);
     $(editor.wrapper).delegate(".st-block-controls__button", "click", insert);
-    
+
     return {
       el: el,
       hide: hide,

data/app/assets/javascripts/spotlight/admin/sir-trevor/locales.js

@@ -11,7 +11,7 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
 
   link_to_search: {
     title: "Saved Searches",
-    description: "This widget highlights saved searches. Each highlighted saved search links to the search results page generated by the saved search parameters. Any saved search listed on the Curation > Browse Categories page, whether published or not, can be highlighted as a saved search.",
+    description: "This widget highlights saved searches. Each highlighted saved search links to the search results page generated by the saved search parameters. Any saved search listed on the Curation > Browse categories page, whether published or not, can be highlighted as a saved search.",
     item_counts: "Include item counts?"
   },
 
@@ -29,8 +29,9 @@ SirTrevor.Locales.en.blocks = $.extend(SirTrevor.Locales.en.blocks, {
 
   uploaded_items: {
     title: "Uploaded Item Row",
-    description: "This widget displays uploaded items in a horizontal row. Optionally, you can add a heading and/or text to be displayed adjacent to the items.",
-    caption: 'Caption'
+    description: "This widget displays uploaded items in a horizontal row. Optionally, you can add a heading and/or text to be displayed adjacent to the items. The item caption and link URL fields are also optional.",
+    caption: 'Caption',
+    link: 'Link URL'
   },
 
   featured_pages: {

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

@@ -2,7 +2,7 @@
 
 // Increase visibility of Firefox focus indicator
 @-moz-document url-prefix() {
-  &:focus {
+  :focus {
     outline: $input-focus-border-color auto 5px;
   }
 }

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

@@ -26,6 +26,18 @@ $image-overlay-max-height: 300px;
   }
 }
 
+.blacklight-browse-show {
+  .subtitle {
+    padding-right: $spacer;
+
+    &::before {
+      content: " \000B7 ";
+      color: $text-muted;
+      padding-right: $spacer / 2;
+    }
+  }
+}
+
 .browse-landing {
   text-align: center;
   // Placeholder for vertically alignment - might already be available from use in another feature
@@ -70,6 +82,10 @@ $image-overlay-max-height: 300px;
       font-size: $h3-font-size;
       @extend %vertical-align;
 
+      .category-subtitle {
+        display: block;
+      }
+
       small {
         display: block;
         color: $white;

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

@@ -122,14 +122,14 @@ form.edit_solr_document {
   margin-right: $spacer * 0.1;
 }
 
-#document {
-  dd.blacklight-exhibit_tags {
-    color: $body-bg;
-    line-height: 2em;
-  }
-
+#document,
+.document {
   .blacklight-exhibit_tags a {
     @extend .badge;
     @extend .badge-secondary;
+
+    &:not(:last-child) {
+      @extend .mr-2;
+    }
   }
 }

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

@@ -216,3 +216,9 @@ table.tags {
     text-align: center;
   }
 }
+
+.card-title .subtitle::before {
+  content: " \000B7 ";
+  color: $text-muted;
+  padding-right: 3px;
+}

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

@@ -1,138 +1,236 @@
 $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;
     line-height: 1.2;
     margin: 0;
     padding: $spacer / 4;
   }
+
+  .category-subtitle {
+    display: block;
+  }
+
   .item-count {
     font-size: $font-size-base;
     text-transform: uppercase;
   }
 }
 
-[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;
-      }
-      @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;
+      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("xl")) {
-        width: $no-sidebar-large-desktop-large-image-width;
-        height: $no-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image;
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
       }
     }
   }
-  &.categories-4, &.categories-5 {
+  &.categories-3 {
     .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-three-tile-width;
+        height: $lg-three-tile-width * $aspect-ratio-factor-4x3;
       }
     }
-    .category-4 {
-      @extend .d-sm-none;
+  }
+  &.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;
+      }
     }
-    .category-5 {
-      @extend .d-md-none;
-      @extend .d-sm-none;
+  }
+  &.categories-5 {
+    .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: $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;
+      }
     }
   }
 }
 
+// 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("md")) and (max-width: breakpoint-max("xl")) {
-        width: $with-sidebar-desktop-large-image-width;
-        height: $with-sidebar-desktop-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("xl")) {
-        width: $with-sidebar-large-desktop-large-image-width;
-        height: $with-sidebar-large-desktop-large-image-width * $aspect-ratio-factor-large-image;
+        width: $xl-sidebar-three-tile-width;
+        height: $xl-sidebar-three-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-4 {
+    .browse-category {
+      @media (min-width: breakpoint-min("lg")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
       }
+
       @media (min-width: breakpoint-min("xl")) {
-        width: $with-sidebar-large-desktop-medium-image-width;
-        height: $with-sidebar-large-desktop-medium-image-width * $aspect-ratio-factor-medium-image;
+        width: $xl-sidebar-four-tile-width;
+        height: $xl-sidebar-four-tile-width * $aspect-ratio-factor-4x3;
       }
     }
   }
-  .category-4, .category-5 {
-    display: none;
+  &.categories-5 {
+    .browse-category {
+      @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("xl")) {
+        width: $xl-sidebar-five-tile-width;
+        height: $xl-sidebar-five-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
   }
 }