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

feat(ui): green map pin for applied flats, hide map reject after apply, lightbox image viewer

Browse source 
Map: replace Leaflet's default marker with a divIcon SVG pin coloured
per state — green when the user has already successfully applied
(status.chip === "ok"), brand-blue otherwise. Same condition also hides
the action buttons in the popup, matching the list view, which already
hid both Bewerben and Ablehnen on success — so the only remaining
action on an applied flat is opening the original ad link.

Image gallery: clicks now open a global lightbox modal instead of a new
tab. The viewer fits each image into the viewport via max-width/height
+ object-fit: contain (uniform sizing regardless of source aspect),
shows × top-right, prev/next arrows on the sides, ←/→/Esc keyboard
nav, and click-on-backdrop to close. Prev arrow is hidden on the first
image and next on the last. Tile changes from <a target="_blank"> to
<button> since the new-tab fallback is no longer wanted.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
EiSiMo 2026-04-23 12:37:15 +02:00
parent fe43a402d8
commit 787f848aba
5 changed files with 173 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/templates/_wohnung_detail.html
View file

@ -10,9 +10,9 @@
<div class="px-4 py-4 space-y-3">
<div class="flat-gallery">
{% for src in image_urls %}
<a class="flat-gallery-tile" href="{{ src }}" target="_blank" rel="noopener">
<button type="button" class="flat-gallery-tile" data-full-src="{{ src }}" aria-label="Foto {{ loop.index }} öffnen">
<img src="{{ src }}" loading="lazy" alt="Foto {{ loop.index }}">
</a>
</button>
{% endfor %}
</div>
<div class="text-xs">

15
web/templates/base.html
View file

@ -18,5 +18,20 @@
</head>
<body class="min-h-screen">
{% block body %}{% endblock %}
{# Image lightbox — global so any flat-gallery on any page reuses the same modal. #}
<div id="lazyflat-lightbox" class="lightbox hidden" aria-hidden="true" role="dialog" aria-label="Bildansicht">
<button class="lightbox-close" type="button" aria-label="Schließen" data-lightbox-close>
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
</button>
<button class="lightbox-prev" type="button" aria-label="Vorheriges Bild" data-lightbox-prev>
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button class="lightbox-next" type="button" aria-label="Nächstes Bild" data-lightbox-next>
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
<img class="lightbox-image" alt="">
<div class="lightbox-counter"></div>
</div>
</body>
</html>