diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue
index acec9233d..1b7465d99 100644
--- a/plugin-designs/regions-dashboard/region-dashboards.vue
+++ b/plugin-designs/regions-dashboard/region-dashboards.vue
@@ -848,6 +848,30 @@ useShadowStyles(
'.rd-chooser{ display:flex; flex-wrap:wrap; gap:13.3px; align-items:flex-end;' +
' justify-content:center; }' +
// .stack .stack--sm — --spacing-sm, 1.33rem.
+ // ── the map sat below the fold at 1440, and this is the part of that I can fix without
+ // ── touching the clone or the order ────────────────────────────────────────────────────────
+ // ARITHMETIC AT 1440, container 1200px, tokens resolved: padding-top 55.3 + head 147 + 3 gaps of
+ // 55.3 + chooser ~62 + stats ~110 + note 29 + 13.3 puts the map's TOP at ~583px, and the map is
+ // 780px tall because min-height:780px beats what 16/9 asks for at 1200 wide (675). Bottom ~1363.
+ // So a reader at 1440x900 sees roughly the top 190px of an 780px map: a sliver, which is what
+ // "below the fold" meant.
+ //
+ // WHAT THIS DOES AND DOES NOT DO. Tightening the three gaps above the map from --spacing-3xl to
+ // --spacing-xl and dropping the outsized title one step recovers ~99px, so ~286px of map shows
+ // instead of ~190 — about 50% more map on load. It does NOT get the whole map above the fold,
+ // and nothing that leaves the map at 780px can: you would need the map under ~320px tall. That
+ // fix exists (bound .rcm by viewport height) but it changes the map's rendered SIZE, which is a
+ // change to what the Campaign Server shows, so it is the Driver's call and not mine.
+ //
+ // SCOPED TO THE ALL-REGIONS PAGE ONLY (.rd-root--all), and at >=1200px only. That page is ours;
+ // the region and country pages are the clone, and their vertical rhythm is measured against
+ // dx-life, so a global trim here would quietly un-clone three pages to improve one.
+ '@media (min-width:1200px){' +
+ ' .rd-root--all .rd-scroll > .rd-chooser,' +
+ ' .rd-root--all .rd-scroll > .rd-stats,' +
+ ' .rd-root--all .rd-scroll > .rd-mapblock{ margin-top:var(--spacing-xl); }' +
+ ' .rd-root--all .rd-title{ font-size:var(--font-size-3xl); }' +
+ '}' +
'.rd-mapblock{ display:flex; flex-direction:column; }' +
'.rd-mapblock > * + *{ margin-top:13.3px; }' +
'.rd-mapnote{ margin:0; text-align:center; color:#92b195; font-weight:700; font-size:var(--font-size-md); }' +
@@ -990,7 +1014,7 @@ useShadowStyles(
see the host document's attribute, so the switch their global sheet performs on
[lang="ru-RU"] can only fire if the attribute is INSIDE the root. It is also simply
correct HTML — screen readers and hyphenation read it. -->
-
+
diff --git a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue
index d8394334d..c9e008b1e 100644
--- a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue
+++ b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue
@@ -228,7 +228,16 @@ function pinExpressions() {
return {
color: regionColorExpression(),
sortKey: lit ? ['case', isLit, 2, 1] : 1,
- opacity: lit ? ['case', isLit, 1, 0.25] : 1,
+ opacity: lit ? ['case', isLit, 1, 0.45] : 1,
+ // ★ THE DIM DIMS THE STROKE TOO, AND THAT IS THE WHOLE FIX. circle-opacity applies to the
+ // FILL only; circle-stroke-opacity is a separate property that defaults to 1. So the old
+ // 0.25 dim left the 1px white stroke fully opaque, and at the dimmed radius that ring is
+ // most of the pin: a reader saw a crisp white O with a washed-out centre, not a receded dot.
+ // rega shot it (pins-a5eb9f6fa/hover2/maplibre-1440-hover.png) and called them pale rings,
+ // which is exactly what an opaque stroke around a faint core looks like on a pastel fill.
+ // Worth being precise, because "keep the stroke opaque while dimming the fill" was the
+ // proposed fix and it was already the behaviour — it was the CAUSE, not the cure.
+ strokeOpacity: lit ? ['case', isLit, 1, 0.3] : 1,
// THE RESTING STATE IS BIGGER THAN THE CLONE'S, and only here. The Driver reported the pins
// as hard to see; this is the state that answers that, because it is what the page shows on
// load, before any hover. Two things make a pin harder to read on THIS map than on a cloned
@@ -244,7 +253,7 @@ function pinExpressions() {
// The HOVER state is deliberately untouched — dimming the rest to 0.25 is the design saying
// "these pins are one group", and that is a Driver taste call, not a legibility defect.
radius: lit
- ? ['case', isLit, ['interpolate', ['linear'], ['zoom'], 2, 4.5, 6, 8], ['interpolate', ['linear'], ['zoom'], 2, 2.5, 6, 5]]
+ ? ['case', isLit, ['interpolate', ['linear'], ['zoom'], 2, 4.5, 6, 8], ['interpolate', ['linear'], ['zoom'], 2, 3, 6, 5.5]]
: ['interpolate', ['linear'], ['zoom'], 2, 4, 6, 7.5],
}
}
@@ -257,6 +266,7 @@ function pinExpressions() {
? ['case', outsideFocus, 0, full, 3, some, 2, 1]
: ['case', ['get', 'inCountry'], 1, 0],
opacity: ['case', ['get', 'inCountry'], 1, 0.75],
+ strokeOpacity: 1, // theirs, unchanged (CountryMap.vue) — only the chooser's dim is ours
radius: ['interpolate', ['linear'], ['zoom'], 2, 3, 6, 6.5],
}
}
@@ -264,7 +274,7 @@ function pinExpressions() {
function addLayers() {
const m = map.value
if (!m) return
- const { color: pinColor, sortKey: pinSortKey, opacity: pinOpacity, radius: pinRadius } = pinExpressions()
+ const { color: pinColor, sortKey: pinSortKey, opacity: pinOpacity, radius: pinRadius, strokeOpacity: pinStrokeOpacity } = pinExpressions()
if (!m.getSource(SRC_COUNTRIES)) {
// ── COUNTRY POLYGONS, PER PROVIDER ────────────────────────────────────────────────────────
@@ -329,6 +339,7 @@ function addLayers() {
'circle-opacity': pinOpacity,
'circle-stroke-width': 1,
'circle-stroke-color': '#ffffff',
+ 'circle-stroke-opacity': pinStrokeOpacity,
},
})
m.on('click', 'rcm-pins', onPinClick)
@@ -596,9 +607,10 @@ function applySubject() {
if (src) src.setData(geojson.value)
// Re-apply the MODE, not just the data — see pinExpressions().
if (m.getLayer('rcm-pins')) {
- const { color, sortKey, opacity, radius } = pinExpressions()
+ const { color, sortKey, opacity, radius, strokeOpacity } = pinExpressions()
m.setPaintProperty('rcm-pins', 'circle-color', color)
m.setPaintProperty('rcm-pins', 'circle-opacity', opacity)
+ m.setPaintProperty('rcm-pins', 'circle-stroke-opacity', strokeOpacity)
m.setPaintProperty('rcm-pins', 'circle-radius', radius)
m.setLayoutProperty('rcm-pins', 'circle-sort-key', sortKey)
}
diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json
index 8bb14d1e8..144b267d9 100644
--- a/public/dx-maps/doxa-maps-spa/manifest.json
+++ b/public/dx-maps/doxa-maps-spa/manifest.json
@@ -1080,7 +1080,7 @@
"bundle": "regions-dashboard",
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"output": "dx-maps/regions-dashboard/regions-dashboard.js",
- "integrity": "sha384-JNfHBIQiXgHSUg0i/wd43Q0XMPGuo2GNOm0jRdD7AQvWg+TZUdpRHKtwqkqhRCNo",
+ "integrity": "sha384-/RARe73nUORH8xOqfu+fHBot96aJ9qN0lASLexQE5kaAHBQrC5JGBFOzVlexWphH",
"elements": [
"regions-dashboard"
],
@@ -1103,7 +1103,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n\n\n"
+ "script": "\n\n\n\n"
}
},
{
@@ -1119,7 +1119,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n"
+ "script": "\n\n"
}
},
{
@@ -1135,7 +1135,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.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 8bb14d1e8..144b267d9 100644
--- a/public/dx-maps/manifest.json
+++ b/public/dx-maps/manifest.json
@@ -1080,7 +1080,7 @@
"bundle": "regions-dashboard",
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"output": "dx-maps/regions-dashboard/regions-dashboard.js",
- "integrity": "sha384-JNfHBIQiXgHSUg0i/wd43Q0XMPGuo2GNOm0jRdD7AQvWg+TZUdpRHKtwqkqhRCNo",
+ "integrity": "sha384-/RARe73nUORH8xOqfu+fHBot96aJ9qN0lASLexQE5kaAHBQrC5JGBFOzVlexWphH",
"elements": [
"regions-dashboard"
],
@@ -1103,7 +1103,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n\n\n"
+ "script": "\n\n\n\n"
}
},
{
@@ -1119,7 +1119,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n"
+ "script": "\n\n"
}
},
{
@@ -1135,7 +1135,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "",
- "script": "\n\n\n\n"
+ "script": "\n\n\n\n"
}
}
]
diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html
index 3c9e9780b..20754b322 100644
--- a/public/dx-maps/regions-dashboard/region-dashboards/index.html
+++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html
@@ -36,7 +36,7 @@
-
+
-
+
-
+