Merge pull request #393 from MITLibraries/use-575

USE-575: Adds markup and styles for new tab descriptions right below active tab

Author: JPrevost

app/assets/stylesheets/partials/_results.scss

@@ -408,12 +408,7 @@
   .results-context {
     padding-left: 0;
     margin-top: 0;
-    margin-bottom: 4px;
-  }
-
-  .results-context-description {
-    color: $color-text-secondary;
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   #results-section {
@@ -596,4 +591,33 @@ aside.nls-alert {
       }
     }
   }
-}
+}
+
+// RESULTS LIST NLS ALERT
+aside.nls-alert {
+  margin-bottom: 40px;
+  display: flex;
+  gap: 6px;
+
+  i {
+    color: $color-magenta-500;
+    margin-top: 2px;
+  }
+
+  p {
+    font-weight: $fw-medium;
+    line-height: 1.35;
+
+    a {
+      padding-left: 8px;
+      font-weight: $fw-normal;
+      font-size: 1.4rem;
+      color: $color-text-secondary;
+      text-decoration-color: $color-gray-300;
+
+      &:hover {
+        text-decoration-color: $color-text-secondary;
+      }
+    }
+  }
+}

app/assets/stylesheets/partials/_source_tabs.scss

@@ -46,7 +46,7 @@
     }
 
     &.active {
-      background-color: $color-white;
+      background-color: $color-gray-25;
       color: $color-text-primary;
       text-decoration: none;
 
@@ -104,4 +104,18 @@
     display: block;
   }
 
+}
+
+/* ============================== */
+/* Tab description bar below tabs */
+/* ============================== */
+div.tab-description {
+  background-color: $color-gray-25;
+  border-bottom: 1px solid $color-gray-200;
+  color: $color-text-secondary;
+
+  .wrap-content {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
 }

app/assets/stylesheets/partials/_variables.scss

@@ -5,6 +5,7 @@
 
 
 // GRAY
+$color-gray-25: #FAFAFA;
 $color-gray-100: #F2F2F2;
 $color-gray-200: #e6e6e6;
 $color-gray-300: #ccc;

app/helpers/search_helper.rb

@@ -42,7 +42,7 @@ def link_to_tab(target, label = nil)
       link_to tab_label, results_path(params.permit(:q, :per_page, :booleanType, :tab, :queryMode).merge(tab: clean_target)),
               class: 'tab-link',
               role: 'button',
-              data: { turbo_frame: 'search-results', turbo_action: 'advance' }
+              data: { turbo_frame: '_top', turbo_action: 'advance' }
     end
   end
 

app/views/layouts/_tab_description.html.erb

@@ -0,0 +1,5 @@
+<div class="tab-description">
+  <div class="wrap-content">
+  <%= tab_description %>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -13,6 +13,9 @@
       <%= render partial: "layouts/site_header" %>
 
       <div class="wrap-outer-content layout-band">
+
+        <%= render partial: "layouts/tab_description" %>
+
         <div class="wrap-content">
           <%= render partial: "layouts/flash" %>
 

app/views/search/results.html.erb

@@ -3,7 +3,6 @@
 <% content_for :additional_meta_tag do %>
   <meta name="robots" content="noindex, nofollow">
 <% end %>
-
 <div id="content-wrapper" class="space-wrap">
   <%= render(partial: 'shared/error', collection: @errors) %>
 
@@ -19,7 +18,6 @@
       <% elsif @results.present? && @errors.blank? %>
 
         <h2 class="results-context" data-matomo-seen="Search, Results Found, Tab: {{getActiveTabName}}"><%= results_summary(@pagination[:hits]) %></h2>
-        <p class="results-context-description"><%= tab_description %></p>
         <%= render partial: 'search/nls_alert' %>
         <div id="results-layout-wrapper">
           <main id="results">

test/controllers/search_controller_test.rb

@@ -871,8 +871,8 @@ def source_filter_count(controller)
     get '/results?q=test&tab=primo'
     assert_response :success
     assert_select '.results-context', text: /10 results/
-    assert_select '.results-context-description', count: 1
-    assert_select '.results-context-description',
+    assert_select '.tab-description', count: 1
+    assert_select '.tab-description .wrap-content',
                   text: /Articles, books, chapters, streaming and physical media, and more/
   end