[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:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user