Skip to content

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

Merged
lokesh merged 10 commits intointernetarchive:masterfrom
Saad259:fix-consolidate-cover-previews
Apr 7, 2026
Merged

Consolidate cover previews on search results to show 4 stacked covers and adjust result details.#12090
lokesh merged 10 commits intointernetarchive:masterfrom
Saad259:fix-consolidate-cover-previews

Conversation

@Saad259
Copy link
Copy Markdown
Contributor

@Saad259 Saad259 commented Mar 13, 2026

Closes #9468

Technical

Limits cover previews to 4 instead of 10 and displays them in a stacked/overlapping style using a flex container. The resultDetails span (first published year, edition count, ebook count, languages) is now also displayed inline next to the covers rather than below them. CSS uses nth-child selectors for the stacking z-index and overlap instead of having separate classes per image, addressing the feedback from the original PR.

Testing

  1. Go to http://localhost:8080/search?q=harry+potter
  2. Confirm search results with multiple IA editions show 4 stacked covers with publishing info inline to the right
  3. Confirm results without IA covers still render normally with no broken layout

Screenshot

Before:
image

After:
image

Stakeholders

@cdrini

@Saad259 Saad259 force-pushed the fix-consolidate-cover-previews branch 2 times, most recently from 497020b to 0104395 Compare March 13, 2026 06:35
@Saad259 Saad259 force-pushed the fix-consolidate-cover-previews branch from 60e31e0 to d2aea2c Compare March 13, 2026 06:53
@Saad259
Copy link
Copy Markdown
Contributor Author

Saad259 commented Mar 14, 2026

@cdrini AccessLint checks are still ongoing almost a day later for this PR. Initially I had javascript_tests failing due to selector ordering in the css but I managed to fix the problem. Is this something I need to look into?

@github-actions github-actions Bot added the Needs: Response Issues which require feedback from lead label Mar 14, 2026
@lokesh lokesh self-requested a review April 7, 2026 16:25
lokesh added 6 commits April 7, 2026 10:29
- Show 5 preview covers instead of 4, with larger thumbnails and tighter overlap
- Add border, hover, and focus-visible styles to preview cover links
- Show edition/ebook/language details for works without preview covers
- Always show ebook count (not conditional on ia existing in preview section)
- Update border-radius-thumbnail token from 2px to 4px
Replace two-part `.searchResultItem .preview-covers` selectors with
single-class `.search-result-item__preview-covers` to reduce specificity
and resolve stylelint selector-max-specificity violations.
Replace hardcoded px values with design token variables and simplify
:where(img) selectors to plain img descendants.
@lokesh
Copy link
Copy Markdown
Collaborator

lokesh commented Apr 7, 2026

@Saad259
I went ahead and resolved the merge conflicts, additionally I fixed one bug and did a UI polish pass.

The bug caused us to hide the edition/ebook/language details for works without preview covers.

cover-preview.mp4

@lokesh lokesh added Needs: Testing and removed Needs: Response Issues which require feedback from lead labels Apr 7, 2026
@lokesh
Copy link
Copy Markdown
Collaborator

lokesh commented Apr 7, 2026

Tested on staging, looks great. Merging.

image

@lokesh lokesh merged commit 00cfbf6 into internetarchive:master Apr 7, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Consolidate cover previews on search results

3 participants