From e4f2be71c4eceaa21dd7a10aef9844dd736c695d Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sat, 26 Sep 2026 18:03:36 +0000 Subject: [PATCH 1/4] Country posters: the geocoder column follows the reading direction countries-map pinned its geocoder column with a physical left:8px, so under ar the search bar stayed on the left while the legend (studio's fixed legend) moved right, and the two no longer stacked as one column. It now uses inset-inline-start:8px, which is 8px from the start edge in either direction. The pinned card's label spacing (margin-right) becomes margin-inline-end too. The mobile rule already sets both left and right, so it is symmetric and unchanged. Headless: build OK, and the shipped CSS carries inset-inline-start:8px. Visual check needs a browser (ar, both engines). --- plugin-designs/country-posters/countries-map.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/plugin-designs/country-posters/countries-map.vue b/plugin-designs/country-posters/countries-map.vue index d4c007b37..2b40ade20 100644 --- a/plugin-designs/country-posters/countries-map.vue +++ b/plugin-designs/country-posters/countries-map.vue @@ -188,10 +188,11 @@ useShadowStyles(` 400/360/280 px responsive widths the simple-map mfe uses. The --map-legend-width / --map-btn-size / --map-toolbar-gap / --map-font-md / --map-font-sm CSS vars are set by applyContainerScale() below. ── */ - /* Geocoder column matches the SemanticTreeLegend's .stl-panel — left:8px, + /* Geocoder column matches the SemanticTreeLegend's .stl-panel — 8px from the START edge (logical, so it + moves right under ar with the legend; a physical left:8px kept it left), width:380px — so the search bar and the legend stack as one column at the same x-edge (PPLR alignment, qa: 2026-05-02). */ - .mapboxgl-ctrl-top-left { top:12px!important;left:8px!important;width:380px!important;max-width:380px!important;z-index:1200!important; } + .mapboxgl-ctrl-top-left { top:12px!important;inset-inline-start:8px!important;width:380px!important;max-width:380px!important;z-index:1200!important; } .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin:0!important;float:none!important; } /* Pill geometry + PPLR-matched focus ring (qa: 2026-05-02). border-radius 999px matches PPLR's .pgc-input-wrap; focus-within ring uses PPLR's @@ -224,7 +225,7 @@ useShadowStyles(` .dg-main { font-weight:500;font-size:13px;color:#222;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px; } .dg-main strong { font-weight:700;overflow:hidden;text-overflow:ellipsis; } .dg-meta { margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:#555;line-height:1.35; } - .dg-field strong { font-weight:600;color:#333;margin-right:2px; } + .dg-field strong { font-weight:600;color:#333;margin-inline-end:2px; } /* Round 16 — labeled category tag replacing the old emoji prefixes. */ .dg-tag { flex:none;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#3b463d;background:rgba(59,70,61,0.10);border-radius:4px;padding:1px 5px;line-height:1.5;white-space:nowrap; } .dg-agg-label { overflow:hidden;text-overflow:ellipsis; } From 165983c2c8531eaa114ff4a78df1d9ea1c5d3bce Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sat, 26 Sep 2026 18:05:00 +0000 Subject: [PATCH 2/4] Country posters: the geocoder column is styled on MapLibre too countries-map styled only .mapboxgl-ctrl-top-left. MapLibre names its container .maplibregl-ctrl-top-left, so under MapLibre the column got no position, width or margin rule at all. The three rules (desktop column, its controls, and the mobile full-width row) now name both engines' classes. Headless: build OK, and the shipped CSS carries the maplibregl selectors. Visual check: rega, countries-map on ?provider=maplibre (en and ar). --- plugin-designs/country-posters/countries-map.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/plugin-designs/country-posters/countries-map.vue b/plugin-designs/country-posters/countries-map.vue index 2b40ade20..c4b0cbf35 100644 --- a/plugin-designs/country-posters/countries-map.vue +++ b/plugin-designs/country-posters/countries-map.vue @@ -192,8 +192,10 @@ useShadowStyles(` moves right under ar with the legend; a physical left:8px kept it left), width:380px — so the search bar and the legend stack as one column at the same x-edge (PPLR alignment, qa: 2026-05-02). */ - .mapboxgl-ctrl-top-left { top:12px!important;inset-inline-start:8px!important;width:380px!important;max-width:380px!important;z-index:1200!important; } - .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin:0!important;float:none!important; } + /* Both engines' container class: MapLibre names it .maplibregl-ctrl-top-left, and with only the Mapbox + selector the column got no position or width at all under MapLibre. */ + .mapboxgl-ctrl-top-left, .maplibregl-ctrl-top-left { top:12px!important;inset-inline-start:8px!important;width:380px!important;max-width:380px!important;z-index:1200!important; } + .mapboxgl-ctrl-top-left .mapboxgl-ctrl, .maplibregl-ctrl-top-left .maplibregl-ctrl { margin:0!important;float:none!important; } /* Pill geometry + PPLR-matched focus ring (qa: 2026-05-02). border-radius 999px matches PPLR's .pgc-input-wrap; focus-within ring uses PPLR's accent rgba(59,70,61,0.18) so the search bar reads as one column with @@ -237,7 +239,7 @@ useShadowStyles(` .dg-section-header-item { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#9ca3af;padding:2px 0; } .dsm-dark .dg-section-header-item { color:rgba(243,243,241,0.45); } @media(max-width:767px){ - .mapboxgl-ctrl-top-left { top:10px!important;left:3px!important;right:3px!important;width:calc(100% - 6px)!important;max-width:none!important; } + .mapboxgl-ctrl-top-left, .maplibregl-ctrl-top-left { top:10px!important;left:3px!important;right:3px!important;width:calc(100% - 6px)!important;max-width:none!important; } /* Search-bar height (exactly 35px, desktop AND mobile) is now owned by the shared GeocoderComponent.vue injection 'geocoder-height-35' — no per-profile @media height hack needed (replaces bug-searchbar-mobile-height). */ From 81ca86e39f1994ff139aaf534a9a4c920b3e097f Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sun, 27 Sep 2026 01:10:49 +0000 Subject: [PATCH 3/4] Country posters: a religion search names the family in the reader's language The legend row it selects is keyed on the family letter, so only the shown label changes. --- plugin-designs/country-posters/countries-map.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugin-designs/country-posters/countries-map.vue b/plugin-designs/country-posters/countries-map.vue index c4b0cbf35..7ce8f9b59 100644 --- a/plugin-designs/country-posters/countries-map.vue +++ b/plugin-designs/country-posters/countries-map.vue @@ -116,7 +116,7 @@ import { useLegendData } from '@map/composables/legends/useLegendData.js' // ─── Config + utils ────────────────────────────────────────────────────────── import { mapDefaults } from '@map/constants/mapDefaults.js' import { getColorStrategy } from '@map/colors/_registry.js' -import { RELIGION_FAMILIES } from '@map/colors/religion.js' +import { RELIGION_FAMILIES, religionFamilyLabel } from '@map/colors/religion.js' import { DataSourceManager } from '@map/utils/DataSourceManager.js' import sourcesConfig from '@map/api/sources.json' @@ -1810,7 +1810,8 @@ function routeReligion(evt, { map: m, filterLayerId }) { try { m.setFilter(filterLayerId, null) } catch (_) {} const famLetter = Object.keys(RELIGION_FAMILIES).find(k => RELIGION_FAMILIES[k] === value) if (famLetter) { - const node = { id: famLetter, label: value, depth: 0 } + // The label is display only (the reader's language); the filter keys on the family letter. + const node = { id: famLetter, label: religionFamilyLabel(famLetter), depth: 0 } const applyReligionSel = () => { try { m.setFilter(filterLayerId, null) } catch (_) {} onSemanticTreeSelect(node) From 25c3d10abdf10eae8400f65ce038be2e9c799d86 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Sun, 27 Sep 2026 01:11:39 +0000 Subject: [PATCH 4/4] Rebuild country-posters, and regenerate the tree --- .../country-posters/countries-map/index.html | 2 +- .../country-poster-wall/index.html | 2 +- .../country-posters-mfe/index.html | 2 +- .../country-posters/country-posters.js | 82 +++++++++---------- public/dx-maps/doxa-maps-spa/manifest.json | 8 +- public/dx-maps/manifest.json | 8 +- 6 files changed, 52 insertions(+), 52 deletions(-) diff --git a/public/dx-maps/country-posters/countries-map/index.html b/public/dx-maps/country-posters/countries-map/index.html index b5fe10353..5aaf95e80 100644 --- a/public/dx-maps/country-posters/countries-map/index.html +++ b/public/dx-maps/country-posters/countries-map/index.html @@ -36,7 +36,7 @@ - + - + - + \n\n" + "script": "\n\n\n\n" } }, { @@ -191,7 +191,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -205,7 +205,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 504af5b04..211f7aada 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -157,7 +157,7 @@ "bundle": "country-posters", "scriptUrl": "./country-posters/country-posters.js", "output": "dx-maps/country-posters/country-posters.js", - "integrity": "sha384-XqivEnF5+3wchsfbGo8j7pnw+XoHWgx3NxPafWB/d4EQjI3QrG5UPU1w+OpjPVSt", + "integrity": "sha384-TF/dxm3IkwgiPRQr2f07T6lz2DTIO6Nf7xGXOOgbV/W5eE0i0FVzjokpxIC/fnTh", "elements": [ "country-posters-map" ], @@ -177,7 +177,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } }, { @@ -191,7 +191,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n" + "script": "\n\n" } }, { @@ -205,7 +205,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n\n" + "script": "\n\n\n\n" } } ]