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

[fix](trx-frontend-http): clean up bookmark spectrum markers and axis labels

Browse Source 
- Canvas: remove clashing ribbon polygon; draw only a dashed amber
  vertical line at each bookmark frequency
- Axis labels: replace clip-path ribbon with inline SVG bookmark icon
  (amber rectangle with V-notch) + name text; add more padding
- DOM rebuild: only rebuild axis spans when the set of visible bookmark
  IDs changes; always update left positions for smooth pan/zoom

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-01 19:49:35 +01:00
parent 53da1570ec
commit 5e3f8791b5
2 changed files with 59 additions and 57 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
+15 -12
View File
@@ -1533,7 +1533,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
transition: height 80ms ease;
}
#spectrum-bookmark-axis.bm-axis-visible {
height: 22px;
height: 26px;
}
#spectrum-bookmark-axis span {
position: absolute;
@@ -1543,22 +1543,25 @@ button:focus-visible, input:focus-visible, select:focus-visible {
cursor: pointer;
font-weight: 600;
font-size: 0.66rem;
/* amber bookmark-ribbon appearance */
background: rgba(246,173,85,0.18);
color: #c07320;
border: 1px solid rgba(246,173,85,0.55);
border-radius: 3px 3px 0 0;
padding: 1px 5px 0;
/* clip the bottom into a V-notch bookmark shape */
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
max-width: 110px;
color: #b05e10;
border: 1px solid rgba(246,173,85,0.60);
border-radius: 3px;
padding: 2px 8px 2px 6px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 4px;
}
#spectrum-bookmark-axis span:hover {
background: rgba(246,173,85,0.38);
color: #7a4a00;
background: rgba(246,173,85,0.35);
color: #7a4000;
}
.bm-icon-svg path {
fill: rgba(246,173,85,0.92);
}
#spectrum-tooltip {
display: none;