From c3523ae1fcf7bacb1d5c8f6dda2729ab0827bc64 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Wed, 30 Sep 2026 05:35:46 +0000 Subject: [PATCH] =?UTF-8?q?The=20=E2=93=98=20panel=20on=20a=20phone=20is?= =?UTF-8?q?=20a=20bottom=20sheet=20over=20the=20map,=20not=20a=20full=20wh?= =?UTF-8?q?ite=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- library/components/info/MapInfo.vue | 14 ++++++++++++-- public/dx-maps/doxa-maps-spa/doxa-maps-spa.js | 9 +++++++-- .../doxa-maps-spa/doxa-maps-spa/app/index.html | 2 +- .../dx-maps/doxa-maps-spa/doxa-maps-spa/index.html | 2 +- public/dx-maps/doxa-maps-spa/manifest.json | 4 ++-- public/dx-maps/manifest.json | 4 ++-- 6 files changed, 25 insertions(+), 10 deletions(-) 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": [ {