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

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:
Nicolas 2026-09-14 00:48:04 +02:00
parent 85bcf946b4
commit 0f3c364b42
2 changed files with 38 additions and 2 deletions

View file

@ -340,18 +340,39 @@ button[disabled] { opacity: .5; cursor: default; }
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 {
padding: 8px 10px;
font-size: 12px;
font-weight: 600;
text-align: center;
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 {
background: var(--panel);
color: var(--text);
border-radius: 8px;
font-weight: 600;
}
.tileBtnLink:hover { background: #333; }

View file

@ -501,6 +501,21 @@ generic grid:
`serverId`). `:hover`/`:focus-within` reveal it on mouse/keyboard;
`@media (hover: none)` keeps it always visible on touch devices, which
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,
title + year, overview, a "Voir sur Emby" link — above season tabs
(`GET /api/catalog/series/:id/seasons`, Emby's `/Shows/{id}/Seasons`) and