From 030fca67ecbb81f73e006446b3160fc58e5c92d2 Mon Sep 17 00:00:00 2001 From: swift-river542 Date: Thu, 17 Sep 2026 01:56:36 -0500 Subject: [PATCH] Map corners hold after the canvas loads (paint-time clip inside the map); status red lifted a touch --- .../doxa-research-map/research-map.vue | 21 ++++++++++++++++--- .../doxa-simple-map/doxa-simple-map.vue | 9 ++++++-- library/ProfileLoader.vue | 2 +- library/colors/adoption.js | 2 +- library/colors/engagement.js | 2 +- library/colors/prayer-progress.js | 2 +- library/utils/geoUtils.js | 1 + 7 files changed, 30 insertions(+), 9 deletions(-) diff --git a/app-profiles/doxa-research-map/research-map.vue b/app-profiles/doxa-research-map/research-map.vue index 645d87d6f..73beb7dd5 100644 --- a/app-profiles/doxa-research-map/research-map.vue +++ b/app-profiles/doxa-research-map/research-map.vue @@ -266,8 +266,12 @@ useShadowStyles(` .rm-tab-bar { flex:0 0 auto;display:flex;align-items:center; background:#ffffff; - border-bottom:1px solid rgba(0,0,0,0.12); + /* No rule under the tabs: the header and the map read as one surface. */ height:44px; + /* The tab bar IS the card's top edge: it carries the same top corners as the card so the + header flows into the rounding with no pale sliver left behind by a square corner. */ + border-top-left-radius:var(--map-radius, 0px); + border-top-right-radius:var(--map-radius, 0px); /* Inline padding clears the rounded slot corner so the first tab ("Prayer") doesn't sit under the curve. Desktop bumps the start side to 36px because .rounded-xlg eats a much larger chunk of the @@ -285,7 +289,7 @@ useShadowStyles(` font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .rm-tab-bar::-webkit-scrollbar{display:none;width:0;height:0;} - .rm-dark .rm-tab-bar { background:#2a332a;border-bottom-color:rgba(255,255,255,0.10); } + .rm-dark .rm-tab-bar { background:#2a332a; } /* Tab text on the WHITE bar: muted grey, darkening to the Material accent when active (was beige #F3F3F1 / #cbc5b9 for the old green bar — unreadable on white). */ .rm-tab { @@ -326,7 +330,12 @@ useShadowStyles(` down to the canvas instead of relying on the ancestor clip alone. */ .rm-root, .rm-map-area, .rm-map-canvas, .rm-map-canvas .mapboxgl-canvas-container, .rm-map-canvas .mapboxgl-canvas, - .rm-map-canvas .maplibregl-canvas-container, .rm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius, 0px); } + .rm-map-canvas .maplibregl-canvas-container, .rm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius-corners, var(--map-radius, 0px)); } + /* PAINT-TIME CLIP. border-radius alone is applied to a COMPOSITED child (the WebGL canvas) + only once the engine builds a mask layer for it, so on a real GPU the corners go square the + moment the map finishes loading. clip-path clips at paint time regardless of compositing, + so the rounding holds before and after the canvas appears. */ + .rm-map-area, .rm-map-canvas { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); } .rm-map-canvas { position:absolute;inset:0; } .rm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;z-index:5; } /* Failure state, NOT a cover: modelled on cities-internet's .gm-err so anything the @@ -1929,6 +1938,12 @@ let _containerObserver = null function applyContainerScale(width) { const el = rmRoot.value if (!el) return + // Corner roundedness: the host page decides when it rounds the element (the site publishes + // --map-radius from its slot); supply a default only for a bare embed, never overriding it. + if (!getComputedStyle(el).getPropertyValue('--map-radius').trim()) { + el.style.setProperty('--map-radius', '16px') + el.style.setProperty('--map-radius-sm', '8px') + } if (width >= 700) { el.style.setProperty('--map-btn-size', '40px') el.style.setProperty('--map-toolbar-gap', '8px') diff --git a/app-profiles/doxa-simple-map/doxa-simple-map.vue b/app-profiles/doxa-simple-map/doxa-simple-map.vue index 157be9c10..efb70cf91 100644 --- a/app-profiles/doxa-simple-map/doxa-simple-map.vue +++ b/app-profiles/doxa-simple-map/doxa-simple-map.vue @@ -58,7 +58,12 @@ useShadowStyles(` down to the canvas instead of relying on the ancestor clip alone. */ .dsm-root, .dsm-map-area, .dsm-map-canvas, .dsm-map-canvas .mapboxgl-canvas-container, .dsm-map-canvas .mapboxgl-canvas, - .dsm-map-canvas .maplibregl-canvas-container, .dsm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius, 0px); } + .dsm-map-canvas .maplibregl-canvas-container, .dsm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius-corners, var(--map-radius, 0px)); } + /* PAINT-TIME CLIP. border-radius alone is applied to a COMPOSITED child (the WebGL canvas) + only once the engine builds a mask layer for it, so on a real GPU the corners go square the + moment the map finishes loading. clip-path clips at paint time regardless of compositing, + so the rounding holds before and after the canvas appears. */ + .dsm-map-area, .dsm-map-canvas { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); } .dsm-map-canvas { position:absolute;inset:0; } .dsm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;z-index:5; } /* dark like the research map's cover: the basemap under it is night from frame one, so a light cover was the only "flash" left */ /* Failure state, NOT a cover: modelled on cities-internet's .gm-err so anything the @@ -945,7 +950,7 @@ const ACTIVE_STROKE_EXPR = [ * so the ring is distinguishable on both dark and light map backgrounds. */ const PULSE_COLORS = { - prayer: { noPrayer: '#e74c3c', hasPrayer: '#f0c64a', fullPrayer: '#27ae60' }, + prayer: { noPrayer: '#e8382c', hasPrayer: '#f0c64a', fullPrayer: '#27ae60' }, engagement: { notEngaged: '#5c6bc0', hasEngagement: '#7c3aed' }, adoption: { notAdopted: '#78909c', hasAdoption: '#0d9488' } } diff --git a/library/ProfileLoader.vue b/library/ProfileLoader.vue index a31e4bc61..aef5ab8ee 100644 --- a/library/ProfileLoader.vue +++ b/library/ProfileLoader.vue @@ -201,7 +201,7 @@ provide('dataStore', dataStore) wrapper sits between the host and the profile, so without this every descendant — including the WebGL canvas, which its own compositing layer leaves unclipped — would inherit square corners and show through the rounded slot. */ - border-radius: var(--map-radius, 0px); + border-radius: var(--map-radius-corners, var(--map-radius, 0px)); width: 100%; height: 100%; position: relative; diff --git a/library/colors/adoption.js b/library/colors/adoption.js index dc5f72999..274337753 100644 --- a/library/colors/adoption.js +++ b/library/colors/adoption.js @@ -11,7 +11,7 @@ export const PROPERTY_KEY = 'adoptionStatus' export const PALETTE = { - notAdopted: '#e74c3c', // Red — unified with PRAYER_COLORS.noPrayer + notAdopted: '#e8382c', // Red — unified with PRAYER_COLORS.noPrayer hasAdoption: '#22c55e' // Bright green — easier to see on the adoption map } diff --git a/library/colors/engagement.js b/library/colors/engagement.js index b1c7fac7c..a2cd65694 100644 --- a/library/colors/engagement.js +++ b/library/colors/engagement.js @@ -11,7 +11,7 @@ export const PROPERTY_KEY = 'engagementStatus' export const PALETTE = { - notEngaged: '#e74c3c', // Red — unified with PRAYER_COLORS.noPrayer + notEngaged: '#e8382c', // Red — unified with PRAYER_COLORS.noPrayer hasEngagement: '#22c55e' // Neon green — high contrast against unengaged pins (UX request 2026-04-26) } diff --git a/library/colors/prayer-progress.js b/library/colors/prayer-progress.js index ae4d45695..9efca9ee6 100644 --- a/library/colors/prayer-progress.js +++ b/library/colors/prayer-progress.js @@ -21,7 +21,7 @@ export const PROPERTY_KEY = 'peoplePraying' export const FULL_PRAYER_THRESHOLD = 144 export const PALETTE = { - noPrayer: '#e74c3c', // Red — Needs Prayer (default) + noPrayer: '#e8382c', // Red — Needs Prayer (default) hasPrayer: '#f0c64a', // Yellow — Has Prayer (partial); the site's prayer-status yellow fullPrayer: '#22c55e' // Green — Full Prayer Coverage } diff --git a/library/utils/geoUtils.js b/library/utils/geoUtils.js index 17e77984d..25b6ceaa7 100644 --- a/library/utils/geoUtils.js +++ b/library/utils/geoUtils.js @@ -153,6 +153,7 @@ export function darkenColor(color, percent = 15) { // Hardcoded region overrides (East Asia, Africa, Latin America, // Eurasia/Europe, North America, Middle East) if (color === '#3498db') return '#2171b5' + if (color === '#e8382c') return '#c0392b' if (color === '#e74c3c') return '#c0392b' if (color === '#f39c12') return '#ca6f1e' if (color === '#f0c64a') return '#c9a227' // prayer yellow → darker yellow