[feat](trx-frontend-http): refine top bar and overview controls

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-02-28 00:37:37 +01:00
parent b5cac4be41
commit adc17507ce
3 changed files with 10 additions and 57 deletions
@@ -2600,7 +2600,7 @@ let spectrumZoom = 1;
let spectrumPanFrac = 0.5;
// Y-axis level: floor = bottom dB value shown; range = total dB span.
let spectrumFloor = -100;
let spectrumFloor = -115;
let spectrumRange = 80;
// BW-strip drag state.
@@ -22,7 +22,8 @@
<select id="header-rig-switch-select" aria-label="Select active rig"></select>
<button id="header-rig-switch-btn" type="button">Switch Rig</button>
</div>
<button id="header-auth-btn" class="theme-toggle-btn" type="button" style="display:none;" aria-label="Login or Logout">Login</button>
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</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 class="header">
@@ -35,9 +36,6 @@
<div class="subtitle" id="rig-subtitle" style="font-weight: 700;">Rig: --</div>
<div class="subtitle" id="owner-subtitle">Owner: --</div>
</div>
<div class="header-actions">
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
</div>
</div>
<div class="overview-strip">
<div class="overview-toolbar">
@@ -49,7 +47,6 @@
<option value="5000">5 s</option>
</select>
</label>
<span class="overview-label" id="overview-label">Signal History</span>
</div>
<canvas id="overview-canvas" aria-hidden="true"></canvas>
</div>
@@ -85,7 +82,7 @@
<button id="spectrum-bw-set-btn" type="button">Set</button>
</div>
<div id="spectrum-level-row">
<label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-100" step="5" /> dB</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>
@@ -375,7 +375,7 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
small { color: var(--text-muted); }
.header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 1rem;
margin-bottom: -0.45rem;
@@ -439,12 +439,6 @@ small { color: var(--text-muted); }
gap: 0;
flex-shrink: 0;
}
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
.top-bar-actions {
display: flex;
align-items: center;
@@ -472,50 +466,13 @@ small { color: var(--text-muted); }
font-size: 0.78rem;
white-space: nowrap;
}
.header-logo { height: 4.6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.button-group {
display: flex;
gap: 0;
align-items: center;
}
.button-group .theme-toggle-btn {
border-radius: 0;
margin-left: -1px;
}
.button-group .theme-toggle-btn:first-child {
border-radius: 999px 0 0 999px;
margin-left: 0;
}
.button-group .theme-toggle-btn:last-child:not(:first-child) {
border-radius: 0 999px 999px 0;
}
.theme-toggle-btn {
height: 1.7rem;
min-height: 1.7rem;
.header-bar-btn {
height: 2rem;
padding: 0 0.65rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 999px;
border: 1px solid var(--btn-border);
background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #ffffff), var(--btn-bg));
color: var(--text);
cursor: pointer;
transition: all 150ms ease;
}
.theme-toggle-btn:hover {
opacity: 0.9;
}
[data-theme="light"] .theme-toggle-btn {
background: linear-gradient(135deg, #0f172a, #334155);
border-color: #334155;
color: #f8fafc;
font-size: 0.78rem;
white-space: nowrap;
}
.header-logo { height: 4.6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.subtitle { color: var(--text-muted); font-size: 0.95rem; }
.subtitle a { color: var(--accent-green); text-decoration: none; }
.subtitle a:hover { text-decoration: underline; }
@@ -711,7 +668,6 @@ button:focus-visible, input:focus-visible, select:focus-visible {
.freq-inline { flex-wrap: wrap; }
.header-text { width: auto; min-width: 0; flex: 0 1 auto; }
.header-left { justify-content: flex-end; }
.header-actions { justify-content: flex-end; }
.tab-bar { flex-wrap: wrap; }
.top-bar-actions { width: 100%; justify-content: space-between; }
.header-rig-switch { width: auto; justify-content: flex-end; }