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

The ⓘ panel on a phone is a bottom sheet over the map, not a full white page

Browse source 
On phones (up to 767px) the "What can this map do?" panel opened as a full-screen page: a few
lines of text at the top of an empty white screen, reading as a new page rather than a panel.
It is now a bottom sheet:

- it sizes to its content, up to 70% of the small viewport (svh, so a collapsing URL bar does not
  resize it), and scrolls inside, with its scroll kept to itself;
- the close button is 44px and stays in view in the sheet's header;
- the dimmed map above it stays visible, and a tap there closes the panel, as Escape does.

Desktop is unchanged. Rebuilt doxa-maps-spa (the only bundle that compiles MapInfo.vue), then
tree + SRI.
This commit is contained in:
Doxa Maps 2026-09-30 05:35:46 +00:00
parent 3d5cd9ab74
commit c3523ae1fc
6 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
library/components/info/MapInfo.vue
View file

@ -478,9 +478,19 @@ useShadowStyles(`
.mi-pointer{ display:none; }
}
/* A phone gets a BOTTOM SHEET, not a full screen. A full-screen dialog showed a few lines of text at the
top of an empty white page, and read as a new page rather than a panel over the map. The sheet sizes to
its content up to 70% of the SMALL viewport (svh: a collapsing URL bar must not resize it), scrolls
inside with its scroll kept to itself, keeps a 44px close button in view, and leaves the dimmed map
above it, where a tap closes it (the scrim's @click.self), like Escape does. */
@media (max-width:767.98px){
.mi-scrim{ padding:0; align-items:flex-end; }
.mi-dialog{ width:100%; max-height:70vh; max-height:70svh; border-radius:16px 16px 0 0; }
.mi-head{ align-items:center; padding:10px 10px 10px 20px; padding-inline:20px 10px; }
.mi-close{ width:44px; height:44px; }
.mi-body{ overscroll-behavior:contain; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:600px){
.mi-scrim{ padding:0; align-items:stretch; }
.mi-dialog{ width:100%; max-height:none; height:100%; border-radius:0; }
.mi-pointer{ font-size:12px; padding:7px 10px; }
.mi-deck{ height:220px; }
.mi-deck .mi-card{ width:136px; height:190px; }

9
public/dx-maps/doxa-maps-spa/doxa-maps-spa.js
View file

@ -241,9 +241,14 @@
@media (max-width:1199.98px){
.mi-pointer{ display:none; }
}
@media (max-width:767.98px){
.mi-scrim{ padding:0; align-items:flex-end; }
.mi-dialog{ width:100%; max-height:70vh; max-height:70svh; border-radius:16px 16px 0 0; }
.mi-head{ align-items:center; padding:10px 10px 10px 20px; padding-inline:20px 10px; }
.mi-close{ width:44px; height:44px; }
.mi-body{ overscroll-behavior:contain; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:600px){
.mi-scrim{ padding:0; align-items:stretch; }
.mi-dialog{ width:100%; max-height:none; height:100%; border-radius:0; }
.mi-pointer{ font-size:12px; padding:7px 10px; }
.mi-deck{ height:220px; }
.mi-deck .mi-card{ width:136px; height:190px; }

2
public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html
View file

@ -61,7 +61,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-maps-spa> custom element. -->
<script src="../../doxa-maps-spa.js" integrity="sha384-GroDOm6hlQtsW1ATYE7OtUoJoT1kv8bw1UNS00Z2tuLlj0OSA1dIUvmk2Z+XPOPZ" crossorigin="anonymous"></script>
<script src="../../doxa-maps-spa.js" integrity="sha384-OHfFOOHxNFHv5dSn3bcnp9+emw3o/fBfmfLD+l7X16fxtDtuNwKV5yx24m2cpAVk" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/doxa-maps-spa/doxa-maps-spa/index.html
View file

@ -61,7 +61,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-maps-spa> custom element. -->
<script src="../doxa-maps-spa.js" integrity="sha384-GroDOm6hlQtsW1ATYE7OtUoJoT1kv8bw1UNS00Z2tuLlj0OSA1dIUvmk2Z+XPOPZ" crossorigin="anonymous"></script>
<script src="../doxa-maps-spa.js" integrity="sha384-OHfFOOHxNFHv5dSn3bcnp9+emw3o/fBfmfLD+l7X16fxtDtuNwKV5yx24m2cpAVk" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

4
public/dx-maps/doxa-maps-spa/manifest.json
View file

@ -361,7 +361,7 @@
"bundle": "doxa-maps-spa",
"scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
"output": "dx-maps/doxa-maps-spa/doxa-maps-spa.js",
"integrity": "sha384-GroDOm6hlQtsW1ATYE7OtUoJoT1kv8bw1UNS00Z2tuLlj0OSA1dIUvmk2Z+XPOPZ",
"integrity": "sha384-OHfFOOHxNFHv5dSn3bcnp9+emw3o/fBfmfLD+l7X16fxtDtuNwKV5yx24m2cpAVk",
"elements": [
"doxa-maps-spa"
],
@ -389,7 +389,7 @@
"scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
"embed": {
"iframe": "<iframe src=\"./doxa-maps-spa/doxa-maps-spa/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-GroDOm6hlQtsW1ATYE7OtUoJoT1kv8bw1UNS00Z2tuLlj0OSA1dIUvmk2Z+XPOPZ\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-OHfFOOHxNFHv5dSn3bcnp9+emw3o/fBfmfLD+l7X16fxtDtuNwKV5yx24m2cpAVk\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
},
"instances": [
{

4
public/dx-maps/manifest.json
View file

@ -361,7 +361,7 @@
"bundle": "doxa-maps-spa",
"scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
"output": "dx-maps/doxa-maps-spa/doxa-maps-spa.js",
"integrity": "sha384-GroDOm6hlQtsW1ATYE7OtUoJoT1kv8bw1UNS00Z2tuLlj0OSA1dIUvmk2Z+XPOPZ",
"integrity": "sha384-OHfFOOHxNFHv5dSn3bcnp9+emw3o/fBfmfLD+l7X16fxtDtuNwKV5yx24m2cpAVk",
"elements": [
"doxa-maps-spa"
],
@ -389,7 +389,7 @@
"scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
"embed": {
"iframe": "<iframe src=\"./doxa-maps-spa/doxa-maps-spa/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-GroDOm6hlQtsW1ATYE7OtUoJoT1kv8bw1UNS00Z2tuLlj0OSA1dIUvmk2Z+XPOPZ\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-OHfFOOHxNFHv5dSn3bcnp9+emw3o/fBfmfLD+l7X16fxtDtuNwKV5yx24m2cpAVk\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
},
"instances": [
{