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 @@ - + - + - +