diff --git a/src/apps/dashboard/static/apps/dashboard/dashboard.js b/src/apps/dashboard/static/apps/dashboard/dashboard.js index 741a595..f15e13f 100644 --- a/src/apps/dashboard/static/apps/dashboard/dashboard.js +++ b/src/apps/dashboard/static/apps/dashboard/dashboard.js @@ -49,8 +49,10 @@ const bindPaletteSwatches = () => { portal.style.display = 'block'; portal.style.position = 'fixed'; portal.style.top = `${rect.bottom + 8}px`; - portal.style.left = `${Math.min(rect.left, window.innerWidth - 280)}px`; portal.style.zIndex = '9999'; + const margin = 8; + const ttW = portal.offsetWidth; + portal.style.left = `${Math.max(margin, Math.min(rect.left, window.innerWidth - ttW - margin))}px`; } function hideTooltip() { diff --git a/src/apps/gameboard/static/apps/gameboard/natus-wheel.js b/src/apps/gameboard/static/apps/gameboard/natus-wheel.js index d1766ba..7e43848 100644 --- a/src/apps/gameboard/static/apps/gameboard/natus-wheel.js +++ b/src/apps/gameboard/static/apps/gameboard/natus-wheel.js @@ -113,6 +113,27 @@ const NatusWheel = (() => { return ((ecliptic % 360) + 360) % 360 % 30; } + /** Inline SVG for a zodiac sign, sized to 1em, using current text colour. */ + function _signIconSvg(signName) { + const d = _signPaths[signName]; + if (!d) return ''; + return ``; + } + + /** Position tooltip near cursor, clamped so it never overflows the viewport. */ + function _positionTooltip(tooltip, event) { + const margin = 8; + tooltip.style.display = 'block'; + const ttW = tooltip.offsetWidth; + const ttH = tooltip.offsetHeight; + let left = event.clientX + 14; + let top = event.clientY - 10; + if (left + ttW + margin > window.innerWidth) left = event.clientX - ttW - 14; + if (top + ttH + margin > window.innerHeight) top = event.clientY - ttH - 10; + tooltip.style.left = Math.max(margin, left) + 'px'; + tooltip.style.top = Math.max(margin, top) + 'px'; + } + function _layout(svgEl) { const rect = svgEl.getBoundingClientRect(); const size = Math.min(rect.width || 400, rect.height || 400); @@ -295,17 +316,15 @@ const NatusWheel = (() => { d3.select(this).classed('nw-planet--hover', true); const tooltip = document.getElementById('id_natus_tooltip'); if (!tooltip) return; - const sym = PLANET_SYMBOLS[name] || name[0]; + const sym = PLANET_SYMBOLS[name] || name[0]; const signData = SIGNS.find(s => s.name === pdata.sign) || {}; - const signSym = signData.symbol || ''; - const inDeg = _inSignDeg(pdata.degree).toFixed(1); - const rx = pdata.retrograde ? ' ℞' : ''; + const inDeg = _inSignDeg(pdata.degree).toFixed(1); + const rx = pdata.retrograde ? ' ℞' : ''; + const icon = _signIconSvg(pdata.sign) || signData.symbol || ''; tooltip.innerHTML = `
${name} (${sym})
` + - `
${inDeg}° ${pdata.sign} ${signSym}${rx}
`; - tooltip.style.left = (event.clientX + 14) + 'px'; - tooltip.style.top = (event.clientY - 10) + 'px'; - tooltip.style.display = 'block'; + `
@${inDeg}° ${pdata.sign} (${icon})${rx}
`; + _positionTooltip(tooltip, event); }) .on('mouseout', function (event) { // Ignore mouseout when moving between children of this group @@ -427,9 +446,7 @@ const NatusWheel = (() => { tooltip.innerHTML = `
[${info.abbr}] ${info.name}
` + `
${info.classical} · ${count} (${pct}%)
`; - tooltip.style.left = (event.clientX + 14) + 'px'; - tooltip.style.top = (event.clientY - 10) + 'px'; - tooltip.style.display = 'block'; + _positionTooltip(tooltip, event); }) .on('mouseout', function (event) { if (sliceGroup.node().contains(event.relatedTarget)) return; diff --git a/src/static_src/scss/_natus.scss b/src/static_src/scss/_natus.scss index e49f932..c340731 100644 --- a/src/static_src/scss/_natus.scss +++ b/src/static_src/scss/_natus.scss @@ -449,7 +449,9 @@ html.natus-open .natus-modal-wrap { .nw-element--air { fill: rgba(var(--priCy, 64, 144, 176), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; } .nw-element--water { fill: rgba(var(--priId, 80, 80, 160), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; } -// ── Planet hover tooltip — uses .tt base styles; overrides position + z ─────── +// ── Planet hover tooltip — must live outside any ancestor with transform or +// container-type (both break position:fixed). Placed as a direct sibling of +// .natus-overlay in room.html; alongside #id_tooltip_portal in home.html. ── #id_natus_tooltip { position: fixed; @@ -459,6 +461,7 @@ html.natus-open .natus-modal-wrap { .tt-title { font-size: 1rem; font-weight: 700; } .tt-description { font-size: 0.75rem; } + .tt-sign-icon { fill: currentColor; vertical-align: middle; margin-bottom: 0.1em; } // Planet title colors — senary (brightest) tier on dark palettes .tt-title--au { color: rgba(var(--sixAu), 1); } // Sun diff --git a/src/templates/apps/dashboard/_partials/_applet-my-sky.html b/src/templates/apps/dashboard/_partials/_applet-my-sky.html index 7110e26..35092f8 100644 --- a/src/templates/apps/dashboard/_partials/_applet-my-sky.html +++ b/src/templates/apps/dashboard/_partials/_applet-my-sky.html @@ -74,7 +74,6 @@ {% endif %} -