doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PPLR Data Maps: on a phone the ten views are one select, and the prayer map's coach-mark stays off this research tool

Browse source 
rega at 390 px: wrapped, the view tabs took five rows (160 px of 844), and the shared 'Tap a coloured dot, someone still needs prayer' hint sat on top of the view's own bottom bar and attribution. On a phone the views are one select in one row (the tabs stay on a wide screen); pinHint is off, as for UPG Neighbor and the Wall.
This commit is contained in:
Doxa Maps 2026-09-29 04:28:55 +00:00
parent 042803ab3a
commit a812056e71
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
plugin-designs/pplr-data-maps/pplr-data-maps.meta.json
View file

@ -1,5 +1,8 @@
{
"type": "monolithic",
"label": "PPLR Data Maps",
"note": "Monolithic composite (capability 3): ONE root .vue nests ten internal views of the PPLR people-group data (religion, ROP tree, language families, semantic trees, PG name locales, ROP sunburst, all pins, cross-system ID rosetta, translation coverage, index) behind a view-switcher. index.js registers exactly ONE tag (pplr-data-maps); no view is independently embeddable."
"config": {
"pinHint": false
},
"note": "Monolithic composite (capability 3): ONE root .vue nests ten internal views of the PPLR people-group data (religion, ROP tree, language families, semantic trees, PG name locales, ROP sunburst, all pins, cross-system ID rosetta, translation coverage, index) behind a view-switcher. index.js registers exactly ONE tag (pplr-data-maps); no view is independently embeddable. pinHint:false because the shared coach-mark says 'Tap a coloured dot — someone still needs prayer', the prayer map's message, not this research tool's; on a phone it also sat on top of the view's own bottom bar and attribution (rega, 390)."
}

13
plugin-designs/pplr-data-maps/pplr-data-maps.vue
View file

@ -79,9 +79,12 @@ useShadowStyles(
'.pdm-seg button:hover:not(.on){border-color:#92b195}' +
'.pdm-stage{flex:1 1 0;position:relative;min-height:0}' +
// PHONE (rega, 390×844): the view tabs ran past the right edge with no scroll cue ("Semantic Trees" at
// x=460). On a phone the brand steps aside and the tabs wrap, so every view is on screen.
'@media (max-width:640px){.pdm-bar{flex-wrap:wrap;overflow-x:visible;padding:6px 8px;gap:6px}' +
'.pdm-brand{display:none}.pdm-seg{flex-wrap:wrap}.pdm-seg button{padding:7px 10px}}',
// x=460). Wrapped, the ten tabs took five rows (160 px of an 844 px phone, rega). On a phone the brand
// steps aside and the views are ONE select in one row; a wide screen keeps the tabs.
'.pdm-select{display:none}' +
'@media (max-width:640px){.pdm-bar{padding:6px 8px;gap:8px}.pdm-brand{display:none}.pdm-seg{display:none}' +
'.pdm-select{display:block;flex:1 1 auto;min-width:0;min-height:34px;border:1px solid #d1d4cd;border-radius:8px;' +
'background:#fff;color:#3b463d;font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 8px}}',
'pplr-data-maps')
</script>
@ -89,6 +92,10 @@ useShadowStyles(
<div class="pdm-root">
<div class="pdm-bar">
<span class="pdm-brand">PPLR data maps</span>
<!-- PHONE: the same views as one select (the tabs below are hidden there). -->
<select class="pdm-select" :aria-label="t('pplr.ui.chooseView')" :value="view" @change="setView($event.target.value)">
<option v-for="v in VIEWS" :key="v.key" :value="v.key">{{ t(v.tKey) }}</option>
</select>
<div class="pdm-seg" role="tablist" :aria-label="t('pplr.ui.chooseView')">
<button v-for="v in VIEWS" :key="v.key" role="tab" :aria-selected="view === v.key"
:class="{ on: view === v.key }" @click="setView(v.key)">{{ t(v.tKey) }}</button>