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

On a phone the info button takes each tab's free corner

Browse source 
At 390 the desktop offsets landed on each composite's own top chrome: Regions' and UPG-100's view
selector and Gospel's search box (probe, en and ar). A tab's pos can now carry `narrow`, laid over
it while the shell is narrow (max-width:760px): Regions and UPG-100 put the button at the START of
their strip, which is empty on a phone; Gospel takes the corner above its zoom column. The same
probe then reports no interactive element under the button on any tab, 1440 and 390, en and ar.
The one-time pointer still lies over the selector or search box until first opened; it takes no
clicks (pointer-events:none).
This commit is contained in:
Doxa Maps 2026-09-29 22:02:08 +00:00
parent 81a84138c9
commit b9514d68d3
7 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
plugin-designs/doxa-maps-spa/doxa-maps-spa.vue
View file

@ -138,7 +138,7 @@
<div class="dms-slot" :ref="el => setSlot(i, el)"></div>
<!-- The tab's "what can this do for you?" button (library MapInfo), from src/tabInfo.js. It sits
over the pane, top-right; profile-config info:false removes it. -->
<MapInfo v-if="infoFor(t)" :key="'info-' + t.id" v-bind="infoProps(t)" :style="infoStyle(t)"
<MapInfo v-if="infoFor(t)" :key="'info-' + t.id" v-bind="infoProps(t)" :style="infoStyle(t)" :placement="infoPos(t).placement || 'top-right'"
:assets-base="assetsBase" :locale="effectiveLocale" />
<div v-if="t.state === 'loading'" class="dms-hint">{{ tr('loading', { label: tabLabel(t) }) }}</div>
<div v-else-if="t.state === 'error'" class="dms-hint err">
@ -1107,8 +1107,14 @@ export default defineComponent({
// The entry minus `pos`, which is placement for the button, not a MapInfo prop.
infoProps(t) { const { pos, ...props } = this.infoFor(t) || {}; return props },
// pos -> MapInfo's own offset variables, inherited by its button and pointer.
infoStyle(t) {
// The tab's placement at this width: pos, with pos.narrow laid over it on a phone.
infoPos(t) {
const pos = (this.infoFor(t) || {}).pos || {}
const { narrow, ...wide } = pos
return this.narrow && narrow ? { ...wide, ...narrow } : wide
},
infoStyle(t) {
const pos = this.infoPos(t)
const s = {}
if (pos.top) s['--map-info-top'] = pos.top
if (pos.side) s['--map-info-side'] = pos.side

11
plugin-designs/doxa-maps-spa/src/tabInfo.js
View file

@ -19,6 +19,11 @@
* 46px / 56px clears Big Picture's 38px header bar / Simple Research's tab bar. Regions and UPG-100
* open on a view-switch strip whose END holds their Share button, which the default covered exactly
* (found by geometry, not visible in a screenshot: only Share's ring showed around the button).
* pos.narrow overrides on a phone (the shell's `narrow`, max-width:760px), where the chrome differs:
* Regions' and UPG-100's strip is full at its END (selector + Share) and empty at its START, so the
* button goes to the start (placement 'top-left', which MapInfo resolves to the logical start, so
* Arabic mirrors); Gospel's panel spans to 345px of 390, so its button takes the corner above the
* zoom column. Measured with the same probe at 390 in en and ar.
* ★ ADD AN EXAMPLE ONLY WHEN ITS FILE IS IN THE TREE. A missing file renders the popup's "not
* available" box in front of the audience; an example that is not there yet is simply left out.
* ★ KEYS MUST NOT CONTAIN A DOT beyond the area separator: the gallery has no vue-i18n, so MapInfo
@ -27,7 +32,7 @@
export const TAB_INFO = {
'upg-100': {
storageKey: 'upg-100',
pos: { side: '56px' },
pos: { side: '56px', narrow: { placement: 'top-left', side: '12px' } },
leadKey: 'mapInfo.tab.upg-100.lead',
takeawayKey: 'mapInfo.tab.upg-100.takeaway',
// The packet pages (12) and the card deck (70) join this list when their pre-generated shots land
@ -38,7 +43,7 @@ export const TAB_INFO = {
},
'regions-dashboard': {
storageKey: 'regions-dashboard',
pos: { side: '56px' },
pos: { side: '56px', narrow: { placement: 'top-left', side: '8px' } },
leadKey: 'mapInfo.tab.regions-dashboard.lead',
takeawayKey: 'mapInfo.tab.regions-dashboard.takeaway',
// "except India and China": India is genuinely unsupported -- no sheet, no geometry, and 855
@ -100,7 +105,7 @@ export const TAB_INFO = {
},
'gospel-resources': {
storageKey: 'gospel-resources',
pos: { side: '56px' },
pos: { side: '56px', narrow: { side: '4px' } },
leadKey: 'mapInfo.tab.gospel-resources.lead',
takeawayKey: 'mapInfo.tab.gospel-resources.takeaway',
examples: [],

4
public/dx-maps/doxa-maps-spa/doxa-maps-spa.js
View file

File diff suppressed because one or more lines are too long

2
public/dx-maps/doxa-maps-spa/doxa-maps-spa/app/index.html
View file

@ -61,7 +61,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-maps-spa> custom element. -->
<script src="../../doxa-maps-spa.js" integrity="sha384-SuUrbicRco0JfRFCGcfFyFI5DKYN3YThc7zMoh0x1B9uBEjtsBMjhZPrQZVgj018" crossorigin="anonymous"></script>
<script src="../../doxa-maps-spa.js" integrity="sha384-WxibTNX89Sfqh9wxX9qWVWrINtWvf5XGsrF2el7XnSHshIC+Yr9rmWl0CWxp3ml3" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/doxa-maps-spa/doxa-maps-spa/index.html
View file

@ -61,7 +61,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-maps-spa> custom element. -->
<script src="../doxa-maps-spa.js" integrity="sha384-SuUrbicRco0JfRFCGcfFyFI5DKYN3YThc7zMoh0x1B9uBEjtsBMjhZPrQZVgj018" crossorigin="anonymous"></script>
<script src="../doxa-maps-spa.js" integrity="sha384-WxibTNX89Sfqh9wxX9qWVWrINtWvf5XGsrF2el7XnSHshIC+Yr9rmWl0CWxp3ml3" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

4
public/dx-maps/doxa-maps-spa/manifest.json
View file

@ -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-SuUrbicRco0JfRFCGcfFyFI5DKYN3YThc7zMoh0x1B9uBEjtsBMjhZPrQZVgj018",
"integrity": "sha384-WxibTNX89Sfqh9wxX9qWVWrINtWvf5XGsrF2el7XnSHshIC+Yr9rmWl0CWxp3ml3",
"elements": [
"doxa-maps-spa"
],
@ -389,7 +389,7 @@
"scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
"embed": {
"iframe": "<iframe src=\"./doxa-maps-spa/doxa-maps-spa/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-SuUrbicRco0JfRFCGcfFyFI5DKYN3YThc7zMoh0x1B9uBEjtsBMjhZPrQZVgj018\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-WxibTNX89Sfqh9wxX9qWVWrINtWvf5XGsrF2el7XnSHshIC+Yr9rmWl0CWxp3ml3\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
},
"instances": [
{

4
public/dx-maps/manifest.json
View file

@ -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-SuUrbicRco0JfRFCGcfFyFI5DKYN3YThc7zMoh0x1B9uBEjtsBMjhZPrQZVgj018",
"integrity": "sha384-WxibTNX89Sfqh9wxX9qWVWrINtWvf5XGsrF2el7XnSHshIC+Yr9rmWl0CWxp3ml3",
"elements": [
"doxa-maps-spa"
],
@ -389,7 +389,7 @@
"scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
"embed": {
"iframe": "<iframe src=\"./doxa-maps-spa/doxa-maps-spa/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-SuUrbicRco0JfRFCGcfFyFI5DKYN3YThc7zMoh0x1B9uBEjtsBMjhZPrQZVgj018\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-WxibTNX89Sfqh9wxX9qWVWrINtWvf5XGsrF2el7XnSHshIC+Yr9rmWl0CWxp3ml3\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
},
"instances": [
{