diff --git a/web/static/app.css b/web/static/app.css index 2dec58f..d5ab98d 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -146,16 +146,14 @@ body:has(#v_map:checked) .view-map { display: block; } .lightbox button { background: rgba(0, 0, 0, .55); color: #fff; border: 0; border-radius: 9999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; - transition: background .15s, transform .05s; padding: 0; + transition: background .12s; padding: 0; z-index: 2; } -.lightbox button:hover { background: rgba(0, 0, 0, .8); } -.lightbox button:active { transform: scale(.96); } +.lightbox button:hover { background: rgba(0, 0, 0, .7); } .lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; - width: 2.5rem; height: 2.5rem; } + width: 3rem; height: 3rem; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); - width: 3rem; height: 3rem; } -.lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(.96); } + width: 3.5rem; height: 3.5rem; } .lightbox-prev { left: 1.25rem; } .lightbox-next { right: 1.25rem; } .lightbox-prev[hidden], .lightbox-next[hidden] { display: none; } diff --git a/web/static/app.js b/web/static/app.js index cc2105d..d41f866 100644 --- a/web/static/app.js +++ b/web/static/app.js @@ -65,8 +65,23 @@ setInterval(updateRelativeTimes, 5000); // Flat detail expand — lazily fetches /partials/wohnung/ into the sibling // .flat-detail container on first open, toggles visibility on subsequent clicks. // Event delegation survives HTMX swaps without re-binding on each poll. +// +// The trigger is either the chevron button OR any non-interactive area inside +// the row's header (so users can click the empty whitespace next to the title +// to expand). Clicks on a link / form button / partner badge / inside the +// already-loaded detail pane are NOT counted as expand triggers. +function expandTriggerFor(target) { + const directBtn = target.closest(".flat-expand-btn"); + if (directBtn) return directBtn; + if (target.closest("a, button, input, label, form, .partner-badge")) return null; + if (target.closest(".flat-detail")) return null; + const row = target.closest(".flat-row"); + if (!row) return null; + return row.querySelector(".flat-expand-btn"); +} + document.addEventListener("click", (ev) => { - const btn = ev.target.closest(".flat-expand-btn"); + const btn = expandTriggerFor(ev.target); if (!btn) return; const row = btn.closest(".flat-row"); if (!row) return;