Skip to content

Commit 00cfbf6

Browse files
lokeshlokesh
authored
Merge pull request #12090 from Saad259/fix-consolidate-cover-previews
Consolidate cover previews on search results to show 4 stacked covers and adjust result details.
2 parents 2d22f21 + 0a9f8c6 commit 00cfbf6

4 files changed

Lines changed: 127 additions & 45 deletions

File tree

‎openlibrary/i18n/messages.pot‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -814,6 +814,13 @@ msgid_plural "%(count)s editions"
814814
msgstr[0] ""
815815
msgstr[1] ""
816816

817+
#: SearchResultsWork.html publishers/view.html
818+
#, python-format
819+
msgid "%(count)s ebook"
820+
msgid_plural "%(count)s ebooks"
821+
msgstr[0] ""
822+
msgstr[1] ""
823+
817824
#: SearchResultsWork.html
818825
#, python-format
819826
msgid "in <a class=\"hoverlink\" title=\"%(langs)s\">%(count)d language</a>"
@@ -7256,13 +7263,6 @@ msgstr ""
72567263
msgid "Publisher: %(name)s"
72577264
msgstr ""
72587265

7259-
#: publishers/view.html
7260-
#, python-format
7261-
msgid "%(count)s ebook"
7262-
msgid_plural "%(count)s ebooks"
7263-
msgstr[0] ""
7264-
msgstr[1] ""
7265-
72667266
#: publishers/view.html
72677267
msgid "0 ebooks"
72687268
msgstr ""

‎openlibrary/macros/SearchResultsWork.html‎

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -175,31 +175,60 @@ <h3 itemprop="name" class="booktitle">
175175
</ol-read-more>
176176

177177
$if doc.get('ia') and len(doc.get('ia')) > 1:
178-
<br />
179-
$ blur_preview = "preview-covers--blur" if blur else ""
180-
<span class="preview-covers $blur_preview">
181-
$for x, i in enumerate(doc.get('ia')[1:10]):
182-
<a href="$(book_url)?edition=ia:$(urlquote(i))">
183-
<img width="30" height="45" loading="lazy" src="//archive.org/services/img/$i" alt="$_('Cover of edition %(id)s', id=i)">
184-
</a>
185-
</span>
178+
$ blur_preview = "search-result-item__preview-covers--blur" if blur else ""
186179

187-
<span class="resultDetails">
188-
$if doc.get('first_publish_year'):
189-
<span>
190-
$_('First published in %(year)s', year=doc.first_publish_year)
191-
</span>&mdash;
192-
$if doc.get('edition_count'):
193-
<span>
194-
<a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>
180+
<div class="search-result-item__preview-covers-container">
181+
<span class="search-result-item__preview-covers $blur_preview">
182+
$for x, i in enumerate(doc.get('ia')[1:6]):
183+
<a href="$(book_url)?edition=ia:$(urlquote(i))">
184+
<img width="35" height="53" loading="lazy" src="//archive.org/services/img/$i" alt="$_('Cover of edition %(id)s', id=i)">
185+
</a>
195186
</span>
196-
$if doc.get('languages') and doc_type in ['infogami_work', 'solr_work']:
197-
<span class="languages">
198-
$ user_lang = get_lang() or 'en'
199-
$ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages/' + lang, user_lang) for lang in doc.languages]
200-
$: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))
187+
188+
<span class="resultDetails">
189+
$if doc.get('first_publish_year'):
190+
<span>
191+
$_('First published in %(year)s', year=doc.first_publish_year)
192+
</span>
193+
<br>
194+
$if doc.get('edition_count'):
195+
<span>
196+
<a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>,
197+
</span>
198+
<span>
199+
<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>
200+
</span>
201+
$if doc.get('languages') and doc_type in ['infogami_work', 'solr_work']:
202+
<span class="languages">
203+
$ user_lang = get_lang() or 'en'
204+
$ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages/' + lang, user_lang) for lang in doc.languages]
205+
$: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))
206+
</span>
201207
</span>
202-
</span>
208+
</div>
209+
210+
$else:
211+
<span class="resultDetails">
212+
$if doc.get('first_publish_year'):
213+
<span>
214+
$_('First published in %(year)s', year=doc.first_publish_year)
215+
</span>
216+
<br>
217+
$if doc.get('edition_count'):
218+
<span>
219+
<a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>$cond(doc.get('ia'), ',')
220+
</span>
221+
$if doc.get('ia'):
222+
<span>
223+
<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>
224+
</span>
225+
$if doc.get('languages') and doc_type in ['infogami_work', 'solr_work']:
226+
<span class="languages">
227+
$ user_lang = get_lang() or 'en'
228+
$ langs = [get_language_name(lang.key if hasattr(lang, 'key') else '/languages/' + lang, user_lang) for lang in doc.languages]
229+
$: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))
230+
</span>
231+
</span>
203232

