m/postcards
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

BUG (v2): flip-card with multiple images — extra images unreachable #5

New Issue
Closed
opened 2026-06-15 16:41:36 +00:00 by mAi · 2 comments
mAi commented 2026-06-15 16:41:36 +00:00
Collaborator
Copy Link

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

On a Wendekarte (flip layout) with more than one image, only the FIRST image shows on the front. There's an indicator top-right hinting at more images, but it does nothing — the other images can't be viewed. So additional images on a flip card are effectively inaccessible.

m, verbatim: "Und wenn mehrere Bilder sind auf einer Wendekarte... wie sehe ich die? Bisher wird nur das erste angezeigt mit nem Indikator oben rechts für andere... aber zeigt nichts."

Repro

  1. Compose a Wendekarte (flip layout), upload 2+ images.
  2. Open the resulting /c/{token} card on mobile.
  3. Front shows only image 1; the top-right indicator is inert; images 2+ are unreachable.

Expected

All images on a flip card must be viewable. The front should become a swipeable/tappable carousel (top-right dots/indicator should advance through images, or be tappable; swipe to change image), while flip-to-back (text) still works.

Key constraint — gesture conflict: the flip gesture and the image-advance gesture must not collide. Pick the cleanest interaction, e.g. tap-to-flip + swipe-to-change-image, or explicit arrows/dots for images + a distinct flip control. Make it obvious and mobile-friendly.

Scope

Rendering/interaction only (postcard.html + style.css + any minimal JS) — the images already persist correctly (gallery layout shows them all; only flip is broken). No schema change expected.

DoD

  • Flip card with N images: all N reachable on the front; flip-to-text still works; no gesture conflict; mobile-verified.
  • build/vet/test green; e2e verified on a 2+ image flip card; test data cleaned.
  • Commit references #5.
## Bug (live on https://post.msbls.de) On a **Wendekarte (flip layout) with more than one image**, only the FIRST image shows on the front. There's an indicator top-right hinting at more images, but it does nothing — the other images can't be viewed. So additional images on a flip card are effectively inaccessible. m, verbatim: "Und wenn mehrere Bilder sind auf einer Wendekarte... wie sehe ich die? Bisher wird nur das erste angezeigt mit nem Indikator oben rechts für andere... aber zeigt nichts." ## Repro 1. Compose a Wendekarte (flip layout), upload 2+ images. 2. Open the resulting /c/{token} card on mobile. 3. Front shows only image 1; the top-right indicator is inert; images 2+ are unreachable. ## Expected All images on a flip card must be viewable. The front should become a **swipeable/tappable carousel** (top-right dots/indicator should advance through images, or be tappable; swipe to change image), while **flip-to-back (text) still works**. **Key constraint — gesture conflict:** the flip gesture and the image-advance gesture must not collide. Pick the cleanest interaction, e.g. tap-to-flip + swipe-to-change-image, or explicit arrows/dots for images + a distinct flip control. Make it obvious and mobile-friendly. ## Scope Rendering/interaction only (postcard.html + style.css + any minimal JS) — the images already persist correctly (gallery layout shows them all; only flip is broken). No schema change expected. ## DoD - Flip card with N images: all N reachable on the front; flip-to-text still works; no gesture conflict; mobile-verified. - build/vet/test green; e2e verified on a 2+ image flip card; test data cleaned. - Commit references #5.
mAi commented 2026-06-15 16:49:32 +00:00
Author
Collaborator
Copy Link

#5 behoben — Wendekarte mit mehreren Bildern

Die Vorderseite der Wendekarte ist jetzt ein wischbares Karussell (horizontaler scroll-snap, ein Foto pro Ansicht). Alle Bilder sind erreichbar — auch ganz ohne JavaScript per Wischen.

Was geändert wurde (Render/CSS/minimal-JS, kein Schema-Change):

  • Front zeigte bisher nur index 0; jetzt rendert sie alle Bilder als .flip-slide-Karussell.
  • Der inerte Indikator oben rechts ist durch funktionierende Positions-Punkte ersetzt: sie folgen dem Wischen und springen (per Progressive-Enhancement-Script) zum angetippten Bild.
  • Umblättern ist jetzt ein eigener Button (Front: „Umdrehen ↻“, Rückseite: „↻ Zurück zum Bild“) — dadurch kollidieren Wisch-Geste (Bild wechseln) und Flip-Geste nicht mehr.
  • Tote Styles .img-badge / .flip-hint entfernt.
  • 3D-Flip- und No-JS-Stacking-Fallback bleiben erhalten; prefers-reduced-motion weiterhin respektiert.

