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

Prayer Progress: the control column follows the reading direction, on MapLibre too

Browse source 
The legend and search column were placed with left:10px and styled only under Mapbox's
.mapboxgl-ctrl-top-left, so on the keyless engine they kept MapLibre's defaults and in
Arabic stayed on the left. Both engines' classes now take inset-inline-start (the same
fix country-posters carries), and the help close button and the detail labels use
logical sides.
This commit is contained in:
Doxa Maps 2026-09-28 08:08:19 +00:00
parent e893db3718
commit e335d56409
1 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
plugin-designs/doxa-simple-map/doxa-simple-map.vue
View file

@ -89,8 +89,9 @@ useShadowStyles(`
(matches legend's 10px left inset). Locked to legend width. The Mapbox
default 10px child margin is NEUTRALIZED here by our positioning —
without this override the geocoder would nest-indent another 10px. */
.mapboxgl-ctrl-top-left { top:10px!important;left:10px!important;width:var(--map-legend-width,340px)!important;max-width:var(--map-legend-width,340px)!important;z-index:1200!important; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin:0!important;float:none!important; }
/* Both engines' class (keyless is MapLibre), and the reading-start side, so Arabic puts the column on the right. */
.mapboxgl-ctrl-top-left, .maplibregl-ctrl-top-left { top:10px!important;inset-inline-start:10px!important;width:var(--map-legend-width,340px)!important;max-width:var(--map-legend-width,340px)!important;z-index:1200!important; }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl, .maplibregl-ctrl-top-left .maplibregl-ctrl { margin:0!important;float:none!important; }
/* Geocoder pill: inherit Mapbox's DEFAULT height + icon positions. Only
override width + rounded border + shadow. This keeps the search-icon
and X-button perfectly aligned by Mapbox's own calibrated CSS. */
@ -126,7 +127,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; }
@ -205,7 +206,7 @@ useShadowStyles(`
.dsm-help-modal h2 { margin:0 0 12px;font-size:18px;font-weight:600; }
.dsm-help-modal p { margin:0 0 10px;font-size:14px;line-height:1.6;color:#ccc; }
.dsm-help-modal p:last-of-type { margin-bottom:0; }
.dsm-help-close { position:absolute;top:12px;right:14px;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:4px 6px;border-radius:4px; }
.dsm-help-close { position:absolute;top:12px;inset-inline-end:14px;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:4px 6px;border-radius:4px; }
.dsm-help-close:hover { background:rgba(255,255,255,0.12); }
`, 'doxa-simple-map')