franzz/heos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show merged rooms inside the host's card

Browse Source 
Two cards side by side said nothing about whether the rooms were playing
together; now a room that joins the AVR moves into its card, under the
input it is playing, and leaving puts the card back in its own slot. The
button changes with it: Join Home Cinema when it stands alone, Leave when
it is in the group, since the card's position already says which it is.

Also fixes Separate everything, which sent a GET to a POST-only route and
so failed with a 405 and snapped the rooms straight back.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
franzz
2026-09-14 21:50:02 +02:00
co-authored by Claude Opus 5
parent aa1b734b3a
commit 6213bcf23f
4 changed files with 64 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/panel.css
+20
View File
@@ -147,6 +147,26 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
.source-button .value { flex: 1; font-size: 19px; font-weight: 600; }
.source-button .chevron { color: var(--muted); }
/* --- rooms merged into the host's card --------------------------------- */
.joined { display: flex; flex-direction: column; gap: 12px; }
.joined-title { margin: 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.joined-rooms { display: flex; flex-direction: column; gap: 14px; }
/* The card stops being a card in here: one border around the group, not
one around every room in it. */
.joined .card.room { background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; }
.joined .card.room + .card.room { border-top: 1px solid var(--edge); padding-top: 14px; }
.joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); }
.joined .level b { font-size: 22px; }
.joined .step { height: 54px; }
.joined .toggle,
.joined .toggle[aria-pressed="true"] {
height: 40px; font-size: 13px; font-weight: 500;
background: none; border: 1px solid var(--edge); color: var(--muted);
}
.joined .toggle .dot { display: none; }
.joined .toggle:active { background: var(--raised); color: var(--ink); }
/* --- misc ------------------------------------------------------------- */
.wide { width: 100%; height: 50px; border-radius: 16px; font-size: 15px; }
.ghost { background: transparent; border: 1px solid var(--edge); color: var(--muted); }