[feat](trx-frontend-http): move bookmark axis between waterfall and waveform

Relocate #spectrum-bookmark-axis from inside .spectrum-wrap to the
flex gap between .overview-strip (waterfall) and #spectrum-panel
(waveform). Give it z-index:5 so labels sit above the signal-overlay-
canvas (BW/freq selector, z-index:4). Drop the now-unneeded
#spectrum-freq-axis.bm-axis-open border-radius hack and the
corresponding JS class toggle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-01 20:03:57 +01:00
parent 18ebf24115
commit 8b94c5e0bd
3 changed files with 4 additions and 10 deletions
@@ -4295,7 +4295,6 @@ function drawSpectrum(data) {
function updateBookmarkAxis(range) {
const axisEl = document.getElementById("spectrum-bookmark-axis");
const freqAxisEl = document.getElementById("spectrum-freq-axis");
if (!axisEl) return;
const _bmRef = typeof bmList !== "undefined" ? bmList : null;
@@ -4305,7 +4304,6 @@ function updateBookmarkAxis(range) {
const hasVisible = visBookmarks.length > 0;
axisEl.classList.toggle("bm-axis-visible", hasVisible);
if (freqAxisEl) freqAxisEl.classList.toggle("bm-axis-open", hasVisible);
if (!hasVisible) {
if (axisEl.dataset.bmKey) { axisEl.innerHTML = ""; axisEl.dataset.bmKey = ""; }
@@ -78,12 +78,12 @@
<div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
<div id="aprs-bar-overlay" aria-live="polite" aria-label="Recent APRS frames"></div>
</div>
<div id="spectrum-bookmark-axis"></div>
<div id="spectrum-panel" style="display:none;">
<div class="spectrum-wrap">
<canvas id="spectrum-canvas"></canvas>
<div id="spectrum-tooltip"></div>
<div id="spectrum-freq-axis"></div>
<div id="spectrum-bookmark-axis"></div>
</div>
<div id="spectrum-controls">
<div id="spectrum-bw-row">
@@ -1516,20 +1516,16 @@ button:focus-visible, input:focus-visible, select:focus-visible {
top: 2px;
font-weight: 700;
}
#spectrum-freq-axis.bm-axis-open {
border-radius: 0;
border-bottom-color: transparent;
}
#spectrum-bookmark-axis {
position: relative;
z-index: 5;
height: 0;
overflow: hidden;
width: 100%;
font-size: 0.68rem;
background: var(--bg-secondary);
border-radius: 0 0 6px 6px;
border: 1px solid var(--border);
border-top: none;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: height 80ms ease;
}
#spectrum-bookmark-axis.bm-axis-visible {