feat(weather): always-visible close button on weather detail panel

This commit is contained in:
Graham McIntire 2026-04-30 14:04:14 -05:00
parent b37692592b
commit abb93c9511
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59

View file

@ -637,9 +637,7 @@ function buildDetailHTML(point: WeatherPoint): string {
]
const mobile = isMobile()
const closeBtn = mobile
? `<button onclick="document.getElementById('weather-detail-panel').style.display='none'" style="position:absolute;top:8px;right:10px;background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>`
: ""
const closeBtn = `<button class="detail-close-btn" title="Close" style="position:absolute;top:8px;right:10px;background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:18px;line-height:1;width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;">&times;</button>`
const handle = mobile
? `<div style="display:flex;justify-content:center;padding:6px 0 2px;"><div style="width:32px;height:4px;border-radius:2px;background:rgba(255,255,255,0.3);"></div></div>`
: ""
@ -737,6 +735,15 @@ export const WeatherMap: WeatherMapHook = {
if (this.detailPanel) {
L.DomEvent.disableClickPropagation(this.detailPanel)
L.DomEvent.disableScrollPropagation(this.detailPanel)
this.detailPanel.addEventListener("click", (e: MouseEvent) => {
if ((e.target as HTMLElement).closest(".detail-close-btn") && this.detailPanel) {
this.detailPanel.style.display = "none"
this.detailPanel.innerHTML = ""
this.clickMarker?.clearLayers()
if (this.escHint) this.escHint.style.opacity = "0"
}
})
}
// ESC hint