diff --git a/plugin-designs/my-upg-100-list/upg-100-list.vue b/plugin-designs/my-upg-100-list/upg-100-list.vue index ded637f7..cdede6e1 100644 --- a/plugin-designs/my-upg-100-list/upg-100-list.vue +++ b/plugin-designs/my-upg-100-list/upg-100-list.vue @@ -488,7 +488,9 @@ useShadowStyles( 'border-radius:10px;padding:8px 10px;box-shadow:0 4px 16px rgba(0,0,0,.4)}' + '.upg-hud-head{display:flex;align-items:baseline;gap:6px;white-space:nowrap}' + '.upg-hud-total{font-size:15px;font-weight:700;color:#6ee7b7}' + - '.upg-hud-band{margin-left:auto;font-size:9px;color:#9aa7b8}' + + // margin-inline-start, not margin-left: this pushes the band to the TRAILING end of the flex row + // .upg-hud-head, which is the left in Arabic. Same class as the legend/table conversions. + '.upg-hud-band{margin-inline-start:auto;font-size:9px;color:#9aa7b8}' + '.upg-hud-band.ok{color:#6ee7b7}' + '.upg-hud-names{margin-top:5px;max-height:84px;overflow:auto;font-size:10px;' + 'color:#cbd5e1;line-height:1.45;word-break:break-word}' + diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue index 81da625b..7011275f 100644 --- a/plugin-designs/regions-dashboard/region-dashboards.vue +++ b/plugin-designs/regions-dashboard/region-dashboards.vue @@ -234,18 +234,6 @@ const subject = computed(() => { return { kind: 'all', title: t('All Regions'), context: `${formatNumber(regions.value.length)} regions`, stats: all } }) -// Headline tiles. Every one of these is a COUNT the rollup actually measured — no ratio is -// invented here that tab 1 could not also produce from the same records. -const tiles = computed(() => { - const s = subject.value.stats || emptyStats() - return [ - { label: 'People groups', value: formatNumber(s.count) }, - { label: 'Population', value: formatNumber(s.population) }, - { label: 'Engaged', value: formatNumber(s.engaged) }, - { label: 'With prayer cover', value: formatNumber(s.withPrayer) }, - ] -}) - // ★ NO BAR CHART. It was ours, not theirs, and the rule is that a SELECTED region or country // must look IDENTICAL to its DX-life page — RegionDetail.vue has four stat cards, the map, three // goal cards and the country table, and nothing else. The one deliberate difference in this diff --git a/plugin-designs/upg-neighbor/src/campaigns.vue b/plugin-designs/upg-neighbor/src/campaigns.vue index 0d8f3f13..634386eb 100644 --- a/plugin-designs/upg-neighbor/src/campaigns.vue +++ b/plugin-designs/upg-neighbor/src/campaigns.vue @@ -82,6 +82,9 @@ function exportAll() { // ─── Map: believers (green) and the unreached they would reach (red) ───────── const SRC_R = 'cp-r', SRC_U = 'cp-u' const fc = (features) => ({ type: 'FeatureCollection', features }) +// Hover label: after a language is picked, its believers (green) and the unreached they reach (red) +// were anonymous until clicked, and a green dot could not be clicked at all. Same label as Mobilize. +const hover = ref(null) // { x, y, text } const pt = (g) => ({ type: 'Feature', geometry: { type: 'Point', coordinates: [g.lng, g.lat] }, properties: { id: g.pgid, pop: g.pop, b: g.believers } }) function setSrc(m, id, d) { const s = m.getSource(id); if (s) s.setData(d); else m.addSource(id, { type: 'geojson', data: d }) } let repaintPending = false @@ -131,6 +134,14 @@ onMounted(async () => { }) m.on('mouseenter', 'cp-u', () => { m.getCanvas().style.cursor = 'pointer' }) m.on('mouseleave', 'cp-u', () => { m.getCanvas().style.cursor = '' }) + const byId = (id) => active.value && [...active.value.reached, ...active.value.unreached].find((g) => g.pgid === id) + for (const id of ['cp-u', 'cp-r']) { + m.on('mousemove', id, (ev) => { + const g = byId(ev.features?.[0]?.properties?.id) + hover.value = g ? { x: ev.point.x, y: ev.point.y, text: `${g.name} · ${g.country}` } : null + }) + m.on('mouseleave', id, () => { hover.value = null }) + } }) m.on('style.load', repaint) }) @@ -169,6 +180,7 @@ useShadowStyles(` .cp-line { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:5px 0; border-bottom:1px solid #f1f3f6; } .cp-line button { border:0; background:none; padding:0; font:inherit; color:${NAVY}; cursor:pointer; text-align:left; } .cp-note { padding:14px; color:#6b7280; font-size:13px; line-height:1.45; } + .cp-hover { position:absolute; z-index:25; pointer-events:none; background:rgba(0,27,68,.92); color:#fff; font-size:12px; line-height:1.3; padding:5px 8px; border-radius:6px; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cp-maperr { position:absolute; right:12px; top:12px; z-index:15; background:#fff; border:1px solid #d9dee6; border-radius:8px; padding:8px 12px; font-size:13px; color:#6b7280; } @media (max-width:760px) { .cp-panel { top:auto; left:6px; right:6px; bottom:6px; width:auto; height:55%; } } `, 'upgn-campaigns') @@ -178,6 +190,7 @@ useShadowStyles(`
{{ mapError }}
+
{{ hover.text }}