Consolidate cover previews on search results to show 4 stacked covers and adjust result details.

openlibrary/i18n/messages.pot

@@ -806,6 +806,13 @@ msgid_plural "%(count)s editions"
 msgstr[0] ""
 msgstr[1] ""
 
+#: SearchResultsWork.html publishers/view.html
+#, python-format
+msgid "%(count)s ebook"
+msgid_plural "%(count)s ebooks"
+msgstr[0] ""
+msgstr[1] ""
+
 #: SearchResultsWork.html
 #, python-format
 msgid "in <a class=\"hoverlink\" title=\"%(langs)s\">%(count)d language</a>"
@@ -7050,13 +7057,6 @@ msgstr ""
 msgid "Publisher: %(name)s"
 msgstr ""
 
-#: publishers/view.html
-#, python-format
-msgid "%(count)s ebook"
-msgid_plural "%(count)s ebooks"
-msgstr[0] ""
-msgstr[1] ""
-
 #: publishers/view.html
 msgid "0 ebooks"
 msgstr ""

openlibrary/macros/SearchResultsWork.html

@@ -175,30 +175,37 @@ <h3 itemprop="name" class="booktitle">
             </ol-read-more>
 
         $if doc.get('ia') and len(doc.get('ia')) > 1:
-          <br />
           $ blur_preview = "preview-covers--blur" if blur else ""
-          <span class="preview-covers $blur_preview">
-            $for x, i in enumerate(doc.get('ia')[1:10]):
-              <a href="$(book_url)?edition=ia:$(urlquote(i))">
-                <img width="30" height="45" loading="lazy" src="//archive.org/services/img/$i" alt="$_('Cover of edition %(id)s', id=i)">
-              </a>
-          </span>
-
-        <span class="resultDetails">
-          $if doc.get('first_publish_year'):
-            <span>
-              $_('First published in %(year)s', year=doc.first_publish_year)
-            </span>&mdash;
-          $if doc.get('edition_count'):
-            <span>
-              <a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>
+
+          <div class="preview-covers-container">
+            <span class="preview-covers $blur_preview">
+              $for x, i in enumerate(doc.get('ia')[1:5]):
+                <a href="$(book_url)?edition=ia:$(urlquote(i))">
+                  <img width="30" height="45" loading="lazy" src="//archive.org/services/img/$i" alt="$_('Cover of edition %(id)s', id=i)">
+                </a>
             </span>
-          $if doc.get('languages') and doc_type in ['infogami_work', 'solr_work']:
-            <span class="languages">
-              $ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages' + lang) for lang in doc.languages]
-              $:ungettext('in <a class="hoverlink" title="%(langs)s">%(count)d language</a>', 'in <a class="hoverlink" title="%(langs)s">%(count)d languages</a>', len(doc.languages), count=len(doc.languages), langs=commify_list(langs))
+
+            <span class="resultDetails">
+              $if doc.get('first_publish_year'):
+                <span>
+                  $_('First published in %(year)s', year=doc.first_publish_year)
+                </span>
+                <br>
+              $if doc.get('edition_count'):
+                <span>
+                  <a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>,
+                </span>
+              $if doc.get('ia'):
+                <span>
+                  <a href="$work_edition_all_url#editions-list">$ungettext('%(count)s ebook', '%(count)s ebooks', len(doc.get('ia')), count=len(doc.get('ia')))</a>
+                </span>
+              $if doc.get('languages') and doc_type in ['infogami_work', 'solr_work']:
+                <span class="languages">
+                  $ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages' + lang) for lang in doc.languages]
+                  $:ungettext('in <a class="hoverlink" title="%(langs)s">%(count)d language</a>', 'in <a class="hoverlink" title="%(langs)s">%(count)d languages</a>', len(doc.languages), count=len(doc.languages), langs=commify_list(langs))
+                </span>
             </span>
-        </span>
+          </div>
 
         $if show_librarian_extras:
           <div class="searchResultItem__librarian-extras" title="$_('This is only visible to librarians.')">

static/css/components/search-result-item.css

@@ -124,16 +124,13 @@
 }
 
 .searchResultItem .preview-covers {
-  display: block;
-  height: 45px;
-  overflow: hidden;
-  margin-top: 10px;
-  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
 }
 
 .searchResultItem .preview-covers img {
-  border-radius: var(--border-radius-thumbnail);
-  opacity: 0.7;
+  border-radius: 4px;
+  opacity: 1;
 }
 
 .searchResultItem .preview-covers--blur img {
@@ -153,10 +150,6 @@
   width: 175px;
 }
 
-.searchResultItem .bookcover--blur img {
-  filter: blur(4px);
-}
-
 .searchResultItem .imageLg {
   text-align: center;
   width: 100%;
@@ -189,6 +182,40 @@
   font-style: normal;
 }
 
+.preview-covers-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.preview-covers a {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.preview-covers a:nth-child(n + 2) {
+  margin-left: -15px;
+}
+
+.preview-covers a:nth-child(1) {
+  z-index: var(--z-index-level-4);
+}
+
+.preview-covers a:nth-child(2) {
+  z-index: var(--z-index-level-3);
+}
+
+.preview-covers a:nth-child(3) {
+  z-index: var(--z-index-level-2);
+}
+
+.preview-covers a:nth-child(4) {
+  z-index: var(--z-index-level-1);
+}
+
 .srw__chapters {
   background: rgba(0, 124, 255, 0.2);
   border-radius: 4px;
@@ -239,7 +266,7 @@
 }
 
 .preview-covers img:hover {
-  opacity: 1;
+  z-index: var(--z-index-level-5);
 }
 
 /* Delete trashcan appears on https://openlibrary.org/people/jdlrobson/lists */