sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): fix spectrum center-shift arrow behavior

Browse Source 
Two bugs fixed:

1. Wrong vertical position of shift buttons and bookmark side panels.
   top: calc((--spectrum-plot-height - --overview-plot-height) / 2)
   evaluates to 0 when both vars are equal (default 160 px), so
   translateY(-50%) placed the buttons at the top edge of .spectrum-wrap
   instead of mid-canvas. Changed to calc(--spectrum-plot-height / 2).

2. Rapid clicks on the arrows did not accumulate: each call read
   lastSpectrumData.center_hz which is only updated when the server
   sends a new spectrum frame. Added spectrumCenterPendingHz to track
   the optimistic center immediately on click; reset when the server
   confirms a frame near the expected position.

Also hide .spectrum-bookmark-side on ≤640px (no horizontal room on
narrow phones); previously visible but clipped off-screen.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-10 18:57:59 +01:00
parent 51df676e46
commit 2e8f025b19
2 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+4 -12
View File
@@ -2049,16 +2049,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
width: 1.5rem;
height: 2.35rem;
}
.spectrum-bookmark-side {
width: 5.85rem;
gap: 0.22rem;
}
.spectrum-bookmark-side-left {
left: -7.85rem;
}
.spectrum-bookmark-side-right {
right: -7.85rem;
}
/* Bookmark side panels need too much horizontal space on narrow screens */
.spectrum-bookmark-side { display: none !important; }
.spectrum-bookmark-side .spectrum-bookmark-chip {
font-size: 0.58rem;
padding: 2px 6px;
@@ -2281,7 +2273,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
}
.spectrum-edge-shift {
position: absolute;
top: calc((var(--spectrum-plot-height) - var(--overview-plot-height)) / 2);
top: calc(var(--spectrum-plot-height) / 2);
transform: translateY(-50%);
z-index: 8;
width: 1.7rem;
@@ -2410,7 +2402,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
}
.spectrum-bookmark-side {
position: absolute;
top: calc((var(--spectrum-plot-height) - var(--overview-plot-height)) / 2);
top: calc(var(--spectrum-plot-height) / 2);
transform: translateY(-50%);
z-index: 7;
width: 7.25rem;