Update hover/no img designs for search results

Princeton-CDH · Aug 14, 2024 · 2e0d564 · 2e0d564
1 parent 5c2f4ea
commit 2e0d564
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 15 deletions.
diff --git a/geniza/corpus/templates/corpus/snippets/document_result.html b/geniza/corpus/templates/corpus/snippets/document_result.html
@@ -172,9 +172,6 @@ <h3 class="sr-only">{% translate 'Tags' %}</h3>
                         {% endwith %}
                     {% endfor %}
                 </ul>
-            {% else %}
-                {# Translators: label for when no image thumbnail is available #}
-                <span class="no-image">{% translate 'No Image' %}</span>
             {% endif %}
             <dl class="pgp-metadata">
                 {# Translators: Date document was first added to the PGP #}

diff --git a/sitemedia/img/ui/all/all/no-image-square-lg.png b/sitemedia/img/ui/all/all/no-image-square-lg.png
diff --git a/sitemedia/scss/base/_colors.scss b/sitemedia/scss/base/_colors.scss
@@ -79,6 +79,7 @@ $off-white: #f7f7f7;
     --jts-logo: #231f20;
     // tag background color
     --tag-bg: rgba(86, 120, 86, 0.5);
+    --tag-bg-hover: rgba(86, 120, 86, 0.7);
     // selected language background color
     --selected-language: #f7f7f7;
     // alert message border/text/background colors
@@ -161,6 +162,7 @@ $off-white: #f7f7f7;
     --jts-logo: #f7f7f7;
     // tag background color
     --tag-bg: rgba(86, 120, 86, 0.5);
+    --tag-bg-hover: rgba(86, 120, 86, 0.7);
     // selected language background color
     --selected-language: #161616;
     // alert message border/text/background colors

diff --git a/sitemedia/scss/components/_results.scss b/sitemedia/scss/components/_results.scss
@@ -39,6 +39,7 @@ section#document-list {
 // single result
 .search-result {
     background-color: var(--background-light);
+    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     padding: spacing.$spacing-md;
     display: flex;
     justify-content: center;
@@ -67,6 +68,8 @@ section#document-list {
 
     // document titles
     .title {
+        color: var(--on-background);
+        transition: color 0.15s ease-in-out;
         position: relative;
         border-bottom: 1px solid var(--searchresult-separator);
         flex: 1 0 90%;
@@ -297,18 +300,6 @@ section#document-list {
             }
         }
     }
-    span.no-image {
-        width: 250px;
-        height: 250px;
-        background-image: url("/static/img/ui/all/all/no-image-square-lg.png");
-        background-size: 250px;
-        font-weight: 600;
-        font-size: typography.$text-size-6xl;
-        margin-top: spacing.$spacing-sm;
-        @include breakpoints.for-tablet-landscape-up {
-            margin-top: 0;
-        }
-    }
     /* use pseudo marker to get transcription line numbers from snippets */
     .transcription li,
     .translation li {
@@ -401,6 +392,15 @@ section#document-list {
             }
         }
     }
+    &:hover {
+        background-color: var(--background-gray);
+        box-shadow: 0px 2px 6px 0px #00000040;
+    }
+    &:has(a.view-link:hover) {
+        .title {
+            color: var(--primary);
+        }
+    }
 }
 
 // "view document details" link

diff --git a/sitemedia/scss/components/_tag.scss b/sitemedia/scss/components/_tag.scss
@@ -21,6 +21,10 @@
         text-transform: lowercase;
         border-radius: 5px;
         background-color: var(--tag-bg);
+        transition: background-color 0.15s ease-in-out;
+        &:hover {
+            background-color: var(--tag-bg-hover);
+        }
         color: var(--on-background-light);
         padding: 0 14px;
         min-width: 34px; // 48px - 14px for mobile touch target