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

Gospel Resources and Cities with Internet: the legend sits above its map controls, and under an open sheet

Browse source
This commit is contained in:
Doxa Maps 2026-09-30 12:15:27 +00:00
parent d45b765bd6
commit 27ce3fe8db
2 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
plugin-designs/cities-internet/connectivity-map.vue
View file

@ -649,12 +649,19 @@ useShadowStyles(
'.map-scroll-edge--left{left:0}' +
'.map-scroll-edge--right{right:0}' +
'.gm-legend{position:absolute;top:8px;inset-inline-start:8px;width:var(--map-legend-width,380px);' +
'max-width:calc(100% - 16px);box-sizing:border-box;z-index:4;padding:8px 10px;' +
'max-width:calc(100% - 16px);box-sizing:border-box;z-index:21;padding:8px 10px;' +
'border-radius:10px;background:rgba(255,255,255,.94);color:#0f1419;' +
"font:12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.16)}" +
// Narrow screens: the rail is still on the right, so the legend must stop short
// of it rather than run under it. 46px = 32px button + 3px inset + clearance.
'@media(max-width:480px){.gm-legend{width:auto;inset-inline-end:46px}}' +
// THE LEGEND OVERLAPS ITS MAP CONTROLS (the legend's z-index 21 above). It shares one stacking context with the
// gallery's ⓘ pointer (z 20; the gallery pane and this map's host form none of their own), and at 4 that pointer
// was drawn over the open legend's title; the map's own toolbar is z 10. It never meets the gallery's round ☰
// (z 15): the legend hangs from the top and stops at 70% on a phone, and the button sits at the bottom. While a
// country or state SHEET is open the legend drops back under it (z 4 < the sheet's 6), so the sheet stays on top
// and the round ☰ stays above the sheet; the gallery's drawer and the ⓘ dialog stay above all of it.
'.gm.has-sheet .gm-legend{z-index:4}' +
'.is-dark .gm-legend{background:rgba(19,32,25,.95);color:#e5e7eb}' +
'.gm-title{font-weight:700;font-size:12.5px;margin-bottom:5px}' +
// The phone fold button: Gospel Resources' .gm-fold, with its 44px touch target on a phone.
@ -710,7 +717,7 @@ useShadowStyles(
</script>
<template>
<div class="gm" :class="{ 'is-dark': isDark }" :style="narrow && toolbarTop ? { '--gm-toolbar-top': toolbarTop + 'px' } : null">
<div class="gm" :class="{ 'is-dark': isDark, 'has-sheet': !!(selected || selectedAdm1) }" :style="narrow && toolbarTop ? { '--gm-toolbar-top': toolbarTop + 'px' } : null">
<div ref="mapEl" class="gm-map"></div>
<!-- The edge scroll strips: direct siblings of the map inside .gm, the wrapper handed to
useEdgeScrollAffordance (a strip under any other ancestor renders but stays inert). -->

9
plugin-designs/gospel-resources/resources-map.vue
View file

@ -2105,12 +2105,19 @@ useShadowStyles(
'.map-scroll-edge--right{right:0}' +
'.gm-legend{position:absolute;top:8px;inset-inline-start:8px;width:var(--map-legend-width,380px);' +
'max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain;' +
'max-width:calc(100% - 16px);box-sizing:border-box;z-index:4;padding:8px 10px;' +
'max-width:calc(100% - 16px);box-sizing:border-box;z-index:21;padding:8px 10px;' +
'border-radius:10px;background:rgba(255,255,255,.94);color:#0f1419;' +
"font:12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.16)}" +
// Narrow screens: the rail is still on the right, so the legend must stop short
// of it rather than run under it. 46px = 32px button + 3px inset + clearance.
'@media(max-width:480px){.gm-legend{width:auto;inset-inline-end:46px}}' +
// THE LEGEND OVERLAPS ITS MAP CONTROLS (the legend's z-index 21 above). It shares one stacking context with the
// gallery's ⓘ pointer (z 20; the gallery pane and this map's host form none of their own), and at 4 that pointer
// was drawn over the open legend's title; the map's own toolbar is z 10. It never meets the gallery's round ☰
// (z 15): the legend hangs from the top and stops at 70% on a phone, and the button sits at the bottom. While a
// country or state SHEET is open the legend drops back under it (z 4 < the sheet's 6), so the sheet stays on top
// and the round ☰ stays above the sheet; the gallery's drawer and the ⓘ dialog stay above all of it.
'.gm.has-sheet .gm-legend{z-index:4}' +
// The caret's box matches .stl-collapse-btn exactly (22x20, 5px radius, 1px border) so the
// two legends read as the same control. The colours are this map's, because the palette is
// the map's and the geometry is the fleet's.