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

Phones: people-group image back to 16px above the sheet; scroll gutters exactly as wide as the control column

Browse source
This commit is contained in:
swift-river542 2026-09-16 22:07:36 -05:00
parent 403bfe72d4
commit dc6bde1fe3
3 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app-profiles/doxa-research-map/research-map.vue
View file

@ -338,7 +338,8 @@ useShadowStyles(`
.rm-legend-mobile-slot { display:block; }
.rm-legend-desktop-slot { display:none; }
}
.map-scroll-edge { position:absolute;top:0;bottom:0;width:40px;z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; }
/* Exactly as wide as the control column: button + its 3px edge margin on both sides. */
.map-scroll-edge { position:absolute;top:0;bottom:0;width:calc(var(--map-btn-size,32px) + 6px);z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; }
.map-scroll-edge--left { left:0; }
.map-scroll-edge--right { right:0; }
`, 'research-map')

3
app-profiles/doxa-simple-map/doxa-simple-map.vue
View file

@ -166,7 +166,8 @@ useShadowStyles(`
}
/* Left/right scroll edges for mobile — transparent strips that allow
page scrolling via touch-action:pan-y on the map edges. */
.map-scroll-edge { position:absolute;top:0;bottom:0;width:40px;z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; }
/* Exactly as wide as the control column: button + its 3px edge margin on both sides. */
.map-scroll-edge { position:absolute;top:0;bottom:0;width:calc(var(--map-btn-size,32px) + 6px);z-index:2;touch-action:pan-y;pointer-events:auto;background:transparent; }
.map-scroll-edge--left { left:0; }
.map-scroll-edge--right { right:0; }

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

@ -19,10 +19,9 @@ useShadowStyles(`
the SAME component desktop uses, with all the same default CSS. Mobile
no longer overrides any .lrg-* rule — the bottom sheet is purely
mobile chrome (pull tab, collapse/expand caret, touch drag). ── */
/* bottom = 30% (the sheet's open height) + 16px gap + a 28px band that keeps the
Mapbox logo visible: the bottom-left control is lifted by the sheet height (see
the --legend-sheet-h rule below) and would otherwise sit under this image. */
.floating-mini-image{position:absolute;left:16px;bottom:calc(30% + 44px);z-index:999;pointer-events:auto;cursor:pointer;}
/* bottom = 30% (the sheet's open height) + 16px gap. The Mapbox watermark lives bottom-right
and only rises by the collapsed strip, so nothing else needs room under this image. */
.floating-mini-image{position:absolute;left:16px;bottom:calc(30% + 16px);z-index:999;pointer-events:auto;cursor:pointer;}
.mini-image{width:120px;height:150px;object-fit:cover;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.25);display:block;}
/* Containment root: clamps absolute children to the map area. */