BUG: tapping a postcard image should open it full-size (lightbox) #6

Closed
opened 2026-06-15 20:57:13 +00:00 by mAi · 2 comments
Collaborator

Bug (live on https://post.msbls.de)

On a rendered postcard, tapping/clicking an image does nothing. m wants it to open the image FULLY — a full-size / lightbox / zoom view.

m, verbatim: "Klicken auf ein Bild sollte das dann vollständig zeigen - das klappt noch nicht."

Scope

Add a lightbox/full-size view for images everywhere they appear on a card: gallery (multi-image) layout, flip-card front carousel (Wendekarte), and single-image layout.

Mobile-first: tap an image → full-size overlay; tap backdrop / X / swipe-down → close. Also works on desktop (click to open, click-outside / Esc to close).

Gesture-conflict warning (Wendekarte)

The flip carousel already has horizontal swipe = change image and a separate button = flip to text. Fold the lightbox in so the three don't fight — a distinct tap opens the full image while horizontal swipe still changes the carousel image and the flip button stays separate. Opening the lightbox must not trigger a flip or slide change.

Constraints

Render/interaction only (postcard.html + style.css + minimal JS). No schema change — images already load from Supabase Storage; this is purely the viewer. CSS-first / progressive enhancement preferred, lightweight. Mobile-first, German UI, noindex stays.

Repro

Open a card with image(s) on a phone, tap an image → nothing. Expected: full-size view.

DoD

  • Tapping any image (gallery / flip carousel / single) opens a full-size lightbox; closes cleanly; works mobile + desktop.
  • No gesture conflict on the Wendekarte (swipe still changes image, flip still flips).
  • build/vet/test green; e2e verified on a multi-image card; test data cleaned. Commit references this issue. otto-head merges + deploys to post.msbls.de.
## Bug (live on https://post.msbls.de) On a rendered postcard, tapping/clicking an image does nothing. m wants it to open the image FULLY — a full-size / lightbox / zoom view. m, verbatim: "Klicken auf ein Bild sollte das dann vollständig zeigen - das klappt noch nicht." ## Scope Add a lightbox/full-size view for images everywhere they appear on a card: gallery (multi-image) layout, flip-card front carousel (Wendekarte), and single-image layout. Mobile-first: tap an image → full-size overlay; tap backdrop / X / swipe-down → close. Also works on desktop (click to open, click-outside / Esc to close). ## Gesture-conflict warning (Wendekarte) The flip carousel already has horizontal swipe = change image and a separate button = flip to text. Fold the lightbox in so the three don't fight — a distinct tap opens the full image while horizontal swipe still changes the carousel image and the flip button stays separate. Opening the lightbox must not trigger a flip or slide change. ## Constraints Render/interaction only (postcard.html + style.css + minimal JS). No schema change — images already load from Supabase Storage; this is purely the viewer. CSS-first / progressive enhancement preferred, lightweight. Mobile-first, German UI, noindex stays. ## Repro Open a card with image(s) on a phone, tap an image → nothing. Expected: full-size view. ## DoD - Tapping any image (gallery / flip carousel / single) opens a full-size lightbox; closes cleanly; works mobile + desktop. - No gesture conflict on the Wendekarte (swipe still changes image, flip still flips). - build/vet/test green; e2e verified on a multi-image card; test data cleaned. Commit references this issue. otto-head merges + deploys to post.msbls.de.
mAi self-assigned this 2026-06-15 20:57:13 +00:00
Author
Collaborator

Fixed & live on https://post.msbls.de

Merged eeee107 (merge 2ee6c11), deployed. Tapping/clicking any card image now opens a full-size lightbox overlay — works on the gallery layout, the flip-card carousel, and single-image cards. Close via backdrop tap / X / Esc. Mobile + desktop. Render-only (postcard.html + style.css), no schema change.

Gesture split preserved on the Wendekarte: tap opens the lightbox, horizontal swipe still changes the carousel image, the flip button still flips — no conflict.

Verified live: created a 2-image gallery card, rendered HTML carries the lightbox markup, HTTP 200. Test data cleaned. Not closing — m closes.

## ✅ Fixed & live on https://post.msbls.de Merged `eeee107` (merge `2ee6c11`), deployed. Tapping/clicking any card image now opens a full-size lightbox overlay — works on the gallery layout, the flip-card carousel, and single-image cards. Close via backdrop tap / X / Esc. Mobile + desktop. Render-only (postcard.html + style.css), no schema change. Gesture split preserved on the Wendekarte: tap opens the lightbox, horizontal swipe still changes the carousel image, the flip button still flips — no conflict. Verified live: created a 2-image gallery card, rendered HTML carries the lightbox markup, HTTP 200. Test data cleaned. Not closing — m closes.
Author
Collaborator

Resolved — full-size image lightbox shipped and live on post.msbls.de / sendmy.cards. Commit: eeee107d81 (e2e-verified, 21/21 checks; backdrop/×/Esc/swipe-down close, Wendekarte gesture conflict resolved). Closing per m's instruction.

Resolved — full-size image lightbox shipped and live on post.msbls.de / sendmy.cards. Commit: https://mgit.msbls.de/m/postcards/commit/eeee107d8116fb5e24e06558cf1c514cde5bf2f6 (e2e-verified, 21/21 checks; backdrop/×/Esc/swipe-down close, Wendekarte gesture conflict resolved). Closing per m's instruction.
mAi closed this issue 2026-06-19 09:10:03 +00:00
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/postcards#6
No description provided.