Merged: Assorted style fixes for timdex result

This also catches up to link_to_tab changes

Author: djanelle-mit

app/assets/stylesheets/partials/_buttons.scss

@@ -1,5 +1,7 @@
   @mixin buttonSecondary {
     border: 1px solid $color-blue-500;
+    background-color: $color-white;
+    color: $color-text-primary;
     border-radius: 0;
     display: inline-block;
     padding: 6px 12px;

app/assets/stylesheets/partials/_results.scss

@@ -47,6 +47,7 @@ li.result {
   margin-bottom: 48px;
 
   .eyebrow {
+    color: $color-text-secondary;
     font-size: 1.3rem;
     font-weight: $fw-medium;
     letter-spacing: 0.05em;
@@ -55,7 +56,8 @@ li.result {
 
   .record-title {
     font-size: 2.4rem;
-    line-height: 1.1;
+    line-height: 1.3;
+    margin-bottom: 8px;
 
     a {
       @include underlinedLinks;
@@ -65,9 +67,10 @@ li.result {
 
   .pub-info {
     font-size: $fs-base;
-    color:  $gray-d1;
+    color: $color-text-secondary;
     span:first-child:after {
-      content: " | ";
+      content: " • ";
+      color: $color-text-disabled;
     }
     margin-bottom: 1em;
   }
@@ -86,6 +89,18 @@ li.result {
     }
   }
 
+  .result-highlights.use {
+    margin-top: 0;
+
+    ul {
+      list-style: disc inside;
+
+      li {
+        margin-left: 0.6rem;
+      }
+    }
+  }
+
   .result-get,
   .result-record {
     a:visited {
@@ -115,6 +130,38 @@ li.result {
   .highlight {
     background-color: $color-highlight;
   }
+
+  &.use {
+    .result-metadata {
+      margin-bottom: 16px;
+    }
+
+    .pub-info {
+      margin-bottom: 4px;
+    }
+
+    ul.contributors {
+      li {
+        font-weight: $fw-normal;
+
+        a {
+          color: $color-text-secondary;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    a.button {
+      @include buttonSecondary;
+    }
+
+    .truncate-list li:last-child {margin-bottom: 0;}
+
+  }
 }
 
 /* Start USE specific overrides */

app/helpers/search_helper.rb

@@ -22,16 +22,22 @@ def link_to_result(result)
     end
   end
 
-  def link_to_tab(target)
-    if @active_tab == target.downcase
-      link_to target, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: target.downcase)),
-        aria: { current: "page" },
-        class: "active tab-link",
-        data: { turbo_frame: "search-results", turbo_action: "advance" }
+  # Generates a link for a search results tab, marking it as active if it matches the current active tab.
+  # @param target [String] The name of the tab to link to
+  # @param label [String] The display label for the tab (optional)
+  # @return [String] HTML link element for the tab
+  def link_to_tab(target, label = nil)
+    clean_target = target.downcase.gsub(' ', '_').downcase
+    tab_label = label || target
+    if @active_tab == clean_target
+      link_to tab_label, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: clean_target)),
+              aria: { current: 'page' },
+              class: 'active tab-link',
+              data: { turbo_frame: 'search-results', turbo_action: 'advance' }
     else
-      link_to target, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: target.downcase)),
-        class: "tab-link",
-        data: { turbo_frame: "search-results", turbo_action: "advance" }
+      link_to tab_label, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: clean_target)),
+              class: 'tab-link',
+              data: { turbo_frame: 'search-results', turbo_action: 'advance' }
     end
   end
 

app/views/search/_result.html.erb

@@ -1,23 +1,31 @@
-<li class="result">
+<li class="result use">
   <div class="result-content">
     <p class="eyebrow">Eyebrow Text</p>
     <h3 class="record-title">
       <span class="sr">Title: </span>
       <%= link_to_result(result) %>
     </h3>
 
-    <p class="pub-info">
-      <span><%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %></span>
-      <span>
-        <% result[:dates]&.each do |date| %>
-          <%= date['value'] if date['kind'] == 'Publication date' %>
-        <% end %>
-      </span>
-    </p>
+    <div class="result-metadata">
 
-    <%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %>
+      <p class="pub-info">
+        <span><%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %></span>
+        <span>
+          <% result[:dates]&.each do |date| %>
+            <%= date['value'] if date['kind'] == 'Publication date' %>
+          <% end %>
+        </span>
+      </p>
 
-    <div class="result-highlights">
+      <% if result[:contributors].present? %>   
+        <span class="sr">Contributors: </span>
+        <ul class="list-inline truncate-list contributors">
+          <%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %>
+        </ul>
+      <% end %>
+    </div>
+
+    <div class="result-highlights use">
       <%= render partial: 'search/highlights', locals: { result: result } %>
     </div>
 

app/views/shared/_contributors.html.erb

@@ -1,8 +1,5 @@
 <%= return if contributors.blank? %>
 
-<span class="sr">Contributors: </span>
-<ul class="list-inline truncate-list contributors">
-  <% contributors.uniq do |contributor| %>
-    <li><%= link_to contributor['value'], results_path({ advanced: true, contributors: contributor['value'] }) %></li>
-  <% end %>
-</ul>
+<% contributors.uniq do |contributor| %>
+  <li><%= link_to contributor['value'], results_path({ advanced: true, contributors: contributor['value'] }) %></li>
+<% end %>