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

Country posters: the geocoder column follows the reading direction

Browse source 
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).
This commit is contained in:
Doxa Maps 2026-09-26 18:03:36 +00:00
parent 835ec1ac28
commit e4f2be71c4
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
plugin-designs/country-posters/countries-map.vue
View file

@ -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; }