Prayer Walk Planner: one scrolling toolbar row on a phone, Draw and Print first
On a 390px phone the toolbar wrapped to three rows, 139px of an 844px screen above the map a walker is trying to read. Below 640px it is now one row that scrolls sideways: no label is truncated, and the two actions a walk needs, Draw and Print, lead the row so they are always on screen.
This commit is contained in:
doxa-maps-88655c70
parent
beb13da3da
commit
bad1ae9d7e
6 changed files with 31 additions and 19 deletions
|
|
@ -622,14 +622,26 @@ useShadowStyles(
|
|||
'.pwp-item-title-input{flex:1;font-size:13px;font-weight:600;padding:2px 4px;border:1px solid #92b195;border-radius:4px}' +
|
||||
'.pwp-item-del{border:none;background:transparent;color:#8a3b3b;cursor:pointer;font-size:14px;padding:2px 6px;border-radius:4px}' +
|
||||
'.pwp-item-del:hover{background:rgba(138,59,59,.12)}' +
|
||||
'@media (max-width:640px){.pwp-list{display:none}}'
|
||||
'@media (max-width:640px){.pwp-list{display:none}}' +
|
||||
// PHONE: ONE ROW, SCROLLED SIDEWAYS, instead of a toolbar that wrapped to three rows (139px of a
|
||||
// 844px screen, measured 2026-09-25) above the map a walker is trying to read. Nothing is clipped:
|
||||
// the row scrolls, labels never truncate. The two actions a walk needs, Draw and Print, lead the
|
||||
// row so they are always on screen; the list-management buttons follow.
|
||||
'@media (max-width:640px){' +
|
||||
'.pwp-toolbar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 10px;gap:6px}' +
|
||||
'.pwp-toolbar::-webkit-scrollbar{display:none}' +
|
||||
'.pwp-toolbar>*{flex:0 0 auto}' +
|
||||
'.pwp-btn{white-space:nowrap;padding:8px 12px}' +
|
||||
'.pwp-spacer{display:none}' +
|
||||
'.pwp-draw{order:-2}.pwp-print{order:-1}' +
|
||||
'}'
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pwp" :dir="uiDir" :lang="uiLocale">
|
||||
<div class="pwp-toolbar">
|
||||
<button type="button" class="pwp-btn" :class="{ 'is-active': drawing }"
|
||||
<button type="button" class="pwp-btn pwp-draw" :class="{ 'is-active': drawing }"
|
||||
:aria-pressed="drawing" @click="onDrawClick">
|
||||
{{ drawing ? tr('drawing') : tr('draw') }}
|
||||
</button>
|
||||
|
|
@ -649,7 +661,7 @@ useShadowStyles(
|
|||
</button>
|
||||
<div class="pwp-spacer"></div>
|
||||
<span class="pwp-count">{{ tr('countSelected', { n: selectedCount, total: polygons.length }) }}</span>
|
||||
<button type="button" class="pwp-btn is-accent" :disabled="selectedCount === 0"
|
||||
<button type="button" class="pwp-btn is-accent pwp-print" :disabled="selectedCount === 0"
|
||||
@click="onPrintClick" :aria-label="tr('printAria')">
|
||||
{{ tr('printSelected') }}
|
||||
</button>
|
||||
|
|
|
|||
4
public/doxa-maps/doxa-maps-spa/manifest.json
generated
4
public/doxa-maps/doxa-maps-spa/manifest.json
generated
|
|
@ -863,7 +863,7 @@
|
|||
"bundle": "prayer-walk-planner",
|
||||
"scriptUrl": "./prayer-walk-planner/prayer-walk-planner.js",
|
||||
"output": "doxa-maps/prayer-walk-planner/prayer-walk-planner.js",
|
||||
"integrity": "sha384-MfnmQILsSWd3itg/eN9+UVcZZJnQGVMdX0X3XI9BbKlbaTTwY/IfQ5MlVPAv5MKj",
|
||||
"integrity": "sha384-xlbZdmRFPSAnxx7W/cetgQQjY3mAH5byO0uZWvFi4fCYkkzHZnBl78HSRCQcqgv9",
|
||||
"elements": [
|
||||
"prayer-walk-planner"
|
||||
],
|
||||
|
|
@ -879,7 +879,7 @@
|
|||
"scriptUrl": "./prayer-walk-planner/prayer-walk-planner.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./prayer-walk-planner/prayer-walk-planner/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./prayer-walk-planner/prayer-walk-planner.js\" integrity=\"sha384-MfnmQILsSWd3itg/eN9+UVcZZJnQGVMdX0X3XI9BbKlbaTTwY/IfQ5MlVPAv5MKj\" crossorigin=\"anonymous\"></script>\n<prayer-walk-planner profile-config='{\"profile\":\"prayer-walk-planner\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></prayer-walk-planner>"
|
||||
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./prayer-walk-planner/prayer-walk-planner.js\" integrity=\"sha384-xlbZdmRFPSAnxx7W/cetgQQjY3mAH5byO0uZWvFi4fCYkkzHZnBl78HSRCQcqgv9\" crossorigin=\"anonymous\"></script>\n<prayer-walk-planner profile-config='{\"profile\":\"prayer-walk-planner\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></prayer-walk-planner>"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
2
public/doxa-maps/index.html
generated
2
public/doxa-maps/index.html
generated
File diff suppressed because one or more lines are too long
4
public/doxa-maps/manifest.json
generated
4
public/doxa-maps/manifest.json
generated
|
|
@ -863,7 +863,7 @@
|
|||
"bundle": "prayer-walk-planner",
|
||||
"scriptUrl": "./prayer-walk-planner/prayer-walk-planner.js",
|
||||
"output": "doxa-maps/prayer-walk-planner/prayer-walk-planner.js",
|
||||
"integrity": "sha384-MfnmQILsSWd3itg/eN9+UVcZZJnQGVMdX0X3XI9BbKlbaTTwY/IfQ5MlVPAv5MKj",
|
||||
"integrity": "sha384-xlbZdmRFPSAnxx7W/cetgQQjY3mAH5byO0uZWvFi4fCYkkzHZnBl78HSRCQcqgv9",
|
||||
"elements": [
|
||||
"prayer-walk-planner"
|
||||
],
|
||||
|
|
@ -879,7 +879,7 @@
|
|||
"scriptUrl": "./prayer-walk-planner/prayer-walk-planner.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./prayer-walk-planner/prayer-walk-planner/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./prayer-walk-planner/prayer-walk-planner.js\" integrity=\"sha384-MfnmQILsSWd3itg/eN9+UVcZZJnQGVMdX0X3XI9BbKlbaTTwY/IfQ5MlVPAv5MKj\" crossorigin=\"anonymous\"></script>\n<prayer-walk-planner profile-config='{\"profile\":\"prayer-walk-planner\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></prayer-walk-planner>"
|
||||
"script": "<!-- Mapbox engine, fetched early; remove this line if you set \"provider\":\"maplibre\" -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./prayer-walk-planner/prayer-walk-planner.js\" integrity=\"sha384-xlbZdmRFPSAnxx7W/cetgQQjY3mAH5byO0uZWvFi4fCYkkzHZnBl78HSRCQcqgv9\" crossorigin=\"anonymous\"></script>\n<prayer-walk-planner profile-config='{\"profile\":\"prayer-walk-planner\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></prayer-walk-planner>"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <prayer-walk-planner> custom element. -->
|
||||
<script src="../prayer-walk-planner.js" integrity="sha384-MfnmQILsSWd3itg/eN9+UVcZZJnQGVMdX0X3XI9BbKlbaTTwY/IfQ5MlVPAv5MKj" crossorigin="anonymous"></script>
|
||||
<script src="../prayer-walk-planner.js" integrity="sha384-xlbZdmRFPSAnxx7W/cetgQQjY3mAH5byO0uZWvFi4fCYkkzHZnBl78HSRCQcqgv9" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
Loading…
Reference in a new issue