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

[fix](trx-frontend-http): move the map's fullscreen and filter toggles into the bar

Browse Source 
Fullscreen and Hide Filters floated in their own block over the map's
top-right corner, separate from the filter bar they sit beside.

Put them at the right-hand end of the bar, behind a separator. What made
this awkward before is that Hide Filters cannot live inside the thing it
hides, so the collapse now applies to the filters alone: the bar keeps its
two controls and shrinks to them at the map's right edge, leaving the whole
map visible and the way back one click away.

Fixes #38

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
sjg
2026-08-05 19:34:09 +02:00
parent 08005c5c07
commit 88d04253ca
5 changed files with 119 additions and 74 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
+36 -20
View File
@@ -2558,19 +2558,20 @@ button.map-qso-card:focus-visible {
}
/* A toolbar across the top of the map rather than a panel parked in a corner:
it leaves the map itself unobscured, and the bottom-left band legend keeps
its place. It stops short of the corner controls, which stay outside it --
the button that hides the filters cannot live inside the thing it hides. */
its place. Fullscreen and the filter toggle ride at its right-hand end;
only the filters themselves collapse, so the button that hides them is
still there to bring them back. */
.map-overlay-panel {
position: absolute;
top: 0.7rem;
/* Clear of Leaflet's zoom buttons, which draw over the top-left corner. */
left: 3.4rem;
right: 9.6rem;
right: 0.7rem;
z-index: 410;
display: flex;
flex-flow: row wrap;
flex-flow: row nowrap;
align-items: center;
gap: 0.35rem 0.5rem;
gap: 0.5rem;
width: auto;
max-height: calc(100% - 1.4rem);
padding: 0.45rem 0.6rem;
@@ -2584,6 +2585,32 @@ button.map-qso-card:focus-visible {
overflow: auto;
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
.map-overlay-filters {
display: flex;
flex: 1 1 auto;
flex-flow: row wrap;
align-items: center;
gap: 0.35rem 0.5rem;
min-width: 0;
}
.map-overlay-filters.is-hidden {
display: none;
}
/* With the filters collapsed the bar has no reason to span the map. */
.map-overlay-panel.filters-hidden {
left: auto;
}
.map-overlay-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.4rem;
}
/* Set off from the filters, but only while there are filters to set off. */
.map-overlay-panel:not(.filters-hidden) .map-overlay-actions {
padding-left: 0.5rem;
border-left: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
}
.map-overlay-panel .map-locator-filter-group {
flex: 0 1 auto;
/* The label stays beside its control; only the bar itself wraps. */
@@ -2628,16 +2655,6 @@ button.map-qso-card:focus-visible {
transform: translateY(0.25rem);
pointer-events: none;
}
.map-corner-controls {
position: absolute;
top: 0.7rem;
right: 0.7rem;
z-index: 410;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
}
.map-fullscreen-btn {
display: inline-flex;
align-items: center;
@@ -4166,7 +4183,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
top: 0.55rem;
left: 3.25rem;
right: 0.55rem;
flex-direction: column;
flex-flow: column nowrap;
align-items: stretch;
width: auto;
max-height: min(16.5rem, calc(100% - 1.1rem));
@@ -4179,15 +4196,14 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
padding-right: 0;
border-right: 0;
}
.map-overlay-actions {
justify-content: flex-end;
}
.map-overlay-panel .map-paths-hint {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
}
.map-corner-controls {
top: 0.55rem;
right: 0.55rem;
}
.map-band-legend {
left: 0.55rem;
bottom: 0.55rem;