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

Give the centered figure its own positioning context and a height floor
Some checks are pending
Deploy to GitHub Pages / build (push) Waiting to run
Details
Deploy to GitHub Pages / deploy (push) Blocked by required conditions
Details

Browse source 
The map inside is absolutely positioned to fill its figure, but the figure was
not a positioned ancestor, so it resolved against the panel instead and covered
the legend beside it. The bounded set's figure already carried position:relative;
this one did not — the difference two files drift into when the same rule is
written twice rather than shared.

In the narrow column a flex child sized by its content can resolve to zero
height, which is what a chart measured at 0x0 is. The figure now has a floor, and
stretches rather than centring itself into nothing.

The legend takes a flex basis instead of growing to its content. Reported
squeezed to 145x145 at 1440: a card that is only told a maximum will still take
what it asks for, and the figure had nothing but min-width:0 with which to argue.
This commit is contained in:
Doxa Maps 2026-09-28 18:53:03 +00:00
parent e2086c4d2f
commit 16ff7e719b
11 changed files with 43 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
plugin-designs/gospel-internet/src/components/GiCenteredSet.vue
View file

@ -93,9 +93,15 @@ useShadowStyles(
// and was covering the top of both charts. // and was covering the top of both charts.
'.gcs{position:absolute;inset:0;display:flex;flex-direction:row;align-items:stretch;gap:10px;' + '.gcs{position:absolute;inset:0;display:flex;flex-direction:row;align-items:stretch;gap:10px;' +
'padding:46px 10px 10px;box-sizing:border-box;overflow:hidden;background:#f3f3f1}' + 'padding:46px 10px 10px;box-sizing:border-box;overflow:hidden;background:#f3f3f1}' +
'.gcs-fig{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;' + // position:relative, because the map inside is position:absolute;inset:0 and would otherwise
'align-items:center;justify-content:center;overflow:hidden}' + // resolve against the PANEL — covering the legend beside it. The bounded set's figure already
'.gcs-aside{flex:0 0 auto;min-height:0;overflow:auto;display:flex;align-items:flex-start}' + // had this; the centered one did not, which is the kind of difference two files drift into
// when the same rule is written twice.
// min-height in the narrow column: a flex child with auto content can resolve to zero height,
// which is what a 0x0 chart is. rega measured exactly that at 390px.
'.gcs-fig{position:relative;flex:1 1 auto;align-self:stretch;min-width:0;min-height:240px;' +
'display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}' +
'.gcs-aside{flex:0 1 340px;min-width:0;min-height:0;overflow:auto;display:flex;align-items:flex-start}' +
'@media (max-width:900px){.gcs{flex-direction:column;overflow:auto}' + '@media (max-width:900px){.gcs{flex-direction:column;overflow:auto}' +
'.gcs-aside{overflow:visible;align-self:stretch}}' + '.gcs-aside{overflow:visible;align-self:stretch}}' +
'.gcs svg{max-width:100%;max-height:100%}' + '.gcs svg{max-width:100%;max-height:100%}' +

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

@ -615,7 +615,7 @@
"bundle": "gospel-internet", "bundle": "gospel-internet",
"scriptUrl": "./gospel-internet/gospel-internet.js", "scriptUrl": "./gospel-internet/gospel-internet.js",
"output": "dx-maps/gospel-internet/gospel-internet.js", "output": "dx-maps/gospel-internet/gospel-internet.js",
"integrity": "sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p", "integrity": "sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td",
"elements": [ "elements": [
"gospel-internet-board" "gospel-internet-board"
], ],
@ -635,7 +635,7 @@
"scriptUrl": "./gospel-internet/gospel-internet.js", "scriptUrl": "./gospel-internet/gospel-internet.js",
"embed": { "embed": {
"iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>", "iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>" "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
}, },
"instances": [ "instances": [
{ {

2
public/dx-maps/gospel-internet/board/board/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/gospel-internet/board/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/gospel-internet/board/india-china/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/gospel-internet/board/language-tree/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/gospel-internet/board/platforms/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/gospel-internet/board/project-700/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

2
public/dx-maps/gospel-internet/board/zero/index.html
View file

@ -36,7 +36,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script> <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <gospel-internet-board> custom element. --> <!-- Bundle IIFE — registers the <gospel-internet-board> custom element. -->
<script src="../../gospel-internet.js" integrity="sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p" crossorigin="anonymous"></script> <script src="../../gospel-internet.js" integrity="sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td" crossorigin="anonymous"></script>
<script> <script>
// Mapbox token resolution — the A3 ladder, in precedence order: // Mapbox token resolution — the A3 ladder, in precedence order:

46
public/dx-maps/gospel-internet/gospel-internet.js
View file

File diff suppressed because one or more lines are too long

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

@ -615,7 +615,7 @@
"bundle": "gospel-internet", "bundle": "gospel-internet",
"scriptUrl": "./gospel-internet/gospel-internet.js", "scriptUrl": "./gospel-internet/gospel-internet.js",
"output": "dx-maps/gospel-internet/gospel-internet.js", "output": "dx-maps/gospel-internet/gospel-internet.js",
"integrity": "sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p", "integrity": "sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td",
"elements": [ "elements": [
"gospel-internet-board" "gospel-internet-board"
], ],
@ -635,7 +635,7 @@
"scriptUrl": "./gospel-internet/gospel-internet.js", "scriptUrl": "./gospel-internet/gospel-internet.js",
"embed": { "embed": {
"iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>", "iframe": "<iframe src=\"./gospel-internet/board/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-zszifqBo+jULPszv1sPe1cq4GLcNVu3fJUPO65dZ0lJaitcL2rESdjE62qMLkO8p\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>" "script": "<!-- Mapbox engine, fetched early. Keep it only with a real Mapbox token in \"tk\": without one (or with \"provider\":\"maplibre\") the map draws with MapLibre and this line must go -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./gospel-internet/gospel-internet.js\" integrity=\"sha384-9ncWPBq+kgA7ral4EGu19XznRmcylRzOjf2j6qIFdAgfCnUFkvPJOdHAC8c2d9Td\" crossorigin=\"anonymous\"></script>\n<!-- provider: \"maplibre\" is the default; change it to \"mapbox\" and fill tk to use Mapbox. -->\n<gospel-internet-board profile-config='{\"profile\":\"board\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></gospel-internet-board>"
}, },
"instances": [ "instances": [
{ {