diff --git a/plugin-designs/prayer-walk-planner/prayer-walk-planner.vue b/plugin-designs/prayer-walk-planner/prayer-walk-planner.vue index 87f0ac22e..0c6b328aa 100644 --- a/plugin-designs/prayer-walk-planner/prayer-walk-planner.vue +++ b/plugin-designs/prayer-walk-planner/prayer-walk-planner.vue @@ -106,6 +106,14 @@ const uiLocale = computed(() => { const uiDir = computed(() => (uiLocale.value === 'ar' ? 'rtl' : 'ltr')) const tr = (key, params) => translate(uiLocale.value, key, params) const moreOpen = ref(false) // the phone "More" menu +// PHONE: the zone list folds behind a ☰ button (Driver, test round 2 #8) and opens as a drawer over the +// map; on a wide screen it is the sidebar as before. It used to be simply hidden on a phone, so a +// walker could not see, select, rename or delete a zone there. +const listOpen = ref(false) +const zonesBtn = ref(null), zonesClose = ref(null) +function openZones() { listOpen.value = true; nextTick(() => zonesClose.value?.focus?.()) } +function closeZones() { listOpen.value = false; nextTick(() => zonesBtn.value?.focus?.()) } +function onZonesKey(e) { if (e.key === 'Escape' && listOpen.value) { e.preventDefault(); e.stopPropagation(); closeZones() } } // The shared controls (Share, Full screen) label themselves through the vue-i18n instance index.js // installs, which reads only the PAGE language. Inside the Research Gallery the language arrives in @@ -644,7 +652,8 @@ useShadowStyles( '.pwp-map-el{position:absolute;inset:0}' + '.pwp-map-controls{position:absolute;top:10px;right:10px;z-index:4;display:flex;flex-direction:column;gap:8px}' + '.pwp[dir=rtl] .pwp-map-controls{right:auto;left:10px}' + - '.pwp-list{width:260px;flex-shrink:0;overflow-y:auto;background:#fff;border-left:1px solid #d1d4cd;padding:8px}' + + '.pwp-list{width:260px;flex-shrink:0;overflow-y:auto;background:#fff;border-inline-start:1px solid #d1d4cd;padding:8px}' + + '.pwp-zones-btn,.pwp-list-head,.pwp-backdrop{display:none}' + '.pwp-list-empty{padding:16px 10px;font-size:12px;color:#6d766e}' + '.pwp-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;margin-bottom:4px;' + 'border:1px solid transparent;cursor:pointer}' + @@ -654,7 +663,18 @@ 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}}' + + // PHONE: the list is a drawer from the reading-end edge, over the map, behind the ☰ Zones button. + '@media (max-width:640px){' + + '.pwp-list{display:none;position:absolute;inset-block:0;inset-inline-end:0;width:min(300px,86%);z-index:7;' + + 'box-shadow:0 0 24px rgba(0,0,0,.22);border-inline-start:none}' + + '.pwp-list.is-open{display:block}' + + '.pwp-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px;' + + 'margin-bottom:6px;border-bottom:1px solid #eceee9;font-size:13px;font-weight:700}' + + '.pwp-list-x{border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:#6d766e;' + + 'min-width:36px;min-height:36px;border-radius:6px}' + + '.pwp-backdrop{display:block;position:absolute;inset:0;z-index:6;background:rgba(20,28,22,.28)}' + + '.pwp-zones-btn{display:inline-flex;order:-3}' + + '}' + // 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 @@ -679,6 +699,9 @@ useShadowStyles(