From 9f495021f0f3ab605526192f3df8d1df007c4a0f Mon Sep 17 00:00:00 2001 From: Stan Grams Date: Tue, 4 Aug 2026 07:46:56 +0200 Subject: [PATCH] [style](trx-frontend-http): name and fence the three audio groups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The row carries three unrelated things — how loud it is, whether there is any audio at all, and how much is arriving — and only the middle one was named. Each is a group now: VOLUME over the two sliders, SQL on its own switch, LEVEL over the meter, with a hairline between each. The rules are drawn only while the row is one line, measured against the row rather than the viewport: what fits depends on whether the rig transmits and whether it has a squelch at all. A rule divides what sits either side of it, so once a group wraps the wrap is the division and the rule would just be a mark at the start of a line — which is what it was at 900px before this. The labels carry the grouping on their own below that width, and the groups stack whole on a phone. Signed-off-by: Stan Grams --- .../trx-frontend-http/assets/web/index.html | 18 ++++-- .../trx-frontend-http/assets/web/style.css | 60 ++++++++++++++++--- 2 files changed, 64 insertions(+), 14 deletions(-) diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html index 5523aea4..e9fc9ae3 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html @@ -413,17 +413,23 @@ SPDX-License-Identifier: GPL-2.0-or-later
- - + + Volume + + + -
-
-
- Off + + Level +
+
+
+ Off +
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index d9fc993c..1ed1fde7 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -1856,9 +1856,35 @@ small { color: var(--text-muted); } font-size: 0.82rem; white-space: nowrap; } -/* Fenced off from the volume controls beside it: squelch decides whether there - is audio at all, which is not the same kind of control as how loud it is. - The rule belongs to the block, so it leaves with it on rigs without one. */ +/* The row carries three unrelated things — how loud, whether there is audio at + all, and how much is arriving — so each is named and fenced from the next. + Each rule belongs to the block that follows it, so it leaves when that block + does (the squelch is absent on rigs without one). */ +.audio-group { + display: inline-flex; + align-items: center; + gap: 0.5rem; + min-width: 0; +} +.audio-volume-group { + flex: 0 1 auto; +} +.audio-level-group { + flex: 1 1 12rem; + min-width: 8rem; +} +.audio-group-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-muted); + white-space: nowrap; +} +.audio-level-group #audio-status { + min-width: 3.4rem; +} +.audio-level-group::before, .sql-control::before { content: ""; align-self: stretch; @@ -1866,6 +1892,22 @@ small { color: var(--text-muted); } min-height: 1.5rem; margin-inline: 0.5rem 0.6rem; background: color-mix(in srgb, var(--border-light) 65%, transparent); + display: none; +} +/* Only while the row is one line. A rule divides what sits either side of it, + so once a group wraps onto its own line the wrap is the division and the + rule would just be a mark at the start of a line. Measured against the row, + not the viewport: what fits depends on whether the rig transmits and whether + it has a squelch at all. */ +#audio-row .inline { + container-type: inline-size; + container-name: audio-row; +} +@container audio-row (min-width: 57rem) { + .audio-level-group::before, + .sql-control::before { + display: block; + } } /* The name is the switch: one target instead of a label and a button that said the same thing twice, with the dot carrying the state. */ @@ -4567,9 +4609,11 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay { /* Wider volume sliders for touch */ .vol-slider { width: 100%; flex: 1 1 auto; } - /* The row stacks at this width, so the line break already separates the - squelch from the volumes and the rule would just start a line. */ - .sql-control::before { display: none; } + .audio-group { + flex-wrap: wrap; + width: 100%; + } + .audio-group-label { width: 100%; } .vol-label { flex-direction: row; align-items: center; @@ -4589,8 +4633,8 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay { } #rx-audio-btn, #tx-audio-btn, - #audio-level, - #audio-status, + .audio-volume-group, + .audio-level-group, #sdr-squelch-wrap { grid-column: 1 / -1; }