sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend): group signal visuals in main tab

Browse Source 
Wrap the waterfall and spectrum in a shared main-tab block so lower sections and other tabs keep consistent spacing.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-01 10:37:53 +01:00
parent 6e8b23052d
commit e3c7231650
2 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+29 -27
View File
@@ -48,10 +48,6 @@
<button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button> <button id="header-auth-btn" class="header-bar-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
</div> </div>
</div> </div>
<div class="overview-strip">
<canvas id="overview-canvas" aria-hidden="true"></canvas>
<div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
</div>
<!-- Auth gate (hidden by default, shown if auth is required) --> <!-- Auth gate (hidden by default, shown if auth is required) -->
<div id="auth-gate" style="display:none; max-width: 30rem; margin: 0 auto 0.9rem; padding: 1.25rem 0 1.5rem; text-align: center;"> <div id="auth-gate" style="display:none; max-width: 30rem; margin: 0 auto 0.9rem; padding: 1.25rem 0 1.5rem; text-align: center;">
<div style="margin-bottom: 1.5rem;"> <div style="margin-bottom: 1.5rem;">
@@ -72,33 +68,39 @@
<div id="loading-sub" style="color:#9aa4b5;"></div> <div id="loading-sub" style="color:#9aa4b5;"></div>
</div> </div>
<div id="content" style="display:none;"> <div id="content" style="display:none;">
<div id="spectrum-panel" style="display:none;"> <div class="signal-visual-block">
<div class="spectrum-wrap"> <div class="overview-strip">
<canvas id="spectrum-canvas"></canvas> <canvas id="overview-canvas" aria-hidden="true"></canvas>
<div id="spectrum-tooltip"></div> <div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
<div id="spectrum-freq-axis"></div>
</div> </div>
<div id="spectrum-controls"> <div id="spectrum-panel" style="display:none;">
<div id="spectrum-bw-row"> <div class="spectrum-wrap">
<label id="spectrum-bw-label">Bandwidth <input type="number" id="spectrum-bw-input" value="" step="0.1" min="0.1" /> kHz</label> <canvas id="spectrum-canvas"></canvas>
<button id="spectrum-bw-set-btn" type="button">Set</button> <div id="spectrum-tooltip"></div>
<button id="spectrum-bw-auto-btn" type="button">Auto BW</button> <div id="spectrum-freq-axis"></div>
</div> </div>
<div id="spectrum-level-row"> <div id="spectrum-controls">
<label class="overview-control" id="spectrum-peak-hold-label">Peak Hold <div id="spectrum-bw-row">
<select id="overview-peak-hold" class="status-input"> <label id="spectrum-bw-label">Bandwidth <input type="number" id="spectrum-bw-input" value="" step="0.1" min="0.1" /> kHz</label>
<option value="500">0.5 s</option> <button id="spectrum-bw-set-btn" type="button">Set</button>
<option value="1000">1 s</option> <button id="spectrum-bw-auto-btn" type="button">Auto BW</button>
<option value="2000" selected>2 s</option> </div>
<option value="5000">5 s</option> <div id="spectrum-level-row">
</select> <label class="overview-control" id="spectrum-peak-hold-label">Peak Hold
</label> <select id="overview-peak-hold" class="status-input">
<label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-115" step="5" /> dB</label> <option value="500">0.5 s</option>
<button id="spectrum-auto-btn" type="button">Auto</button> <option value="1000">1 s</option>
<option value="2000" selected>2 s</option>
<option value="5000">5 s</option>
</select>
</label>
<label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-115" step="5" /> dB</label>
<button id="spectrum-auto-btn" type="button">Auto</button>
</div>
</div> </div>
<div id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom &middot; Ctrl+Scroll to tune &middot; Drag to pan &middot; Drag BW edges to resize</div>
<div id="spectrum-hint-touch" class="spectrum-hint-touch">Pinch to zoom &middot; Drag to pan &middot; Drag BW edges to resize</div>
</div> </div>
<div id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom &middot; Ctrl+Scroll to tune &middot; Drag to pan &middot; Drag BW edges to resize</div>
<div id="spectrum-hint-touch" class="spectrum-hint-touch">Pinch to zoom &middot; Drag to pan &middot; Drag BW edges to resize</div>
</div> </div>
<div class="status"> <div class="status">
<div class="full-row freq-row"> <div class="full-row freq-row">
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+7 -1
View File
@@ -512,6 +512,12 @@ small { color: var(--text-muted); }
position: relative; position: relative;
z-index: 4; z-index: 4;
} }
.signal-visual-block {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 0.9rem;
}
#rds-ps-overlay { #rds-ps-overlay {
display: none; display: none;
position: absolute; position: absolute;
@@ -1003,7 +1009,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
/* ── Spectrum display ─────────────────────────────────────────────────── */ /* ── Spectrum display ─────────────────────────────────────────────────── */
#spectrum-panel { #spectrum-panel {
margin-bottom: 0.9rem; margin-bottom: 0;
} }
.spectrum-wrap { .spectrum-wrap {
position: relative; position: relative;