From fcfb14e7ad2637d17ae8a82f3634572f3b784a58 Mon Sep 17 00:00:00 2001 From: franzz Date: Fri, 18 Sep 2026 13:58:15 +0200 Subject: [PATCH] Tweak room title --- static/app.js | 3 --- static/panel.css | 25 +++++++++---------------- templates/index.html | 1 - 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/static/app.js b/static/app.js index 29911f5..beee9eb 100644 --- a/static/app.js +++ b/static/app.js @@ -53,7 +53,6 @@ els('[data-icon]').forEach((svg) => paintIcon(svg, ICONS[svg.dataset.icon])); const ui = { foot: el('[data-role="foot"]'), toast: el('[data-role="toast"]'), - avrStatus: el('[data-role="avr-status"]'), inputButton: el('[data-role="input-button"]'), inputName: el('[data-role="input-name"]'), inputIcon: el('[data-role="input-icon"]'), @@ -770,8 +769,6 @@ function render(state) { currentInput = avr.input || null; ui.inputName.textContent = currentInput ? currentInput.name : '—'; setInputIcon(currentInput ? currentInput.code : null); - ui.avrStatus.textContent = avr.connected ? 'ready' : 'offline'; - ui.avrStatus.classList.toggle('on', Boolean(avr.connected)); avrNowPlaying = avr.now_playing || null; renderTrack(avrNowPlaying, avrTrack); paintGrouping(); // after avrNowPlaying, which decides where the AVR's card sits diff --git a/static/panel.css b/static/panel.css index 827acb1..93038dc 100644 --- a/static/panel.css +++ b/static/panel.css @@ -19,7 +19,7 @@ --shadow: rgba(0, 0, 0, .45); /* spacing scale for every gap/padding/margin in the sheet, smallest to largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */ - --space-2xs: 4px; + --space-xs: 4px; --space-lg: 24px; --space-md: 12px; --space-sm: 8px; @@ -81,7 +81,7 @@ svg { width: 22px; height: 22px; fill: currentColor; } .app > .on-top { order: -1; } /* --- header ---------------------------------------------------------- */ -.top { order: -2; display: flex; align-items: center; justify-content: center; padding: var(--space-2xs) var(--space-2xs) 0; } +.top { order: -2; display: flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-xs) 0; } .top h1 { margin: 0; line-height: 0; } .top .logo { height: 34px; width: auto; display: block; } @@ -106,22 +106,15 @@ svg { width: 22px; height: 22px; fill: currentColor; } var(--card) 70%); } -.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } +.card-head { display: flex; align-items: center; justify-content: center; gap: var(--space-md); } .card-head h2 { display: flex; align-items: center; gap: var(--space-md); - margin: 0; min-width: 0; + margin: var(--space-sm); min-width: 0; font-size: 17px; font-weight: 600; } .card-head h2 .room-icon { flex: 0 0 auto; height: 20px; width: auto; fill: currentColor; } .card-head h2 .room-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.pill { - font-size: 11px; text-transform: uppercase; letter-spacing: .08em; - color: var(--muted); background: var(--raised); - padding: var(--space-2xs) var(--space-sm); border-radius: 999px; -} -.pill.on { color: var(--live); } - /* --- now playing, between the room's name and its volume --------------- */ .now-playing { display: flex; align-items: center; gap: var(--gutter); min-width: 0; @@ -138,8 +131,8 @@ svg { width: 22px; height: 22px; fill: currentColor; } .cover.poster { width: 50px; height: 75px; border-radius: 9px; } .track { display: flex; flex-direction: column; min-width: 0; } .track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.song { font-size: 20px; font-weight: 550; } -.artist { font-size: 17px; color: var(--muted); } +.song { font-size: 17px; font-weight: 550; } +.artist { font-size: 15px; color: var(--muted); } /* Doubles as the line between the song and the volume -- it goes with the block, when nothing is playing. Muted throughout, so it never competes @@ -316,7 +309,7 @@ button.sources-btn.loading .icon { display: none; } .ghost { background: transparent; border: 1px solid var(--edge); color: var(--muted); } .ghost:active { background: var(--card); color: var(--ink); } -.foot { margin: var(--space-2xs) var(--space-2xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; } +.foot { margin: var(--space-xs) var(--space-xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; } .foot.bad { color: var(--warn); } /* --- input sheet ------------------------------------------------------ */ @@ -335,8 +328,8 @@ button.sources-btn.loading .icon { display: none; } } @keyframes rise { from { transform: translateY(14%); opacity: .4; } } -.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--edge); margin: var(--space-2xs) auto var(--space-2xs); } -.sheet h3 { margin: 0 var(--space-2xs); font-size: 14px; font-weight: 600; color: var(--muted); } +.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--edge); margin: var(--space-xs) auto var(--space-xs); } +.sheet h3 { margin: 0 var(--space-xs); font-size: 14px; font-weight: 600; color: var(--muted); } .options { display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; -webkit-overflow-scrolling: touch; } .option { diff --git a/templates/index.html b/templates/index.html index 491f0fd..df98880 100644 --- a/templates/index.html +++ b/templates/index.html @@ -110,7 +110,6 @@

{{ host.label }}

- offline