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

Poster footer becomes tape on the border, and per-row persists (Driver)

Browse source 
Driver: "see how the header for show on map is inline on the top of the poster
box? but the footer print options are not inline on the border or outline of the
box... we want the footer to imitate the header, by being inline like a piece of
tape, but not overlapping the poster itself".

The header manages that with .tape-h{top:-11px} -- a fixed offset that works only
because its height is fixed. The footer's height is not: it carries two to four
controls plus a select and grows with translated labels, so the old
margin-top:-14px left it hanging BELOW the edge rather than sitting on it, and
any height change moved it again. translate(-50%,-50%) at top:100% centres it on
the bottom border at ANY height, which is the same piece of tape the header
achieves and is self-correcting when a locale makes it taller.

MEASURED on a rendered card: the header's centre sits 1.0px from the card's top
edge (height 22.0) and the footer's centre is now -1.0px from the bottom edge
(height 30.0) -- tape on the border, mirroring the header. It also stays well
clear of the artwork, footer top 800.1 against a preview bottom of 557.5, which
is the rest of the Driver's rule: half the tape overlaps the card and half hangs
below, so the overlap grows only half as fast as the tape does.

Per row, also Driver: minimum 2, maximum 5, default 2, "and it needs to honour
local storage so if you change the default number it is saved in local storage
so you can reload and your default you set is persistent". Choices are now
2..5, the default is 2, and the chosen value is stored under one key for the
whole wall rather than per instance -- a preference that only survives on the
page you set it on is not a preference. A stored value outranks the `columns`
prop, because the prop is only what the page suggests before the reader has
said otherwise. Every localStorage access is wrapped: it throws outright in a
private window or with site data blocked, and a preference must never be able
to break the wall.
This commit is contained in:
doxa-maps-88655c70 2026-09-25 05:15:58 +00:00
parent 29d38dd828
commit 07d3341c83
11 changed files with 265 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
library/components/poster/PosterWall.vue
View file

