ArchiveLabs / ArchiveLabs/openlibrary-components

Changeable View Modes

Open
#48 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Right now `ac-listbox` has a very specific results view:

Image

I'd like to be able to support 3 *modes*:
1. Compact (what we're seeing)
2. Detailed (shows fewer results at once in viewport, may show table of contents, first line of description or other details).
3. Browse (grid, more like netflix; at least 3 cards per row, scaled to viewport)

When one *scrolls* up and down through the cards, no action should be taken, however if one explicitly moves their mouse over one of the cards and remains hovered for a second or so, (in any mode) it should temporarily expand and show a richer preview of the book (until the mouse exits the card). This card should broadly occur over the `ac-listbox`.

Image

One challenge is that in compact or detailed mode, there isn't really a way to leave the highlighted/focused card in `ac-listbox` without triggering focus of another card. For these two modes, I'm wondering if for *now* in compact or detailed mode only hovering over the book cover or title should expand the card. Maybe, if your mouse is over a row in compact or details mode, then the first action is that an "expand icon" transitions and fades in (appears) next to / after the title. When you then move your mouse over the title or cover, the netflix-style popover book preview emerges (so it almost becomes two step -- hover on row, then over on title/cover). This would only really be possible on desktop and that's okay.

Image

Another detail. When you scroll, it should change/disable the hand mouse icon and make it clear you are not in hover mode, you are just scrolling. Moving your mouse and being over the card should re-enable hand mouse pointer type.

Contributor guide

Open the contributing guide

Research direction

Start by locating the ac-listbox component and reviewing how its current compact results view handles focus, scrolling, and hover states. Define the scope for compact, detailed, and browse modes before implementation. Done should include the requested responsive layouts, delayed hover previews, and scroll behavior without changing focus unintentionally.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.