Skip to content

Changeable View Modes #48

Description

@mekarpeles

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions