diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js index 7afa997..939c483 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js @@ -4647,6 +4647,14 @@ function clearDecodeContactPaths() { clearDecodeContactPathRender(entry); } decodeContactPaths.clear(); + updateMapPathsAnimationClass(); +} + +const MAP_PATHS_STATIC_THRESHOLD = 20; +function updateMapPathsAnimationClass() { + const mapEl = document.getElementById("aprs-map"); + if (!mapEl) return; + mapEl.classList.toggle("map-paths-static", decodeContactPaths.size > MAP_PATHS_STATIC_THRESHOLD); } function formatDecodeContactDistance(distanceKm) { @@ -4756,6 +4764,7 @@ function syncDecodeContactPathVisibility() { ensureDecodeContactPathRendered(entry); } renderMapQsoSummary(); + updateMapPathsAnimationClass(); } function setMapRadioPathTo(lat, lon, color, className = "aprs-radio-path") { @@ -8646,7 +8655,7 @@ function createBookmarkChip(bm, colorMap, options = {}) { : ( "\u00a0" + esc(bm.name) + "\u00a0" + esc(bm.name) + "" ); span.innerHTML = labelHtml; diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index 0fab7cc..2ad1bbf 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -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);