204233
$if show_librarian_extras:
205234
<div class="searchResultItem__librarian-extras" title="$_('This is only visible to librarians.')">

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

Lines changed: 68 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -123,23 +123,25 @@
123123
color: var(--black);
124124
}
125125

126-
.searchResultItem .preview-covers {
127-
display: block;
128-
height: 45px;
129-
overflow: hidden;
130-
margin-top: var(--spacing-stack-sm);
131-
margin-bottom: var(--spacing-stack-xs);
126+
.search-result-item__preview-covers {
127+
display: flex;
128+
align-items: center;
132129
}
133130

134-
.searchResultItem .preview-covers img {
131+
.search-result-item__preview-covers img {
135132
border-radius: var(--border-radius-thumbnail);
136-
opacity: 0.7;
133+
border: 2px solid var(--grey-fafafa);
134+
opacity: 1;
137135
}
138136

139-
.searchResultItem .preview-covers--blur img {
137+
.search-result-item__preview-covers--blur img {
140138
filter: blur(2px);
141139
}
142140

141+
.searchResultItem .bookcover--blur img {
142+
filter: blur(4px);
143+
}
144+
143145
.searchResultItem .bookcover {
144146
width: 100%;
145147
margin: var(--spacing-inline-sm) var(--spacing-inline-md) 0
@@ -154,10 +156,6 @@
154156
width: 175px;
155157
}
156158

157-
.searchResultItem .bookcover--blur img {
158-
filter: blur(4px);
159-
}
160-
161159
.searchResultItem .imageLg {
162160
text-align: center;
163161
width: 100%;
@@ -191,6 +189,44 @@
191189
font-style: normal;
192190
}
193191

192+
.search-result-item__preview-covers-container {
193+
display: flex;
194+
align-items: center;
195+
gap: var(--spacing-inline-md);
196+
margin-top: var(--spacing-stack-sm);
197+
margin-bottom: var(--spacing-stack-xs);
198+
}
199+
200+
.search-result-item__preview-covers > * {
201+
position: relative;
202+
display: inline-block;
203+
flex-shrink: 0;
204+
}
205+
206+
.search-result-item__preview-covers :nth-child(n + 2) {
207+
margin-left: -8px;
208+
}
209+
210+
.search-result-item__preview-covers :nth-child(1) {
211+
z-index: var(--z-index-level-5);
212+
}
213+
214+
.search-result-item__preview-covers :nth-child(2) {
215+
z-index: var(--z-index-level-4);
216+
}
217+
218+
.search-result-item__preview-covers :nth-child(3) {
219+
z-index: var(--z-index-level-3);
220+
}
221+
222+
.search-result-item__preview-covers :nth-child(4) {
223+
z-index: var(--z-index-level-2);
224+
}
225+
226+
.search-result-item__preview-covers :nth-child(5) {
227+
z-index: var(--z-index-level-1);
228+
}
229+
194230
.srw__chapters {
195231
background: rgba(0, 124, 255, 0.2);
196232
border-radius: 4px;
@@ -240,8 +276,25 @@
240276
color: var(--primary-blue);
241277
}
242278

243-
.preview-covers img:hover {
244-
opacity: 1;
279+
@media (hover: hover) and (pointer: fine) {
280+
.search-result-item__preview-covers :hover {
281+
z-index: var(--z-index-level-5);
282+
}
283+
284+
.search-result-item__preview-covers :hover img {
285+
border-color: var(--primary-blue);
286+
}
287+
}
288+
289+
.search-result-item__preview-covers :active img {
290+
transform: scale(0.97);
291+
}
292+
293+
.search-result-item__preview-covers :focus-visible {
294+
z-index: var(--z-index-level-5);
295+
box-shadow: var(--box-shadow-focus);
296+
border-radius: var(--border-radius-thumbnail);
297+
outline: none;
245298
}
246299

247300
/* Delete trashcan appears on https://openlibrary.org/people/jdlrobson/lists */

‎static/css/tokens/border-radius.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
:root {
2323
--border-radius-button: var(--border-radius-md); /* buttons, tabs */
2424
--border-radius-input: var(--border-radius-md); /* inputs, textareas */
25-
--border-radius-thumbnail: var(--border-radius-sm); /* small images */
25+
--border-radius-thumbnail: var(--border-radius-md); /* small images */
2626
--border-radius-media: var(--border-radius-lg); /* large images, videos */
2727
--border-radius-card: var(--border-radius-lg); /* cards */
2828
--border-radius-overlay: var(--border-radius-xl); /* dialogs, modals */

0 commit comments

Comments
 (0)