Address UX feedback on GDT result view

Why these changes are being introduced: This responds to UX feedback on GDT-130 (result view for GDT). Relevant ticket(s): * [GDT-130](https://mitlibraries.atlassian.net/browse/GDT-130) How this addresses that need: This removes result padding in smaller viewports, moves result markers outside of the titles, changes full record link hover/focus color to blue, and removes the visited styling for full record links. The visited styling remains for 'View online' links in other TIMDEX UI apps, as these are outlinks to the source record. The GDT links go to the full record, which is already indicated as visited in the title link, so it doesn't feel critical to add visited styling to the button as well. Side effects of this change: [GDT-248](https://mitlibraries.atlassian.net/browse/GDT-248) has been opened to address some feedback on the result highlight labels.
MITLibraries · Mar 28, 2024 · f278bb3 · f278bb3
1 parent fc98ee1
commit f278bb3
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/app/assets/stylesheets/partials/_results.scss b/app/assets/stylesheets/partials/_results.scss
@@ -7,17 +7,16 @@
   background-color: $white-t;
   padding: 15px;
 
+  @media (max-width: $bp-screen-md) {
+    padding: 0px;
+  }
   .no-results {
     margin-left: -15px;
   }
 
   .no-results + .ask-us {
     margin-top: 0rem;
   }
-
-  #results {
-    list-style-position: inside;
-  }
 }
 
 .result {
@@ -32,7 +31,6 @@
   }
 
   .record-title {
-    display: inline;
     font-size: 2.5rem;
     line-height: 1.1;
   }
@@ -69,11 +67,17 @@
     }
   }
 
-  .result-get {
+  .result-get,
+  .result-record {
     padding-top: 5px;
     a:visited {
       color: $white;
-      background-color:  green;
+    }
+  }
+
+  .result-get {
+    a:visited {
+      background-color: $brand-secondary;
     }
   }
 

diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
@@ -12,11 +12,11 @@ def trim_highlights(result)
   def view_online(result)
     return unless result['sourceLink'].present?
 
-    link_to 'View online', result['sourceLink'], class: 'button button-primary green'
+    link_to 'View online', result['sourceLink'], class: 'button button-primary'
   end
 
   def view_record(record_id)
-    link_to 'View full record', record_path(id: record_id), class: 'button button-primary green'
+    link_to 'View full record', record_path(id: record_id), class: 'button button-primary'
   end
 
   # 'Coverage' and 'issued' seem to be the most prevalent types; 'coverage' is typically formatted as

diff --git a/app/views/search/_result_geo.html.erb b/app/views/search/_result_geo.html.erb
@@ -25,7 +25,7 @@
     </div>
   <% end %>
 
-  <div class="result-get">
+  <div class="result-record">
     <%= view_record(result_geo['timdexRecordId']) %>
   </div>
 </li>
diff --git a/test/controllers/search_controller_test.rb b/test/controllers/search_controller_test.rb
@@ -1048,7 +1048,7 @@ def setup
         assert_response :success
 
         record_id = controller.view_assigns['results'].first['timdexRecordId']
-        assert_select '.result-get a', href: '/record/#{record_id}', text: 'View full record'
+        assert_select '.result-record a', href: '/record/#{record_id}', text: 'View full record'
       end
     end
   end

diff --git a/test/helpers/search_helper_test.rb b/test/helpers/search_helper_test.rb
@@ -28,7 +28,7 @@ class SearchHelperTest < ActionView::TestCase
 
   test 'renders view_online link if sourceLink is present' do
     result = { 'title' => 'A record', 'sourceLink' => 'https://example.org' }
-    assert_equal '<a class="button button-primary green" href="https://example.org">View online</a>',
+    assert_equal '<a class="button button-primary" href="https://example.org">View online</a>',
                  view_online(result)
   end