Fix "Voir les épisodes" rendering as a bare link instead of a button
All checks were successful
Publier l'image Docker / publish (push) Successful in 28s
All checks were successful
Publier l'image Docker / publish (push) Successful in 28s
Bug report: the button wasn't as visible as the others on a tile.
Cause: the global `button {}` rule in app.css that gives "Lancer une watch
party" its solid green look is tag-scoped, so it never applied to "Voir
les épisodes" - the one .tileBtn that's an <a> (a plain hash link, not a
<button>). "Voir sur Emby" avoided the same fate only because it also
carries .tileBtnLink, which explicitly sets its own background/color.
"Voir les épisodes" had neither, so it rendered as a bare, small,
default-blue link sitting on the tile overlay next to two solid buttons.
Fixed by moving the solid-button look onto .tileBtn itself (tag-agnostic:
background/color/border-radius/font-weight/hover), with .tileBtnLink now
overriding just the two properties that make "Voir sur Emby" read as the
secondary action. This is the semantically right fix, not just a visual
patch: for a Series tile "Voir les épisodes" IS the primary action (a
Series is never itself directly playable - WATCH_PARTY_TYPES in
server/src/index.js - so the two buttons never compete on the same tile)
- it should look like one, matching "Lancer une watch party"'s weight
exactly rather than "Voir sur Emby"'s secondary one.
Verified via computed styles on a mocked library grid (one Movie tile, one
Series tile): "Lancer une watch party" and "Voir les épisodes" now compute
to the identical rgb(82, 181, 75) background / white text / 600 weight /
8px radius, while "Voir sur Emby" on both tiles still computes to the
distinct secondary rgb(38, 38, 38).
docs/architecture.md has the full writeup.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
85bcf946b4
commit
0f3c364b42
2 changed files with 38 additions and 2 deletions
|
|
@ -340,18 +340,39 @@ button[disabled] { opacity: .5; cursor: default; }
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Base look is the same solid, high-contrast treatment as every other
|
||||||
|
button in the app (see the global `button {}` rule above) - but that
|
||||||
|
rule is tag-scoped, so it never applied to "Voir les épisodes", the one
|
||||||
|
.tileBtn that's an <a>, not a <button> (a plain hash link, so the
|
||||||
|
browser's native navigation handles it with no JS needed). Left
|
||||||
|
unstyled beyond padding/text-align, it rendered as a bare, small,
|
||||||
|
default-blue link sitting on the overlay - much less visible than
|
||||||
|
"Lancer une watch party" (a real <button>, styled by that global rule)
|
||||||
|
or "Voir sur Emby" (an <a>, but with the explicit .tileBtnLink look
|
||||||
|
below) right next to it. Styling .tileBtn itself, tag-agnostic, fixes
|
||||||
|
that - and is the semantically right call besides: for a Series tile,
|
||||||
|
"Voir les épisodes" IS the primary action (a Series is never itself
|
||||||
|
directly playable - see WATCH_PARTY_TYPES in server/src/index.js - so
|
||||||
|
the two never appear on the same tile), not a secondary one. */
|
||||||
.tileBtn {
|
.tileBtn {
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--accent);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tileBtn:hover { background: var(--accent-bright); }
|
||||||
|
|
||||||
|
/* "Voir sur Emby" only: the one secondary/neutral action among the tile
|
||||||
|
buttons - overrides just the two properties that make it read as
|
||||||
|
secondary, on top of .tileBtn's shared sizing/weight/radius above. */
|
||||||
.tileBtnLink {
|
.tileBtnLink {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tileBtnLink:hover { background: #333; }
|
.tileBtnLink:hover { background: #333; }
|
||||||
|
|
|
||||||
|
|
@ -501,6 +501,21 @@ generic grid:
|
||||||
`serverId`). `:hover`/`:focus-within` reveal it on mouse/keyboard;
|
`serverId`). `:hover`/`:focus-within` reveal it on mouse/keyboard;
|
||||||
`@media (hover: none)` keeps it always visible on touch devices, which
|
`@media (hover: none)` keeps it always visible on touch devices, which
|
||||||
have no hover state at all.
|
have no hover state at all.
|
||||||
|
|
||||||
|
Bug: "Voir les épisodes" used to render as a bare, default-blue link,
|
||||||
|
much less visible than the other two buttons next to it. The global
|
||||||
|
`button {}` rule (`app.css`) that gives "Lancer une watch party" its
|
||||||
|
solid green look is tag-scoped, so it never applied to "Voir les
|
||||||
|
épisodes" — the one `.tileBtn` that's an `<a>` (a plain hash link) rather
|
||||||
|
than a `<button>`. "Voir sur Emby" avoided the same fate only because it
|
||||||
|
additionally carries `.tileBtnLink`, which explicitly sets a background/
|
||||||
|
color for exactly this reason. Fixed by moving the solid-button look onto
|
||||||
|
`.tileBtn` itself, tag-agnostic, with `.tileBtnLink` now overriding just
|
||||||
|
the two properties that make it read as the secondary action. This also
|
||||||
|
happens to be the semantically correct fix, not just a visual patch: for
|
||||||
|
a Series tile "Voir les épisodes" *is* the primary action (a Series is
|
||||||
|
never itself directly playable, so the two buttons never compete for
|
||||||
|
primacy on the same tile) - it should look like one.
|
||||||
- **`views/series.js`** (route `/series/:id`): a detail header — poster,
|
- **`views/series.js`** (route `/series/:id`): a detail header — poster,
|
||||||
title + year, overview, a "Voir sur Emby" link — above season tabs
|
title + year, overview, a "Voir sur Emby" link — above season tabs
|
||||||
(`GET /api/catalog/series/:id/seasons`, Emby's `/Shows/{id}/Seasons`) and
|
(`GET /api/catalog/series/:id/seasons`, Emby's `/Shows/{id}/Seasons`) and
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue