Prayer Walk Planner: the phone toolbar fits, with the list actions behind More
At 390px the toolbar was one sideways-scrolling row with no scroll cue, so Delete selected, Select all, Clear selection and the count ran past the edge. On a phone Draw, Print, More and the count now fit one row, and More opens the three list actions as a row beneath; desktop is unchanged. "More" in all eleven languages.
This commit is contained in:
Doxa Maps
parent
46b1e857b9
commit
4dbb21203e
2 changed files with 35 additions and 21 deletions
|
|
@ -104,6 +104,7 @@ 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
|
||||
|
||||
// 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
|
||||
|
|
@ -622,6 +623,8 @@ useShadowStyles(
|
|||
'.pwp-btn:disabled{opacity:.45;cursor:not-allowed}' +
|
||||
'.pwp-btn.is-danger{color:#8a3b3b;border-color:#e0c4c4}' +
|
||||
'.pwp-spacer{flex:1}' +
|
||||
'.pwp-more-btn{display:none}' +
|
||||
'.pwp-listops{display:contents}' +
|
||||
'.pwp-count{font-size:12px;color:#6d766e}' +
|
||||
'.pwp-status{padding:6px 12px;font-size:12px;color:#6d766e;background:#fff;border-bottom:1px solid #d1d4cd}' +
|
||||
'.pwp-body{position:relative;flex:1;min-height:0;display:flex}' +
|
||||
|
|
@ -651,6 +654,12 @@ useShadowStyles(
|
|||
'.pwp-btn{white-space:nowrap;padding:8px 12px}' +
|
||||
'.pwp-spacer{display:none}' +
|
||||
'.pwp-draw{order:-2}.pwp-print{order:-1}' +
|
||||
// One row that FITS (Draw, Print, More, count) instead of a sideways scroll with no cue; the
|
||||
// three list actions open as their own full-width row under it.
|
||||
'.pwp-toolbar{flex-wrap:wrap;overflow:visible}' +
|
||||
'.pwp-more-btn{display:inline-flex}' +
|
||||
'.pwp-listops{display:none;flex-basis:100%;flex-wrap:wrap;gap:6px}' +
|
||||
'.pwp-listops.is-open{display:flex}' +
|
||||
'}'
|
||||
)
|
||||
</script>
|
||||
|
|
@ -666,16 +675,21 @@ useShadowStyles(
|
|||
:disabled="drawPoints.length < 3" @click="onFinishClick">
|
||||
{{ tr('finish', { n: drawPoints.length }) }}
|
||||
</button>
|
||||
<button type="button" class="pwp-btn is-danger" :disabled="selectedCount === 0"
|
||||
@click="onDeleteSelected" :aria-label="tr('deleteSelectedAria')">
|
||||
{{ tr('deleteSelected') }}
|
||||
</button>
|
||||
<button type="button" class="pwp-btn" :disabled="polygons.length === 0" @click="onSelectAll">
|
||||
{{ tr('selectAll') }}
|
||||
</button>
|
||||
<button type="button" class="pwp-btn" :disabled="selectedCount === 0" @click="onClearSelection">
|
||||
{{ tr('clearSelection') }}
|
||||
</button>
|
||||
<!-- PHONE: these three collapse behind "More" (they ran past x=390 in a sideways row with no
|
||||
scroll cue, rega ka3). Desktop: the toggle is hidden and they sit inline as before. -->
|
||||
<button type="button" class="pwp-btn pwp-more-btn" :aria-expanded="moreOpen ? 'true' : 'false'" @click="moreOpen = !moreOpen">⋯ {{ tr('more') }}</button>
|
||||
<div class="pwp-listops" :class="{ 'is-open': moreOpen }" @click="moreOpen = false">
|
||||
<button type="button" class="pwp-btn is-danger" :disabled="selectedCount === 0"
|
||||
@click="onDeleteSelected" :aria-label="tr('deleteSelectedAria')">
|
||||
{{ tr('deleteSelected') }}
|
||||
</button>
|
||||
<button type="button" class="pwp-btn" :disabled="polygons.length === 0" @click="onSelectAll">
|
||||
{{ tr('selectAll') }}
|
||||
</button>
|
||||
<button type="button" class="pwp-btn" :disabled="selectedCount === 0" @click="onClearSelection">
|
||||
{{ tr('clearSelection') }}
|
||||
</button>
|
||||
</div>
|
||||
<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 pwp-print" :disabled="selectedCount === 0"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const STRINGS = {
|
|||
en: {
|
||||
draw: 'Draw polygon', drawing: 'Drawing… (click map)', finish: 'Finish polygon ({n} pts)',
|
||||
deleteSelected: 'Delete selected', deleteSelectedAria: 'Delete selected polygons',
|
||||
selectAll: 'Select all', clearSelection: 'Clear selection', countSelected: '{n} / {total} selected',
|
||||
more: 'More', selectAll: 'Select all', clearSelection: 'Clear selection', countSelected: '{n} / {total} selected',
|
||||
printSelected: 'Print selected', printAria: 'Print selected prayer-walking zones',
|
||||
emptyList: 'No zones yet — draw a polygon on the map to start a prayer-walking plan.',
|
||||
delete: 'Delete', deleteAria: 'Delete {title}', zone: 'Zone {n}',
|
||||
|
|
@ -31,7 +31,7 @@ export const STRINGS = {
|
|||
es: {
|
||||
draw: 'Dibujar polígono', drawing: 'Dibujando… (haz clic en el mapa)', finish: 'Terminar polígono ({n} puntos)',
|
||||
deleteSelected: 'Eliminar selección', deleteSelectedAria: 'Eliminar los polígonos seleccionados',
|
||||
selectAll: 'Seleccionar todo', clearSelection: 'Quitar selección', countSelected: '{n} / {total} seleccionadas',
|
||||
more: 'Más', selectAll: 'Seleccionar todo', clearSelection: 'Quitar selección', countSelected: '{n} / {total} seleccionadas',
|
||||
printSelected: 'Imprimir selección', printAria: 'Imprimir las zonas de caminata de oración seleccionadas',
|
||||
emptyList: 'Aún no hay zonas: dibuja un polígono en el mapa para empezar un plan de caminata de oración.',
|
||||
delete: 'Eliminar', deleteAria: 'Eliminar {title}', zone: 'Zona {n}',
|
||||
|
|
@ -50,7 +50,7 @@ export const STRINGS = {
|
|||
fr: {
|
||||
draw: 'Dessiner un polygone', drawing: 'Dessin en cours… (cliquez sur la carte)', finish: 'Terminer le polygone ({n} points)',
|
||||
deleteSelected: 'Supprimer la sélection', deleteSelectedAria: 'Supprimer les polygones sélectionnés',
|
||||
selectAll: 'Tout sélectionner', clearSelection: 'Effacer la sélection', countSelected: '{n} / {total} sélectionnées',
|
||||
more: 'Plus', selectAll: 'Tout sélectionner', clearSelection: 'Effacer la sélection', countSelected: '{n} / {total} sélectionnées',
|
||||
printSelected: 'Imprimer la sélection', printAria: 'Imprimer les zones de marche de prière sélectionnées',
|
||||
emptyList: 'Aucune zone pour l’instant — dessinez un polygone sur la carte pour commencer un plan de marche de prière.',
|
||||
delete: 'Supprimer', deleteAria: 'Supprimer {title}', zone: 'Zone {n}',
|
||||
|
|
@ -69,7 +69,7 @@ export const STRINGS = {
|
|||
de: {
|
||||
draw: 'Polygon zeichnen', drawing: 'Zeichnen… (auf die Karte klicken)', finish: 'Polygon abschließen ({n} Punkte)',
|
||||
deleteSelected: 'Auswahl löschen', deleteSelectedAria: 'Ausgewählte Polygone löschen',
|
||||
selectAll: 'Alle auswählen', clearSelection: 'Auswahl aufheben', countSelected: '{n} / {total} ausgewählt',
|
||||
more: 'Mehr', selectAll: 'Alle auswählen', clearSelection: 'Auswahl aufheben', countSelected: '{n} / {total} ausgewählt',
|
||||
printSelected: 'Auswahl drucken', printAria: 'Ausgewählte Gebetsspaziergang-Zonen drucken',
|
||||
emptyList: 'Noch keine Zonen — zeichnen Sie ein Polygon auf der Karte, um einen Gebetsspaziergang zu planen.',
|
||||
delete: 'Löschen', deleteAria: '{title} löschen', zone: 'Zone {n}',
|
||||
|
|
@ -88,7 +88,7 @@ export const STRINGS = {
|
|||
pt: {
|
||||
draw: 'Desenhar polígono', drawing: 'Desenhando… (clique no mapa)', finish: 'Concluir polígono ({n} pontos)',
|
||||
deleteSelected: 'Excluir seleção', deleteSelectedAria: 'Excluir os polígonos selecionados',
|
||||
selectAll: 'Selecionar tudo', clearSelection: 'Limpar seleção', countSelected: '{n} / {total} selecionadas',
|
||||
more: 'Mais', selectAll: 'Selecionar tudo', clearSelection: 'Limpar seleção', countSelected: '{n} / {total} selecionadas',
|
||||
printSelected: 'Imprimir seleção', printAria: 'Imprimir as zonas de caminhada de oração selecionadas',
|
||||
emptyList: 'Ainda não há zonas — desenhe um polígono no mapa para começar um plano de caminhada de oração.',
|
||||
delete: 'Excluir', deleteAria: 'Excluir {title}', zone: 'Zona {n}',
|
||||
|
|
@ -107,7 +107,7 @@ export const STRINGS = {
|
|||
it: {
|
||||
draw: 'Disegna poligono', drawing: 'Disegno in corso… (clicca sulla mappa)', finish: 'Completa poligono ({n} punti)',
|
||||
deleteSelected: 'Elimina selezionati', deleteSelectedAria: 'Elimina i poligoni selezionati',
|
||||
selectAll: 'Seleziona tutto', clearSelection: 'Deseleziona', countSelected: '{n} / {total} selezionate',
|
||||
more: 'Altro', selectAll: 'Seleziona tutto', clearSelection: 'Deseleziona', countSelected: '{n} / {total} selezionate',
|
||||
printSelected: 'Stampa selezionate', printAria: 'Stampa le zone di passeggiata di preghiera selezionate',
|
||||
emptyList: 'Ancora nessuna zona — disegna un poligono sulla mappa per iniziare un piano di passeggiata di preghiera.',
|
||||
delete: 'Elimina', deleteAria: 'Elimina {title}', zone: 'Zona {n}',
|
||||
|
|
@ -126,7 +126,7 @@ export const STRINGS = {
|
|||
ro: {
|
||||
draw: 'Desenează poligon', drawing: 'Se desenează… (dă clic pe hartă)', finish: 'Finalizează poligonul ({n} puncte)',
|
||||
deleteSelected: 'Șterge selecția', deleteSelectedAria: 'Șterge poligoanele selectate',
|
||||
selectAll: 'Selectează tot', clearSelection: 'Anulează selecția', countSelected: '{n} / {total} selectate',
|
||||
more: 'Mai mult', selectAll: 'Selectează tot', clearSelection: 'Anulează selecția', countSelected: '{n} / {total} selectate',
|
||||
printSelected: 'Tipărește selecția', printAria: 'Tipărește zonele de plimbare de rugăciune selectate',
|
||||
emptyList: 'Încă nu există zone — desenează un poligon pe hartă pentru a începe un plan de plimbare de rugăciune.',
|
||||
delete: 'Șterge', deleteAria: 'Șterge {title}', zone: 'Zona {n}',
|
||||
|
|
@ -145,7 +145,7 @@ export const STRINGS = {
|
|||
ru: {
|
||||
draw: 'Нарисовать область', drawing: 'Рисование… (щёлкайте по карте)', finish: 'Завершить область (точек: {n})',
|
||||
deleteSelected: 'Удалить выбранные', deleteSelectedAria: 'Удалить выбранные области',
|
||||
selectAll: 'Выбрать все', clearSelection: 'Снять выбор', countSelected: 'Выбрано: {n} из {total}',
|
||||
more: 'Ещё', selectAll: 'Выбрать все', clearSelection: 'Снять выбор', countSelected: 'Выбрано: {n} из {total}',
|
||||
printSelected: 'Печать выбранных', printAria: 'Печать выбранных зон молитвенной прогулки',
|
||||
emptyList: 'Зон пока нет — нарисуйте область на карте, чтобы начать план молитвенной прогулки.',
|
||||
delete: 'Удалить', deleteAria: 'Удалить: {title}', zone: 'Зона {n}',
|
||||
|
|
@ -164,7 +164,7 @@ export const STRINGS = {
|
|||
ar: {
|
||||
draw: 'ارسم مضلّعًا', drawing: 'جارٍ الرسم… (انقر على الخريطة)', finish: 'إنهاء المضلّع ({n} نقاط)',
|
||||
deleteSelected: 'حذف المحدد', deleteSelectedAria: 'حذف المضلّعات المحددة',
|
||||
selectAll: 'تحديد الكل', clearSelection: 'إلغاء التحديد', countSelected: '{n} / {total} محدد',
|
||||
more: 'المزيد', selectAll: 'تحديد الكل', clearSelection: 'إلغاء التحديد', countSelected: '{n} / {total} محدد',
|
||||
printSelected: 'طباعة المحدد', printAria: 'طباعة مناطق جولات الصلاة المحددة',
|
||||
emptyList: 'لا توجد مناطق بعد — ارسم مضلّعًا على الخريطة لتبدأ خطة جولة صلاة.',
|
||||
delete: 'حذف', deleteAria: 'حذف {title}', zone: 'المنطقة {n}',
|
||||
|
|
@ -183,7 +183,7 @@ export const STRINGS = {
|
|||
hi: {
|
||||
draw: 'बहुभुज बनाएँ', drawing: 'बनाया जा रहा है… (मानचित्र पर क्लिक करें)', finish: 'बहुभुज पूरा करें ({n} बिंदु)',
|
||||
deleteSelected: 'चयनित हटाएँ', deleteSelectedAria: 'चयनित बहुभुज हटाएँ',
|
||||
selectAll: 'सभी चुनें', clearSelection: 'चयन हटाएँ', countSelected: '{n} / {total} चयनित',
|
||||
more: 'और', selectAll: 'सभी चुनें', clearSelection: 'चयन हटाएँ', countSelected: '{n} / {total} चयनित',
|
||||
printSelected: 'चयनित प्रिंट करें', printAria: 'चयनित प्रार्थना पदयात्रा क्षेत्र प्रिंट करें',
|
||||
emptyList: 'अभी कोई क्षेत्र नहीं — प्रार्थना पदयात्रा की योजना शुरू करने के लिए मानचित्र पर बहुभुज बनाएँ।',
|
||||
delete: 'हटाएँ', deleteAria: '{title} हटाएँ', zone: 'क्षेत्र {n}',
|
||||
|
|
@ -202,7 +202,7 @@ export const STRINGS = {
|
|||
zh: {
|
||||
draw: '绘制多边形', drawing: '正在绘制…（点击地图）', finish: '完成多边形（{n} 个点）',
|
||||
deleteSelected: '删除所选', deleteSelectedAria: '删除所选多边形',
|
||||
selectAll: '全选', clearSelection: '清除选择', countSelected: '已选 {n} / {total}',
|
||||
more: '更多', selectAll: '全选', clearSelection: '清除选择', countSelected: '已选 {n} / {total}',
|
||||
printSelected: '打印所选', printAria: '打印所选的祷告行走区域',
|
||||
emptyList: '还没有区域——在地图上绘制一个多边形，开始制定祷告行走计划。',
|
||||
delete: '删除', deleteAria: '删除{title}', zone: '区域 {n}',
|
||||
|
|
|
|||
Loading…
Reference in a new issue