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

The grid's search and filters look like the live DX Life list: a pill search field, Show filters as an uppercase link, and 37px dropdowns

Browse source 
The values are the live /research list's own computed styles, measured at 390 and 1440. The search
field spans its row (up to 600px), since the round ☰ now rides above the map's legend sheet and no
longer rests on it. Every new rule is under .pgg-root, so Big Picture's header, which shares SearchBar
and FilterDropdown, is untouched; there the grid's search and filters are off. The filters still open
by default.
This commit is contained in:
Doxa Maps 2026-09-30 09:36:45 +00:00
parent 3ca828421f
commit a66b120185
1 changed files with 39 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1037,7 +1037,7 @@ onMounted(() => {
:model-value="localSearchTerm"
:placeholder="t.search || 'Search people groups…'"
:aria-label="t.search || 'Search people groups'"
max-width="480px"
max-width="600px"
@search="onSearch"
/>
<button
@ -1268,12 +1268,12 @@ onMounted(() => {
gap: 10px; align-items: center; flex-wrap: wrap;
justify-content: center;
width: 100%; max-width: 600px; margin-inline: auto;
/* ★ CLEAR OF THE GALLERY'S ROUND ☰, AND STILL CENTRED. On a phone the gallery draws a 44px circle
at the bottom-left (bottom-right in ar), and at rest this row sits right where it lands, so the
circle covered the start of the search box. The layout publishes --map-fab-beside only while the
circle shows. It is unset (0) on desktop, on a standalone page, and wherever there is no circle.
The clearance is on BOTH sides: on the circle's side alone, it pushed the field off centre. */
padding-inline: var(--map-fab-beside, 0px); box-sizing: border-box;
/* 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. */
box-sizing: border-box;
}
.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
@ -1395,4 +1395,36 @@ onMounted(() => {
color: var(--ink); background: var(--card); border: 1px solid var(--brand); border-radius: 8px;
}
.pgg-loadmore:hover { background: var(--dx-accent-soft, rgba(146, 177, 149, .10)); }
/* ★ THE SEARCH AND FILTERS LOOK LIKE THE LIVE DX LIFE LIST (doxa.life/research, the list under the
research map). These values are that page's own computed styles, measured at 390 and at 1440:
- the pill search field, 51px tall, in the page's grey, with its 20px glass 19px in;
- "Show filters" as an uppercase link, not a bordered button;
- 37px dropdowns in the same grey, full width on a phone and up to 240px beside each other above one.
Every selector starts at .pgg-root. The Big Picture bundle compiles this grid next to its own header,
and that header uses the same shared SearchBar and FilterDropdown, which must not change; in Big
Picture the grid's search and filters are off, so none of these rules finds an element there.
The fonts name the live page's families first (Poppins; Brandon Grotesque for the link). Where the
host page loads them, as DX Life does, the grid matches it; elsewhere the system stack after them shows. */
.pgg-root .filters { gap: 18px; }
.pgg-root .pgg-search .search-box .search-icon { left: auto; inset-inline-start: 19px; width: 20px; height: 20px; color: rgb(128, 128, 128); }
.pgg-root .pgg-search .search-box input {
height: 51px; padding-block: 10px; padding-inline: 52px 24px;
border: 1px solid rgb(128, 128, 128); border-radius: 100px; color: #000;
font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 19.5px;
}
.pgg-root .pgg-search .search-box input::placeholder { color: rgb(128, 128, 128); }
.pgg-root .filters__toggle {
background: none; border-color: transparent; border-radius: 100px; padding: 10px 42px; line-height: 1;
font-family: 'Brandon Grotesque', Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 15.6px; font-weight: 400; text-transform: uppercase;
}
.pgg-root .filters__toggle-icon { display: none; }
.pgg-root .filters__panel { gap: 13px; }
.pgg-root .filters__panel .filter-dropdown { flex: 1 1 160px; min-width: 160px; max-width: 240px; }
@media (max-width: 576px) { .pgg-root .filters__panel .filter-dropdown { flex: 1 1 100%; max-width: 90vw; } }
.pgg-root .filters__panel .filter-dropdown__trigger {
min-height: 37px; padding: 5px 13px; gap: 7.5px; border: 1px solid rgb(128, 128, 128);
font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 15.6px;
}
</style>