moritz/lazyflat
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): bigger lightbox arrows, calmer button anim, expand row by clicking whitespace

Browse source 
Lightbox: bump close 2.5→3rem and prev/next 3→3.5rem so the hit area
is forgiving — random "click an arrow but the modal closes" reports
were almost always near-misses landing on the backdrop. Drop the
:active scale(.96) entirely (it was the jarring part) and soften the
hover bg from .8 to .7 with a slightly faster transition so taps feel
crisp instead of twitchy.

Wohnungen list: clicking the empty whitespace next to the chevron now
toggles the row open/closed, same as clicking the chevron itself.
Implemented as expandTriggerFor(target) wrapped around the existing
delegate — direct chevron clicks are short-circuited first; row clicks
fall through unless the target is inside an interactive element
(a/button/input/label/form/.partner-badge) or inside the already-
opened detail pane (where the gallery and "Zur Original-Anzeige" link
have their own meaning).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
EiSiMo 2026-04-23 13:23:54 +02:00
parent e7f5cb9bee
commit 85f5f364ed
2 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web/static/app.js
View file

@ -65,8 +65,23 @@ setInterval(updateRelativeTimes, 5000);
// Flat detail expand — lazily fetches /partials/wohnung/<id> 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;