doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The grid's search row keeps clear of the round ☰ only while the ☰ rests on it, and spans the row once the ☰ rides above the legend

Browse source 
The ☰ rests at the bottom of a phone's first screen until the map's legend sheet announces itself, so
while the map loads, or for good if it fails, it covered the start of the full-width field. The row now
pads by the ☰'s footprint on both sides while the layout's --vtl-fab-lift is 0, and not at all once the
☰ lifts, easing with the ☰'s own .2s move (none under reduced motion).
This commit is contained in:
Doxa Maps 2026-09-30 09:50:10 +00:00
parent 5180e5949b
commit 56c6eacca5
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
plugin-designs/people-groups-grid/people-groups-grid.vue
View file

@ -1268,13 +1268,19 @@ onMounted(() => {
gap: 10px; align-items: center; flex-wrap: wrap;
justify-content: center;
width: 100%; max-width: 600px; margin-inline: auto;
/* FULL WIDTH, with no room kept for the gallery's round ☰. The ☰ used to rest on this row at the
bottom of a phone's first screen, so the row padded itself clear of it. The ☰ now rides above the
map's legend sheet and drops to the bottom only once the map has scrolled away, and by then this row
is near the top (measured at 390, en + ar: 0 overlap at rest). So the field spans the row, as the
live DX Life list's does. */
/* ★ CLEAR OF THE GALLERY'S ROUND ☰ ONLY WHILE IT RESTS HERE, full width otherwise (as the live DX
Life list's field is). On a phone the ☰ is a 44px circle at the bottom-left (bottom-right in ar), and
this row sits right where it rests on the first screen. It rides up above the map's legend sheet once
the sheet announces itself, so it rests here only until then: while the map loads (measured at 390:
still resting 6 s after the grid showed), or for good if the map fails. The layout publishes both
facts only while the ☰ shows: --map-fab-beside (its footprint) and --vtl-fab-lift (0 while it rests).
The clamp keeps the footprint as padding on BOTH sides (centred) at a lift of 0 and drops it to 0 at
any real lift. With no ☰ (desktop, a standalone page) both are unset, and the padding is 0. */
padding-inline: clamp(0px, calc(var(--map-fab-beside, 0px) - var(--vtl-fab-lift, 0px) * 100), var(--map-fab-beside, 0px));
transition: padding .2s ease; /* the ☰'s own .2s move */
box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) { .pgg-search--repel { transition: none; } }
.pgg-search--repel > :first-child { flex: 1 1 320px; min-width: 0; }
/* Exact is hidden. Readers could not tell what the chip meant, and on a phone it wrapped under the
field onto a line of its own. The search stays fuzzy, and the filter code behind the chip is