Merge pull request #321 from MITLibraries/use-302

USE-302: First pass updates to result styling for visual clarity

Author: djanelle-mit

app/assets/stylesheets/partials/_buttons.scss

@@ -11,5 +11,6 @@
 
     &:hover {
       background-color: $color-blue-25;
+      color: $color-blue-500;
     }
   }

app/assets/stylesheets/partials/_results.scss

@@ -47,6 +47,7 @@
 .results-list.use {
   list-style-type: none;
   padding: 0;
+  margin-bottom: 0;
 }
 
 // --------------------------------------
@@ -139,10 +140,19 @@
 // --------------------------------------
 
 .result.use, .result.primo {
-  margin-bottom: 48px;
-  padding: 0;
+  padding: 48px 0;
+  margin: 0;
+  border-bottom: 1px solid $color-gray-400;
   border-top: none;
+
+  &:first-child {
+    padding-top: 0;
+  }
 
+  &:last-child {
+    border-bottom: none;
+  }
+
   &:hover,
   &:focus {
     background-color: transparent;
@@ -169,25 +179,71 @@
 
   .pub-info {
     font-size: $fs-base;
-    color: $color-text-secondary;
-    span:first-child:after {
-      content: " • ";
-      color: $color-text-disabled;
+    
+    span {
+      &::before, &:last-child::before {
+        content: " • ";
+        color: $color-text-disabled;
+      }
+
+      &:first-child::before {
+        content: " ";
+      }
+
+      // Override the default separator
+      &::after, &:first-child::after {
+        content: " ";
+      }
+
     }
+
     margin-bottom: 1em;
     margin-top: 0;
   }
 
+  .result-subjects, .result-summary, .result-container {
+    font-size: 1.4rem;
+    margin-bottom: 8px;
+    color: $color-text-secondary;
+  }
+
+  .result-subjects {
+    color: $color-text-secondary;
+
+    ul {
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+
+      li {
+        margin-bottom: 0;
+
+        &::after {
+          content: " • ";
+          color: $color-text-disabled;
+        }
+
+        &:last-child::after {
+          content: " ";
+        }
+
+      }
+    }
+
+  }
+
   .result-highlights.use {
     margin-top: 0;
 
+    h4, strong {font-weight: $fw-medium;}
+
     ul {
       list-style: disc outside;
       padding-left: 16px;
+      margin-bottom: 0;
 
       li {
         margin-left: 0.6rem;
-        font-size: 1.6rem;
+        font-size: 1.4rem;
       }
     }
   }
@@ -196,62 +252,62 @@
     background-color: $color-highlight;
   }
 
-  &.use, &.primo {
-    .result-metadata {
-      margin-bottom: 16px;
-    }
+  .result-metadata {
+    margin-bottom: 16px;
+  }
 
-    .pub-info {
-      margin-bottom: 4px;
-    }
+  .pub-info {
+    margin-bottom: 4px;
+  }
 
-    ul.contributors {
-      li {
-        font-weight: $fw-normal;
+  ul.contributors {
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    margin-bottom: 12px;
 
-        a {
-          color: $color-text-secondary;
-          text-decoration: none;
+    li {
+      font-weight: $fw-normal;
 
-          &:hover {
-            text-decoration: underline;
-          }
+      a {
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
         }
       }
     }
+  }
 
-    .inner-heading {
-      font-size: 1.6rem;
-      font-family: $base-font; // Since we're using 16px, override to use body font
-    }
-
-    .result-get {
-      display: flex;
-      align-items: center;
-      gap: 24px;
-    }
-
-    // Make result buttons present as underlined links
-    a.button {
-      @include underlinedLinks;
-      font-weight: $fw-medium;
-      font-size: 1.6rem;
-    }
+  .inner-heading {
+    font-size: 1.6rem;
+    font-family: $base-font; // Since we're using 16px, override to use body font
+  }
 
-    // Except the first button, which should present as a secondary button
-    .result-get > a.button:first-child {
-      @include buttonSecondary;
-    }
+  .result-get {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
 
-    // Loading skeleton when a button isn't available
-    span.skeleton-loader {
-      @include skeleton-loader(112px);
-    }
+  // Make result buttons present as underlined links
+  a.button {
+    @include underlinedLinks;
+    font-weight: $fw-medium;
+    font-size: 1.6rem;
+  }
 
-    .truncate-list li:last-child {margin-bottom: 0;}
+  // Except the first button, which should present as a secondary button
+  .result-get > a.button:first-child {
+    @include buttonSecondary;
+  }
 
+  // Loading skeleton when a button isn't available
+  span.skeleton-loader {
+    @include skeleton-loader(112px);
   }
 
+  .truncate-list li:last-child {margin-bottom: 0;}
+
   .availability {
     color: $color-text-secondary;
 
@@ -300,7 +356,7 @@
 
   .results-context-description {
     color: $color-text-secondary;
-    margin-bottom: 32px;
+    margin-bottom: 40px;
   }
 
   #results-section {

app/assets/stylesheets/partials/_search.scss

@@ -218,6 +218,11 @@
   margin: 0;
   max-width: 760px;
   padding: 3.5rem 0 2rem;
+
+  a {
+    @include underlinedLinks;
+    font-weight: $fw-medium;
+  }
 }
 
 /* primo continuation partial */

app/assets/stylesheets/partials/_variables.scss

@@ -9,7 +9,8 @@ $color-gray-100: #F2F2F2;
 $color-gray-200: #e6e6e6;
 $color-gray-300: #ccc;
 $color-gray-400: #b3b3b3;
-$color-gray-500: #999 ;
+$color-gray-500: #999;
+$color-gray-600: #808080;
 $color-gray-700: #666;
 $color-gray-900: #333;
 $color-gray-950: #1a1a1a;

app/views/search/_highlights.html.erb

@@ -1,7 +1,7 @@
 <% highlights = trim_highlights(result) %>
 <% return unless highlights&.any? %>
 
-<h4 class="inner-heading">See full record for all matches to your search terms:</h4>
+<h4 class="inner-heading">Search term found in:</h4>
 <ul class="list-unbulleted truncate-list">
   <% highlights.each do |h| %>
     <% h['matchedPhrases'].each do |phrase| %>

app/views/search/_result.html.erb

@@ -37,7 +37,7 @@
       <% if result[:subjects].present? %>
         <div class="result-subjects truncate-list">
           <span class="sr">Subjects: </span>
-          <ul>
+          <ul class="list-inline truncate-list subjects">
             <% result[:subjects].each do |subject| %>
               <li><%= subject %></li>
             <% end %>

app/views/search/_result_primo.html.erb

@@ -44,7 +44,7 @@
       <% if result[:subjects].present? %>
         <div class="result-subjects truncate-list">
           <span class="sr">Subjects: </span>
-          <ul>
+          <ul class="list-inline truncate-list subjects">
             <% result[:subjects].each do |subject| %>
               <li><%= subject %></li>
             <% end %>