ArchiveLabs / ArchiveLabs/openlibrary-components
Changeable View Modes
- 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:
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`.
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.
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
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