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

Phones: one attribution watermark bottom-right; corner controls stay at the map bottom under the open sheet

Browse source
This commit is contained in:
swift-river542 2026-09-16 21:53:27 -05:00
parent b95662d482
commit 39b5863236
2 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
internal/mobile-sheet-probe.mjs
View file

@ -219,7 +219,7 @@ try {
const sR = await ev(page, `${raf} return snap()`)
check('L4.strip-tap-reopens', sR.legendState === 'open', `state ${sR.legendState} h${sR.sheetH}`)
for (const [name, s] of [['collapsed-initial', s0], ['legend-open', sO], ['legend-custom', sL], ['legend-collapsed', sC]]) {
if (s.ctrlBL) check(`B.no-overlap-BL@${name}`, s.overlapBL === 0, `sheet ${fmtRect(s.sheetRect)} × ctrlBL ${fmtRect(s.ctrlBL)} = ${s.overlapBL}px² (host --legend-sheet-h ${s.hostVar || 'unset'})`)
if (s.ctrlBL) check(`B.ctrlBL-at-map-bottom@${name}`, s.containerRect.bottom - s.ctrlBL.bottom <= 14, `sheet ${fmtRect(s.sheetRect)} × ctrlBL ${fmtRect(s.ctrlBL)} = ${s.overlapBL}px² (host --legend-sheet-h ${s.hostVar || 'unset'})`)
}
throw { done: true }
}
@ -311,8 +311,8 @@ try {
const audits = [['collapsed-initial', s0], ['detail-open', sOpen], ['detail-fullyOpen', sFull], ['detail-collapsed', sCol], ['detail-fullyOpen-2', sFull2], ['detail-open-2', sOpen2]]
const hasBL = audits.some(([, s]) => s.ctrlBL), hasBR = audits.some(([, s]) => s.ctrlBR)
for (const [name, s] of audits) {
if (s.ctrlBL) check(`B.no-overlap-BL@${name}`, s.overlapBL === 0, `sheet ${fmtRect(s.sheetRect)} × ctrlBL ${fmtRect(s.ctrlBL)} = ${s.overlapBL}px²${s.hostVar ? ` (host --legend-sheet-h ${s.hostVar})` : ''}`)
if (s.ctrlBR) check(`B.no-overlap-BR@${name}`, s.overlapBR === 0, `sheet ${fmtRect(s.sheetRect)} × ctrlBR ${fmtRect(s.ctrlBR)} = ${s.overlapBR}px²`)
if (s.ctrlBL) check(`B.ctrlBL-at-map-bottom@${name}`, s.containerRect.bottom - s.ctrlBL.bottom <= 14, `sheet ${fmtRect(s.sheetRect)} × ctrlBL ${fmtRect(s.ctrlBL)} = ${s.overlapBL}px²${s.hostVar ? ` (host --legend-sheet-h ${s.hostVar})` : ''}`)
if (s.ctrlBR) check(`B.ctrlBR-at-map-bottom@${name}`, s.containerRect.bottom - s.ctrlBR.bottom <= 14, `sheet ${fmtRect(s.sheetRect)} × ctrlBR ${fmtRect(s.ctrlBR)} = ${s.overlapBR}px²`)
if (s.ctrlBL) check(`B.ctrlBL-inside-map@${name}`, s.ctrlBL.top >= s.containerRect.top && s.ctrlBL.bottom <= s.containerRect.bottom, `ctrlBL y ${Math.round(s.ctrlBL.y)}..${Math.round(s.ctrlBL.bottom)} within container ${Math.round(s.containerRect.top)}..${Math.round(s.containerRect.bottom)}`)
// the floating mini photo (detail mode at 30%) must not cover a lifted logo either
if (s.ctrlBL && s.miniImage && s.miniImage.h > 0) check(`B.no-overlap-miniImage×BL@${name}`, overlap2(s.miniImage, s.ctrlBL) === 0, `mini ${fmtRect(s.miniImage)} × ctrlBL ${fmtRect(s.ctrlBL)} = ${overlap2(s.miniImage, s.ctrlBL)}px²`)

29
library/components/legends/LegendMobile.vue
View file

@ -40,11 +40,13 @@ useShadowStyles(`
observer sees 0 and never writes the var, so nothing moves. Every profile that
renders this sheet loads this stylesheet — no per-profile wiring. */
.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{transform:translateY(calc(-1 * var(--legend-sheet-h,0px)));}
/* Phones: the logo and the attribution sit side by side in the bottom-right corner (Mapbox
stacks corner controls vertically by default), so there is one attribution line, not two. */
@media(max-width:767px){.mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-right{display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0 8px 8px 0;}}
/* One watermark, bottom-right, on every map: the Mapbox wordmark and the attribution "i" in a
single tight row, slightly reduced and translucent. The sheet may cover it when open —
the controls stay at the map's bottom and never ride up with the sheet. */
.mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:2px;opacity:0.72;transform:scale(0.85);transform-origin:bottom right;transition:opacity 0.15s;}
.mapboxgl-ctrl-bottom-right:hover,.maplibregl-ctrl-bottom-right:hover{opacity:1;}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0 6px 6px 0;}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib.mapboxgl-compact{margin-right:6px;}
/* In the sheet the legend's rows fill the full width: the clear "x" column does not reserve
space on the right — it floats over the row's right edge only when a row is selected. */
.legend-mobile-sheet .stl-row{position:relative;}
@ -93,6 +95,10 @@ useShadowStyles(`
/* Detail-mode close X — top-right corner */
.detail-close-btn{position:absolute;top:10px;right:12px;background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;z-index:3;transition:color 0.2s ease;}
.detail-close-btn:hover{color:#333;}
/* The people-group name lead sits on the same line as that absolute close X
(right:12px, 26px wide): reserve its width so a long name ellipsizes
before the X instead of running underneath it. */
.legend-mobile-sheet .pg-name-lead{padding-right:32px;}
/* Collapsed-detail footer — mimics LegendRows collapsed-state footer
(caret + centered title) but for PeopleGroupDetail mode. Renders only
@ -155,8 +161,10 @@ useShadowStyles(`
slot now, so no padding-left hack. Mixed-case title (text-transform:none)
so it matches the other tabs ("Language Families" not "LANGUAGE FAMILIES").
Font matches the LegendRows .lrg-title weight. Tighten left padding from
PPLR's 12px → 8px so the caret sits closer to the sheet edge. */
.legend-mobile-sheet .stl-titlebar{padding:8px 12px 8px 8px!important;border-bottom:1px solid rgba(33,38,45,0.10)!important;}
PPLR's 12px → 8px so the caret sits closer to the sheet edge. Right padding
equals the rows' --stl-pad-x (10px) so the title line and the progress bar
end exactly where the table's last column ends. */
.legend-mobile-sheet .stl-titlebar{padding:8px 10px 8px 8px!important;border-bottom:1px solid rgba(33,38,45,0.10)!important;}
.legend-mobile-sheet .stl-tb-title{text-transform:none!important;letter-spacing:0!important;font:600 14px system-ui,sans-serif!important;color:#1f2328!important;}
.legend-mobile-sheet.sheet-dark .stl-tb-title{color:#F3F3F1!important;}
/* Collapsed state: title rows become a centered flex layout so the slotted
@ -190,8 +198,11 @@ useShadowStyles(`
.stl-collapse-btn. Inside the mobile bottom sheet we just need the
inner tree rendering to fill the sheet's content area; the sheet
already provides drag-strip + collapse caret + chrome. Override
positioning, hide the desktop-only collapse affordances. */
.legend-mobile-sheet .stl-panel{position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:100%!important;z-index:auto!important;display:flex;flex-direction:column;min-height:0;max-height:none!important;}
positioning, hide the desktop-only collapse affordances.
max-width:none — the standalone panel caps itself at 380px on narrow
viewports; inside the sheet that cap left a blank strip on the right of
every phone whose map is wider than 380px (the sheet spans the map). */
.legend-mobile-sheet .stl-panel{position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;z-index:auto!important;display:flex;flex-direction:column;min-height:0;max-height:none!important;}
.legend-mobile-sheet .stl-panel.closed{transform:none!important;opacity:1!important;pointer-events:auto!important;}
.legend-mobile-sheet .stl-inner{border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
/* Slim row height on mobile prayer/engagement/adoption tabs so they read