[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:
@@ -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">‹</button>
|
<button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">‹</button>
|
||||||
<button id="spectrum-center-right-btn" class="spectrum-edge-shift spectrum-edge-shift-right" type="button" aria-label="Shift spectrum center right">›</button>
|
<button id="spectrum-center-right-btn" class="spectrum-edge-shift spectrum-edge-shift-right" type="button" aria-label="Shift spectrum center right">›</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);
|
||||||
|
|||||||
Reference in New Issue
Block a user