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

10
web/static/app.css
View file

@ -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; }