feat(design): a Plex title's one action list (C1) — the poster's "…", details and the pin in its menu (E28 S3e2)
Every Plex poster list (library, Discover rails, person, show, season, collection, Home's rails) now opens one menu per list from the right-click, the long-press, Shift+F10 and the card's "…": play/open, watched, add to playlist, media info, copy title, the pin (usePlexCardActions + PlexMenu, replacing the pin-only PlexPinMenu). The card keeps its state at rest and shows watched / add to playlist / "…" on its picture on hover (ui/reveal.ts, shared with the video card); on touch the toggles are gone and a 44px "…" sits beside the title, while the watched pill stays. The hover ⓘ left the card; an episode's add button moved from its caption to the hover row. Seasons get their own short menu (open, watched, add, copy), labelled "Open season" (the card's overlay said "Open show"). Related shows are ordinary poster cards now. A collection's admin "Remove" X moved into its menu, still behind the confirmation. The collection grid is two columns on a phone. The unused .reveal-idle rule is gone.
This commit is contained in:
+5
-20
@@ -713,13 +713,7 @@ body {
|
||||
but on a touch device — which never hovers — it is invisible AND still tappable. So the reveal is
|
||||
gated on `@media (hover: hover)`: only a hover-capable pointer hides it until the group is hovered
|
||||
or focused (keyboard too, via `:focus-within`); a touch device keeps the default opacity:1 and the
|
||||
control is always shown. `.reveal-idle` is the counterpart badge a control replaces (e.g. the
|
||||
"watched" pill under the watched-toggle): visible at rest, faded when the group is hovered, and
|
||||
dropped entirely on touch — where the toggle is always present, so the two would otherwise collide
|
||||
at the same corner. Requires a `.group` ancestor (Tailwind's group marker). */
|
||||
.reveal-idle {
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
control is always shown. Requires a `.group` ancestor (Tailwind's group marker). */
|
||||
@media (hover: hover) {
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
@@ -730,29 +724,20 @@ body {
|
||||
.reveal:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
/* Fade the idle badge whenever its companion control is revealed — on hover AND on keyboard
|
||||
focus-within (the `.reveal` trigger set above lists both), else the two overlap at the same
|
||||
corner for a keyboard user. */
|
||||
.group:hover .reveal-idle,
|
||||
.group:focus-within .reveal-idle {
|
||||
opacity: 0;
|
||||
}
|
||||
/* The mirror of `.reveal-hover`: a control that exists ONLY on touch, because a mouse reaches the
|
||||
same action another way — the video card's "…" beside the title, whose mouse twin sits in the
|
||||
hover row on the picture (E28 C1). `display: none`, so it is no Tab stop either. */
|
||||
same action another way — a video or Plex card's "…" beside the title, whose mouse twin sits
|
||||
in the hover row on the picture (E28 C1, `ui/reveal.ts`). `display: none`, so it is no Tab stop either. */
|
||||
.touch-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
.reveal-idle {
|
||||
display: none;
|
||||
}
|
||||
/* Sibling of `.reveal` for a MOUSE-ONLY hover-reveal: unlike `.reveal` (shown at rest on touch),
|
||||
a `.reveal-hover` control is removed entirely on a device that can't hover, so it is never an
|
||||
invisible tap/Tab target. Pair it with the site's own `opacity-0 group-hover:… group-focus-within:…`
|
||||
(which still governs the hover + keyboard case). For a full-card/edge affordance whose action is
|
||||
already reachable on touch another way — VideoCard's play overlay (tapping the card plays/resumes)
|
||||
already reachable on touch another way — a card's hover row (its "…" beside the title opens the
|
||||
same actions: `ui/reveal.ts`), VideoCard's play overlay (tapping the card plays/resumes)
|
||||
and the Carousel arrows (swiping scrolls the strip) — where a permanent scrim/edge button is not
|
||||
wanted. Group-agnostic (encodes only the touch removal), so it works under any `.group`/`group\/…`. */
|
||||
.reveal-hover {
|
||||
|
||||
Reference in New Issue
Block a user