[feat](trx-frontend-http): disable path animations above threshold; wrap axis bookmark labels
Suppress stroke-dashoffset animation and drop-shadow filter on all contact/radio paths when decodeContactPaths.size > 20 by toggling .map-paths-static on #aprs-map, avoiding per-frame GPU compositing with large decode histories. Wrap non-sideStack bookmark chip labels in <span class="spectrum-bookmark-name"> and allow word-break on axis chips so long names split across two lines instead of being clipped. Axis bar switches to min-height so it grows to fit taller chips. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
@@ -2079,6 +2079,12 @@ body.map-fake-fullscreen-active {
|
||||
.trx-receiver-marker { stroke: var(--accent-green) !important; fill: var(--accent-green) !important; }
|
||||
.receiver-popup-active { font-size: 0.75em; background: rgba(194,75,26,0.15); color: var(--accent-green); border: 1px solid rgba(194,75,26,0.3); border-radius: 3px; padding: 0 0.25rem; margin-left: 0.3rem; vertical-align: middle; }
|
||||
@keyframes aprs-radio-path-flow { to { stroke-dashoffset: -15; } }
|
||||
.map-paths-static .decode-contact-path,
|
||||
.map-paths-static .aprs-radio-path,
|
||||
.map-paths-static .locator-radio-path {
|
||||
animation: none;
|
||||
filter: none;
|
||||
}
|
||||
@keyframes trx-locator-breathe {
|
||||
0%, 100% { stroke-width: 2.4px; stroke-opacity: 0.78; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent-green) 18%, transparent)); }
|
||||
50% { stroke-width: 4.2px; stroke-opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-green) 52%, transparent)); }
|
||||
@@ -2895,13 +2901,13 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
transition: height 80ms ease;
|
||||
}
|
||||
#spectrum-bookmark-axis.bm-axis-visible {
|
||||
height: 26px;
|
||||
min-height: 26px;
|
||||
height: auto;
|
||||
}
|
||||
.spectrum-bookmark-chip {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
top: 2px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.66rem;
|
||||
@@ -2912,15 +2918,19 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
padding: 2px 8px;
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.4;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
.spectrum-bookmark-chip:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
.spectrum-bookmark-chip .spectrum-bookmark-name {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.spectrum-bookmark-side {
|
||||
position: absolute;
|
||||
top: calc(var(--spectrum-plot-height) / 2);
|
||||
|
||||
Reference in New Issue
Block a user