Verifikation:

  • go build / go vet / go test ./... grün. render_test.go prüft jetzt, dass eine Flip-Karte mit N Bildern N Slides + N Punkte rendert (Regressions-Guard).
  • E2e gegen msupabase (local storage, Prod-Bucket unangetastet): Flip-Karte mit 2 Bildern → 2 Slides, 2 Punkte, Flip-Button vorhanden, beide Bilder auf der Front. Test-Zeile wieder gelöscht (DELETE 1).

Commit: https://mgit.msbls.de/m/postcards/commit/39f048a
Branch: mai/hermes/issue-3-postcards-custom (gemeinsamer Branch mit #3/#4; dieser Commit ist sauber separat und kann einzeln gemerged/deployed werden).

#3 (Custom-URL via Shlink) und #4 (Broadcast-Modus) folgen auf demselben Branch.

## #5 behoben — Wendekarte mit mehreren Bildern Die Vorderseite der Wendekarte ist jetzt ein **wischbares Karussell** (horizontaler scroll-snap, ein Foto pro Ansicht). Alle Bilder sind erreichbar — auch ganz ohne JavaScript per Wischen. **Was geändert wurde (Render/CSS/minimal-JS, kein Schema-Change):** - Front zeigte bisher nur `index 0`; jetzt rendert sie **alle** Bilder als `.flip-slide`-Karussell. - Der inerte Indikator oben rechts ist durch **funktionierende Positions-Punkte** ersetzt: sie folgen dem Wischen und springen (per Progressive-Enhancement-Script) zum angetippten Bild. - **Umblättern ist jetzt ein eigener Button** (Front: „Umdrehen ↻“, Rückseite: „↻ Zurück zum Bild“) — dadurch kollidieren Wisch-Geste (Bild wechseln) und Flip-Geste nicht mehr. - Tote Styles `.img-badge` / `.flip-hint` entfernt. - 3D-Flip- und No-JS-Stacking-Fallback bleiben erhalten; `prefers-reduced-motion` weiterhin respektiert. **Verifikation:** - `go build` / `go vet` / `go test ./...` grün. `render_test.go` prüft jetzt, dass eine Flip-Karte mit N Bildern N Slides + N Punkte rendert (Regressions-Guard). - E2e gegen msupabase (local storage, Prod-Bucket unangetastet): Flip-Karte mit 2 Bildern → 2 Slides, 2 Punkte, Flip-Button vorhanden, beide Bilder auf der Front. Test-Zeile wieder gelöscht (`DELETE 1`). Commit: https://mgit.msbls.de/m/postcards/commit/39f048a Branch: `mai/hermes/issue-3-postcards-custom` (gemeinsamer Branch mit #3/#4; dieser Commit ist sauber separat und kann einzeln gemerged/deployed werden). #3 (Custom-URL via Shlink) und #4 (Broadcast-Modus) folgen auf demselben Branch.
mAi commented 2026-06-15 17:02:47 +00:00
Author
Collaborator
Copy Link

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

Merged 39f048a (in merge 408b276), deployed via application.deploy. The flip-card front is now a swipeable scroll-snap carousel with functional position dots, and flipping moved to a distinct button — so swipe (change image) and flip (to text) no longer conflict. Works without JS via swipe; dots are progressively enhanced.

Verified live: flip card with 2 images → multiple carousel slides + dots present, all images reachable, HTTP 200. Test data cleaned. Not closing — m closes.

## ✅ Fixed & live on https://post.msbls.de Merged `39f048a` (in merge `408b276`), deployed via `application.deploy`. The flip-card front is now a swipeable scroll-snap carousel with functional position dots, and flipping moved to a distinct button — so swipe (change image) and flip (to text) no longer conflict. Works without JS via swipe; dots are progressively enhanced. Verified live: flip card with 2 images → multiple carousel slides + dots present, all images reachable, HTTP 200. Test data cleaned. Not closing — m closes.
mAi closed this issue 2026-06-23 15:48:02 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/postcards#5
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?