diff --git a/library/components/info/MapInfo.vue b/library/components/info/MapInfo.vue index 2e5285e7f..75d080f30 100644 --- a/library/components/info/MapInfo.vue +++ b/library/components/info/MapInfo.vue @@ -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; } diff --git a/public/dx-maps/doxa-maps-spa/doxa-maps-spa.js b/public/dx-maps/doxa-maps-spa/doxa-maps-spa.js index 169447cf7..183f49eab 100644 --- a/public/dx-maps/doxa-maps-spa/doxa-maps-spa.js +++ b/public/dx-maps/doxa-maps-spa/doxa-maps-spa.js @@ -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; } diff --git a/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html b/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html index f2b8824b1..fbfcd8581 100644 --- a/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html +++ b/public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html @@ -61,7 +61,7 @@ - + - + \n\n\n" + "script": "\n\n\n" }, "instances": [ { diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 5ccbdc086..f28c62b32 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -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": "", - "script": "\n\n\n" + "script": "\n\n\n" }, "instances": [ {