[fix](trx-frontend-http): swap spectrum layout — waterfall on top, waveform on bottom

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-26 21:01:12 +01:00
parent a82541e24e
commit d99ce62562
2 changed files with 5 additions and 5 deletions
@@ -117,13 +117,13 @@
<div class="spectrum-wrap"> <div class="spectrum-wrap">
<div id="spectrum-bookmark-axis"></div> <div id="spectrum-bookmark-axis"></div>
<div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div> <div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
<canvas id="spectrum-waterfall-canvas"></canvas>
<canvas id="spectrum-canvas"></canvas> <canvas id="spectrum-canvas"></canvas>
<div id="spectrum-zoom-indicator" aria-hidden="true"></div> <div id="spectrum-zoom-indicator" aria-hidden="true"></div>
<div id="spectrum-minimap" aria-hidden="true"><div class="minimap-view"></div></div> <div id="spectrum-minimap" aria-hidden="true"><div class="minimap-view"></div></div>
<div id="spectrum-db-axis" aria-hidden="true"></div> <div id="spectrum-db-axis" aria-hidden="true"></div>
<div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div> <div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div>
<div id="spectrum-tooltip"></div> <div id="spectrum-tooltip"></div>
<canvas id="spectrum-waterfall-canvas"></canvas>
<div id="spectrum-freq-axis"> <div id="spectrum-freq-axis">
<button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button> <button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button>
<button id="spectrum-center-right-btn" class="spectrum-edge-shift spectrum-edge-shift-right" type="button" aria-label="Shift spectrum center right">&rsaquo;</button> <button id="spectrum-center-right-btn" class="spectrum-edge-shift spectrum-edge-shift-right" type="button" aria-label="Shift spectrum center right">&rsaquo;</button>
@@ -2989,13 +2989,12 @@ button:focus-visible, input:focus-visible, select:focus-visible {
width: 100%; width: 100%;
height: var(--spectrum-plot-height); height: var(--spectrum-plot-height);
background: var(--spectrum-bg); background: var(--spectrum-bg);
border-radius: 6px 6px 0 0;
cursor: crosshair; cursor: crosshair;
touch-action: none; touch-action: none;
} }
#spectrum-db-axis { #spectrum-db-axis {
position: absolute; position: absolute;
top: 0; top: var(--spectrum-plot-height);
left: 0; left: 0;
width: 3rem; width: 3rem;
height: var(--spectrum-plot-height); height: var(--spectrum-plot-height);
@@ -3111,7 +3110,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
#spectrum-zoom-indicator { #spectrum-zoom-indicator {
display: none; display: none;
position: absolute; position: absolute;
top: 6px; top: calc(var(--spectrum-plot-height) + 6px);
right: 3.5rem; right: 3.5rem;
z-index: 9; z-index: 9;
font-size: 0.68rem; font-size: 0.68rem;
@@ -3151,6 +3150,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
width: 100%; width: 100%;
height: var(--spectrum-plot-height); height: var(--spectrum-plot-height);
background: var(--spectrum-bg); background: var(--spectrum-bg);
border-radius: 6px 6px 0 0;
cursor: crosshair; cursor: crosshair;
touch-action: none; touch-action: none;
} }
@@ -3199,7 +3199,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
} }
.spectrum-bookmark-side { .spectrum-bookmark-side {
position: absolute; position: absolute;
top: calc(var(--spectrum-plot-height) / 2); top: calc(var(--spectrum-plot-height) * 1.5);
transform: translateY(-50%); transform: translateY(-50%);
z-index: 7; z-index: 7;
width: var(--spectrum-bookmark-side-width); width: var(--spectrum-bookmark-side-width);