From 7f16afddb222232237dcaf2b653dbbef0333d614 Mon Sep 17 00:00:00 2001
From: merwhite11 <meredith.white91@gmail.com>
Date: Tue, 30 Jul 2024 12:04:23 -0700
Subject: [PATCH] Consolidated less file for multipurpose use w FTS suggestion
 card

---
 bundlesize.config.json                        |  4 +--
 openlibrary/macros/FulltextSnippet.html       | 36 ++++++++++++-------
 .../macros/FulltextSuggestionSnippet.html     |  4 +--
 ...ion-snippet.less => fulltext-snippet.less} | 10 +++++-
 .../components/search-results-container.less  |  1 +
 static/css/page-user.less                     |  2 +-
 6 files changed, 38 insertions(+), 19 deletions(-)
 rename static/css/components/{fulltext-suggestion-snippet.less => fulltext-snippet.less} (76%)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 6e06baa217a1..1362b37897e7 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -74,7 +74,7 @@
     },
     {
       "path": "static/build/page-admin.css",
-      "maxSize": "25KB"
+      "maxSize": "24.05KB"
     },
     {
       "path": "static/build/page-book.css",
@@ -102,7 +102,7 @@
     },
     {
       "path": "static/build/page-user.css",
-      "maxSize": "27.05KB"
+      "maxSize": "27.06KB"
     }
   ]
 }
diff --git a/openlibrary/macros/FulltextSnippet.html b/openlibrary/macros/FulltextSnippet.html
index e3930e9878eb..9c5685f79aab 100644
--- a/openlibrary/macros/FulltextSnippet.html
+++ b/openlibrary/macros/FulltextSnippet.html
@@ -1,24 +1,34 @@
 $def with (q, doc=None)
 
 $ ia = doc.get('fields', {}).get('identifier', [''])[0]
+$ ia_base_url = "https://archive.org"
 $ availability = doc.get('availability', {})
-$ snippets = doc.get('highlight', {}).get('text', [''])
+$ snippets = doc.get('highlight', {}).get('text', [''])[:2]
 $ page_nums = doc.get('fields', {}).get('page_num', [])
-$ page = ', '.join([str(num) for num in page_nums])
+$if len(page_nums) == 1 and isinstance(page_nums[0], list):
+    $ page_nums = page_nums[0]
+$ page = ', '.join(str(num) for num in page_nums)
+
+<ul class="fsi-snippet">
+  $for snippet in snippets:
+    $if snippet:
+      <li class="fsi-snippet__main fsi-snippet__full-results">
+        <div class="fsi-snippet__quotation-mark">$_('❝')</div>
+        <a class="fsi-snippet__link" href="$ia_base_url/details/$ia" data-ol-link-track="SearchInsideCard|QuoteClick">
+          &hellip;$:(snippet.replace("<", "&laquo;").replace(">", "&raquo;").replace("{{{", "<mark class='highlight'><strong>").replace("}}}", "</strong></mark>"))&hellip;
+        </a>&nbsp;
+        <div class="fsi-snippet__quotation-mark">$_('❞')</div>
+        $if page:
+          <span class="fsi-snippet__page-num" href="$ia_base_url/details/$ia">
+            <a data-ol-link-track="SearchInsideCard|QuoteClick">$_('Page: %(page)s', page=page)</a>
+          </span>
+      </li>
+</ul>
+
 
-$if snippets:
-  <section class="fulltext-excerpts" aria-label="search results from: $doc['edition']['title']">
-    <ul>
-      $for snippet in snippets:
-        $if snippet:
-          <li class="fulltext-excerpt">
-            &hellip;$:(snippet.replace("<", "&laquo;").replace(">", "&raquo;").replace("{{{", "<mark class='highlight'><strong>").replace("}}}", "</strong></mark>"))&hellip;
-          </li>
-    </ul>
-  </section>
 
 $if availability.get('status') == 'open':
   <p class="center"><a href="https://archive.org/stream/$(ia)?ref=ol&access=1#search/$(q)">$_("See All Results")</a></p>
 
 $if availability.get('status') == 'borrow_available':
-  <p class="center">$_("Borrow") &amp; <a href="https://archive.org/stream/$(ia)?ref=ol&access=1#search/$(q)">$_("See All Results")</a></p>
+  <p class="center">$_("Borrow") &amp; <a href="https://archive.org/stream/$(ia)?ref=ol&access=1#search/$(q)">$_("See All Results")</a></p>
\ No newline at end of file
diff --git a/openlibrary/macros/FulltextSuggestionSnippet.html b/openlibrary/macros/FulltextSuggestionSnippet.html
index 3cad66071853..12e395214796 100644
--- a/openlibrary/macros/FulltextSuggestionSnippet.html
+++ b/openlibrary/macros/FulltextSuggestionSnippet.html
@@ -19,8 +19,8 @@
           </a>&nbsp;
           <div class="fsi-snippet__quotation-mark">$_('❞')</div>
           $if page:
-          <div class="fsi-snippet__page-num" href="$ia_base_url/details/$ia">
+          <span class="fsi-snippet__page-num" href="$ia_base_url/details/$ia">
             <a data-ol-link-track="SearchInsideSuggestion|QuoteClick">$_('Page: %(page)s', page=page)</a>
-          </div>
+          </span>
         </div>
   </div>
diff --git a/static/css/components/fulltext-suggestion-snippet.less b/static/css/components/fulltext-snippet.less
similarity index 76%
rename from static/css/components/fulltext-suggestion-snippet.less
rename to static/css/components/fulltext-snippet.less
index 7e8d12be7718..26bb48ce896f 100644
--- a/static/css/components/fulltext-suggestion-snippet.less
+++ b/static/css/components/fulltext-snippet.less
@@ -4,7 +4,7 @@
   padding: 5px;
   margin: 0;
   font-size: small;
-  @media (min-width: @width-breakpoint-mobile-m) {
+  @media (min-width: @width-breakpoint-mobile) {
     width: 90%;
   }
   @media (min-width: @width-breakpoint-tablet) {
@@ -39,6 +39,14 @@
       color: @link-blue;
     }
   }
+  &__full-results {
+    border-bottom: 1px solid @lightest-grey;
+    font-size: 1em;
+    overflow: hidden;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
 
   &__quotation-mark {
     font-size: larger;
diff --git a/static/css/components/search-results-container.less b/static/css/components/search-results-container.less
index 07d28a362cc7..ab7c19e8d568 100644
--- a/static/css/components/search-results-container.less
+++ b/static/css/components/search-results-container.less
@@ -3,6 +3,7 @@
  * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#searchresultcontainer
  */
 @import (less) "search-result-item.less";
+@import (less) "fulltext-snippet.less";
 
 @media only screen and (min-width: @width-breakpoint-desktop) {
   .resultsContainer {
diff --git a/static/css/page-user.less b/static/css/page-user.less
index 10d6154968e8..cc998369d75a 100644
--- a/static/css/page-user.less
+++ b/static/css/page-user.less
@@ -229,7 +229,7 @@ tr.table-row.selected{
 // Import styles for fulltext-search-suggestion card item
 @import (less) "components/fulltext-search-suggestion-item.less";
 // Import styles for fulltext-search-suggestion card item snippet
-@import (less) "components/fulltext-suggestion-snippet.less";
+@import (less) "components/fulltext-snippet.less";
 // Import styles for author infobox
 @import (less) "components/author-infobox.less";
 // Import all common components