Merge pull request #3314 from projectblacklight/backport-thumbnail-re…

…design Backport: redesign thumbnails for accessibility
projectblacklight · Dec 4, 2024 · 2e36973 · 2e36973
2 parents 7ef5b6d + de4ffc8
commit 2e36973
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 17 deletions.
diff --git a/app/assets/stylesheets/spotlight/_browse.scss b/app/assets/stylesheets/spotlight/_browse.scss
@@ -48,12 +48,6 @@ $image-overlay-max-height: 300px;
 
 .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;
@@ -77,18 +71,16 @@ $image-overlay-max-height: 300px;
     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));
+    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 70%, rgba(46, 45, 41, 0) 100%);
     color: $white;
-    padding: 8%;
+    padding: 50px 20px 20px 20px;
     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;

diff --git a/app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss b/app/assets/stylesheets/spotlight/_featured_browse_categories_block.scss
@@ -61,12 +61,14 @@ $xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;
   position: relative;
 
   .category-caption {
-    bottom: 16px; // assumes default font-size of 16px, using browser default of 1 rem == 16px
+    bottom: 0px;
     color: $featured-browse-category-caption-color;
     position: absolute;
     text-align: center;
-    text-shadow: 0 1px 0 $black;
     width: 100%;
+    padding: 35px 15px 15px;
+    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 70%, rgba(46, 45, 41, 0) 100%);
+    border-radius: $border-radius-lg;
   }
 
   .category-title {

diff --git a/app/views/spotlight/sir_trevor/blocks/_browse_block.html.erb b/app/views/spotlight/sir_trevor/blocks/_browse_block.html.erb
@@ -5,7 +5,7 @@
     <% browse_block.searches.each_with_index do |search, index| %>
       <div class="box category-<%= (index + 1) %>">
         <%= link_to spotlight.exhibit_browse_path(search.exhibit, search) do %>
-          <div class="browse-category" style='background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
+          <div class="browse-category" style='background-image: url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
             <div class="category-caption">
               <p class="category-title">
                 <%= search.title %>

diff --git a/app/views/spotlight/sir_trevor/blocks/_browse_group_categories_block.html.erb b/app/views/spotlight/sir_trevor/blocks/_browse_group_categories_block.html.erb
@@ -23,7 +23,7 @@
         <% group.searches.published.each_with_index do |search, index| %>
           <div class="box category-1 justify-content-center justify-content-md-space-around">
             <%= link_to spotlight.exhibit_browse_group_path(current_exhibit, group, search), class: 'justify-content-center' do %>
-              <div class="browse-category" style='background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
+              <div class="browse-category" style='background-image: url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
                 <div class="category-caption">
                   <p class="category-title">
                     <%= search.title %>

diff --git a/app/views/spotlight/sir_trevor/blocks/_featured_pages_block.html.erb b/app/views/spotlight/sir_trevor/blocks/_featured_pages_block.html.erb
@@ -3,7 +3,7 @@
     <% featured_pages_block.pages.each_with_index do |page, index| %>
       <div class="box category-<%= (index + 1) %>">
         <%= link_to [spotlight, current_exhibit, page] do %>
-          <div class="browse-category" style='background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)) <%= ", url(\"#{page.thumbnail_image_url}\")" if page.thumbnail_image_url %>'>
+          <div class="browse-category" style='background-image: <%= "url(\"#{page.thumbnail_image_url}\")" if page.thumbnail_image_url %>'>
             <div class="category-caption">
               <p class="category-title">
                 <%= page.title %>

diff --git a/app/views/spotlight/sir_trevor/blocks/_link_to_search_block.html.erb b/app/views/spotlight/sir_trevor/blocks/_link_to_search_block.html.erb
@@ -5,7 +5,7 @@
     <% link_to_search_block.searches.each_with_index do |search, index| %>
       <div class="box category-<%= (index + 1) %>">
         <%= link_to spotlight.search_exhibit_catalog_path(search.exhibit, search.query_params || {}) do %>
-          <div class="browse-category" style='background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
+          <div class="browse-category" style='background-image: url("<%= search.thumbnail.iiif_url if search.thumbnail %>")'>
             <div class="category-caption">
               <p class="category-title">
                 <%= search.title %>