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

Map corners hold after the canvas loads (paint-time clip inside the map); status red lifted a touch

Browse source
This commit is contained in:
swift-river542 2026-09-17 01:56:36 -05:00
parent 79fb77abd6
commit 030fca67ec
7 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app-profiles/doxa-research-map/research-map.vue
View file

@ -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')

9
app-profiles/doxa-simple-map/doxa-simple-map.vue
View file

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

2
library/ProfileLoader.vue
View file

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

2
library/colors/adoption.js
View file

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

2
library/colors/engagement.js
View file

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

2
library/colors/prayer-progress.js
View file

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

1
library/utils/geoUtils.js
View file

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