@ -159,11 +159,32 @@ const props = defineProps({
// The live count, seeded from the prop. A ref rather than the prop directly, because the control
// changes it and a prop is not ours to write.
const perRow = ref(props.columns || 0)
watch(() => props.columns, (n) => { perRow.value = n || 0 })
// A stored preference outranks the prop default, because the prop is only what the page suggests
// before the reader has said otherwise; once they choose, their choice is the default.
const perRow = ref(readStoredPerRow() ?? (props.columns || PER_ROW_DEFAULT))
watch(() => props.columns, (n) => { if (readStoredPerRow() == null) perRow.value = n || PER_ROW_DEFAULT })
watch(perRow, (n) => { if (Number.isFinite(n) && n >= PER_ROW_MIN && n <= PER_ROW_MAX) storePerRow(n) })
// The choices the control offers. Two is the Driver's default; the ceiling is the wall's own
// auto-fill behaviour, offered as "fit" so the knob can always get back to where it started.
const PER_ROW_CHOICES = [2, 3, 4, 5, 6]
// Driver: "poster per row should have a minimum of 2 and a max of 5 and a default of 2".
const PER_ROW_CHOICES = [2, 3, 4, 5]
const PER_ROW_MIN = 2, PER_ROW_MAX = 5, PER_ROW_DEFAULT = 2
// ...and "it needs to honour local storage so if you change the default number it is saved in local
// storage so you can reload and your default you set is persistent". One key for the whole wall,
// not per instance: the Driver is setting a PREFERENCE, and a preference that only survives on the
// page you set it on is not one. Every access is wrapped because localStorage THROWS outright in a
// private window or with site data blocked -- a preference must never be able to break the wall.
const PER_ROW_KEY = 'doxa-maps:poster-wall:per-row'
function readStoredPerRow() {
try {
const raw = window.localStorage.getItem(PER_ROW_KEY)
const n = Number(raw)
return Number.isFinite(n) && n >= PER_ROW_MIN && n <= PER_ROW_MAX ? n : null
} catch (_) { return null }
}
function storePerRow(n) {
try { window.localStorage.setItem(PER_ROW_KEY, String(n)) } catch (_) { /* unavailable: keep the session value */ }
}
// grid-template-columns, or nothing at all when the count is 0 — an empty string leaves the
// stylesheet's auto-fill rule in charge rather than overriding it with something equivalent.
const gridStyle = computed(() => perRow.value > 0
@ -549,7 +570,20 @@ useShadowStyles(
// a vertical one the driver saw. Anchoring at top:100% pins it just under the card, so the
// second line grows DOWN into empty space. MEASURED: 92px between the preview's bottom and
// the next card, of which the single-line row used 35 — 51px spare.
'.pfs{position:absolute;top:100%;margin-top:-14px;left:50%;transform:translateX(-50%);' +
// ★ THE FOOTER IS TAPE TOO (Driver): "see how the header for show on map is inline on the top of
// the poster box? but the footer print options are not inline on the border or outline of the
// box... we want the footer to imitate the header, by being inline like a piece of tape".
// The header does that with .tape-h{top:-11px}: a fixed offset that works because its height is
// fixed. The footer's height is NOT fixed -- it holds two to four controls plus a select, and it
// grows with translated labels -- so a fixed margin-top:-14px left it hanging BELOW the edge
// instead of sitting on it, and any height change moved it again.
// translate(-50%,-50%) at top:100% centres it on the bottom border at ANY height, which is the
// same "piece of tape" the header achieves and is self-correcting when a locale makes it taller.
// That also answers the rest of the Driver's rule -- "if the box is too tall to centre we just
// let it take up an overlap of the poster box, but not so far that it overlaps the poster blue
// outline": half the tape overlaps the card and half hangs below, so the overlap grows only half
// as fast as the tape does and never reaches the preview.
'.pfs{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%);' +
// ⚠ min-width:0 ON THE FIELDSET ITSELF. A <fieldset> gets `min-width:min-content` from the
// UA stylesheet, which OVERRIDES width and max-width — measured: computed width 431px
// inside a 212px card while the rule said 82%. That is the real reason `width:82%` read as

2
public/doxa-maps/country-posters/countries-map/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <country-posters-map> custom element. -->
<script src="../country-posters.js" integrity="sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC" crossorigin="anonymous"></script>
<script src="../country-posters.js" integrity="sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/country-posters/country-poster-wall/index.html generated
View file

@ -26,7 +26,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <country-posters-map> custom element. -->
<script src="../country-posters.js" integrity="sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC" crossorigin="anonymous"></script>
<script src="../country-posters.js" integrity="sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/country-posters/country-posters-mfe/index.html generated
View file

@ -40,7 +40,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <country-posters-map> custom element. -->
<script src="../country-posters.js" integrity="sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC" crossorigin="anonymous"></script>
<script src="../country-posters.js" integrity="sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

232
public/doxa-maps/country-posters/country-posters.js generated
View file

File diff suppressed because one or more lines are too long

2
public/doxa-maps/index.html generated
View file

File diff suppressed because one or more lines are too long

16
public/doxa-maps/manifest.json generated
View file

@ -158,7 +158,7 @@
"bundle": "country-posters",
"scriptUrl": "./country-posters/country-posters.js",
"output": "doxa-maps/country-posters/country-posters.js",
"integrity": "sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC",
"integrity": "sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6",
"elements": [
"country-posters-map"
],
@ -178,7 +178,7 @@
"scriptUrl": "./country-posters/country-posters.js",
"embed": {
"iframe": "<iframe src=\"./country-posters/countries-map/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=\"./country-posters/country-posters.js\" integrity=\"sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC\" crossorigin=\"anonymous\"></script>\n<country-posters-map profile-config='{\"profile\":\"countries-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></country-posters-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-posters/country-posters.js\" integrity=\"sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6\" crossorigin=\"anonymous\"></script>\n<country-posters-map profile-config='{\"profile\":\"countries-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></country-posters-map>"
}
},
{
@ -192,7 +192,7 @@
"scriptUrl": "./country-posters/country-posters.js",
"embed": {
"iframe": "<iframe src=\"./country-posters/country-poster-wall/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=\"./country-posters/country-posters.js\" integrity=\"sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC\" crossorigin=\"anonymous\"></script>\n<country-posters-map profile-config='{\"profile\":\"country-poster-wall\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></country-posters-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-posters/country-posters.js\" integrity=\"sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6\" crossorigin=\"anonymous\"></script>\n<country-posters-map profile-config='{\"profile\":\"country-poster-wall\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></country-posters-map>"
}
},
{
@ -206,7 +206,7 @@
"scriptUrl": "./country-posters/country-posters.js",
"embed": {
"iframe": "<iframe src=\"./country-posters/country-posters-mfe/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=\"./country-posters/country-posters.js\" integrity=\"sha384-L7/bzbWx+MUxSUjLSGMKhbaM5/0cOImEmTtTSd8VWi7BFkF5pZDgKxFAJp2NCezC\" crossorigin=\"anonymous\"></script>\n<country-posters-map profile-config='{\"profile\":\"country-posters-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></country-posters-map>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-posters/country-posters.js\" integrity=\"sha384-2leW4SIwJMuZ64qwifXlbXSEmc0SmZu+fQ4ZcjOzP7MdgAxns5IVEGjJtiFAKxz6\" crossorigin=\"anonymous\"></script>\n<country-posters-map profile-config='{\"profile\":\"country-posters-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></country-posters-map>"
}
}
]
@ -879,7 +879,7 @@
"bundle": "regions-dashboard",
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"output": "doxa-maps/regions-dashboard/regions-dashboard.js",
"integrity": "sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd",
"integrity": "sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF",
"elements": [
"regions-dashboard"
],
@ -899,7 +899,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./regions-dashboard/region-dashboards/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=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
}
},
{
@ -913,7 +913,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./regions-dashboard/regions-list/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=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
}
},
{
@ -927,7 +927,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./regions-dashboard/regions-mfe/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=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
}
}
]

2
public/doxa-maps/regions-dashboard/region-dashboards/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
<script src="../regions-dashboard.js" integrity="sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd" crossorigin="anonymous"></script>
<script src="../regions-dashboard.js" integrity="sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

192
public/doxa-maps/regions-dashboard/regions-dashboard.js generated
View file

File diff suppressed because one or more lines are too long

2
public/doxa-maps/regions-dashboard/regions-list/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
<script src="../regions-dashboard.js" integrity="sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd" crossorigin="anonymous"></script>
<script src="../regions-dashboard.js" integrity="sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/regions-dashboard/regions-mfe/index.html generated
View file

@ -40,7 +40,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
<script src="../regions-dashboard.js" integrity="sha384-N+C2RsCGs5tqDlGT2563L0Hi90MRjfdkMeNP4W1xKyT197Vqr0z1ohT9aF7TNIBd" crossorigin="anonymous"></script>
<script src="../regions-dashboard.js" integrity="sha384-1MHUPQE3R69/J5sxKfWFqQ8GfG8HhNzQD5nOPfnDCFEvvcNo5M9xJJJMbxoTxJJF" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order: