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

Big Picture's info button sits above its filter bar, so it can be clicked

Browse source 
At top 46px the button lay in the empty end of Big Picture's filter area, but that bar is a
positioned layer (z-index 55) painted over the button (z-index 20): nothing opened on click (rega,
1440, en and ar). The filter area wraps with width, so no spot below it is free at every width (at
1024 the stats row moves under a fixed offset). pos.raise lifts the BUTTON to z-index 60; the one-time
pointer stays under the bar, so no filter is covered even visually. Measured on the built tree: no
interactive element or text under the button, the button topmost at its centre, and a click opens the
popup, at 1440, 1024 and 800, en and ar.
This commit is contained in:
Doxa Maps 2026-09-29 22:48:21 +00:00
parent e3c631932f
commit 2d764b740d
7 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
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)" :placement="infoPos(t).placement || 'top-right'"
<MapInfo v-if="infoFor(t)" :key="'info-' + t.id" v-bind="infoProps(t)" :style="infoStyle(t)" :placement="infoPos(t).placement || 'top-right'" :class="{ 'dms-info-raise': infoPos(t).raise }"
: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">
@ -1659,6 +1659,11 @@ export default defineComponent({
documents this opt-out for exactly this case, and .vtl-host and plugin-studio's .ps-pane both set
it. This pane was ported from .vtl-host and took two of its three lines. */
.dms-pane { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; --profile-min-h: 0; }
/* A tab whose free corner lies over a positioned bar of the map's own (Big Picture's filter bar, z-index 55)
raises the info BUTTON above that bar (src/tabInfo.js pos.raise). Only the button: the one-time pointer
stays under the bar, so it covers no filter even visually. Measured: nothing interactive under the button,
the button topmost at its centre, and a click opens the popup, at 1440, 1024 and 800, en and ar. */
.mi.dms-info-raise .mi-btn { z-index: 60; }
.dms-slot { position: relative; min-height: 100%; }
.dms-hint {
position: absolute; inset: 0; display: grid; place-items: center; text-align: center;

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

@ -67,7 +67,10 @@ export const TAB_INFO = {
},
'dashboard-plus-grid': {
storageKey: 'dashboard-plus-grid',
pos: { top: '46px' },
// top 46px is the empty END of Big Picture's filter area at every width (1 row at 1440, 2 at 1024,
// 3 at 800), but that bar is a positioned layer (z-index 55) painted above the button, which left it
// unclickable (rega, 1440). raise lifts the BUTTON over the bar; the pointer stays under it.
pos: { top: '46px', raise: true },
leadKey: 'mapInfo.tab.dashboard-plus-grid.lead',
takeawayKey: 'mapInfo.tab.dashboard-plus-grid.takeaway',
// Big Picture's export is a spreadsheet, so its example is a real excerpt of one (sr): the six

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-P4t0Vulb6moRHjKPcF6MVbKLSWkO69O8OnKFd11DOlLVAowfoF8VPHQovdP8y4Uf" crossorigin="anonymous"></script>
<script src="../../doxa-maps-spa.js" integrity="sha384-VzG6VGsiVxe7r1bZGUG6O/vSmGb4JgiJ4Fc7MgLEe7dczC0M5AbsGT8IO2NdBhJz" 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-P4t0Vulb6moRHjKPcF6MVbKLSWkO69O8OnKFd11DOlLVAowfoF8VPHQovdP8y4Uf" crossorigin="anonymous"></script>
<script src="../doxa-maps-spa.js" integrity="sha384-VzG6VGsiVxe7r1bZGUG6O/vSmGb4JgiJ4Fc7MgLEe7dczC0M5AbsGT8IO2NdBhJz" 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-P4t0Vulb6moRHjKPcF6MVbKLSWkO69O8OnKFd11DOlLVAowfoF8VPHQovdP8y4Uf",
"integrity": "sha384-VzG6VGsiVxe7r1bZGUG6O/vSmGb4JgiJ4Fc7MgLEe7dczC0M5AbsGT8IO2NdBhJz",
"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-P4t0Vulb6moRHjKPcF6MVbKLSWkO69O8OnKFd11DOlLVAowfoF8VPHQovdP8y4Uf\" 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-VzG6VGsiVxe7r1bZGUG6O/vSmGb4JgiJ4Fc7MgLEe7dczC0M5AbsGT8IO2NdBhJz\" 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-P4t0Vulb6moRHjKPcF6MVbKLSWkO69O8OnKFd11DOlLVAowfoF8VPHQovdP8y4Uf",
"integrity": "sha384-VzG6VGsiVxe7r1bZGUG6O/vSmGb4JgiJ4Fc7MgLEe7dczC0M5AbsGT8IO2NdBhJz",
"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-P4t0Vulb6moRHjKPcF6MVbKLSWkO69O8OnKFd11DOlLVAowfoF8VPHQovdP8y4Uf\" 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-VzG6VGsiVxe7r1bZGUG6O/vSmGb4JgiJ4Fc7MgLEe7dczC0M5AbsGT8IO2NdBhJz\" 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": [
{