Consolidated less file for multipurpose use w FTS suggestion card

internetarchive · Aug 20, 2024 · 7f16afd · 7f16afd
1 parent 078cdf8
commit 7f16afd
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 19 deletions.
diff --git 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
@@ -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>
diff --git 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/...mponents/fulltext-suggestion-snippet.less → static/css/components/fulltext-snippet.less b/...mponents/fulltext-suggestion-snippet.less → 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
@@ -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
@@ -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