fix: add MinIO jersey images to jersey ordering page cards #238

Closed

forgejo_admin wants to merge 1 commit from hotfix-jersey-image-urls into main

forgejo_admin commented

2026-04-09 05:02:10 +00:00

Contributor

Summary

Jersey ordering cards ((app)/jersey/+page.svelte) displayed no product images. This adds division-aware jersey images from MinIO to the reversible and warmup option cards so players can see what they are ordering.

Changes

src/routes/(app)/jersey/+page.svelte -- Added <img> elements inside the reversible and jersey_warmup card bodies, using the existing division state to select girls (Queens) or boys (Kings) images from MinIO

Test Plan

Open jersey page as a girls-division player: reversible card shows queens-home.jpeg, warmup card shows queens-away.jpeg
Open jersey page as a boys-division player: reversible card shows kings-home.jpeg, warmup card shows kings-warmup.jpeg
Opt-out card should show no image
If division is null (no player info loaded), no images render (graceful fallback)

Review Checklist

Images use MinIO URLs, not relative playground paths
Division ternary matches existing pattern (girls=Queens, boys=Kings)
Lazy loading attribute set on images
Alt text is descriptive and division-aware
No images rendered when division is null (opt-out and fallback safe)

None.

Closes #236

## Summary Jersey ordering cards (`(app)/jersey/+page.svelte`) displayed no product images. This adds division-aware jersey images from MinIO to the reversible and warmup option cards so players can see what they are ordering. ## Changes - `src/routes/(app)/jersey/+page.svelte` -- Added `<img>` elements inside the reversible and jersey_warmup card bodies, using the existing `division` state to select girls (Queens) or boys (Kings) images from MinIO ## Test Plan - Open jersey page as a girls-division player: reversible card shows `queens-home.jpeg`, warmup card shows `queens-away.jpeg` - Open jersey page as a boys-division player: reversible card shows `kings-home.jpeg`, warmup card shows `kings-warmup.jpeg` - Opt-out card should show no image - If division is null (no player info loaded), no images render (graceful fallback) ## Review Checklist - [x] Images use MinIO URLs, not relative playground paths - [x] Division ternary matches existing pattern (girls=Queens, boys=Kings) - [x] Lazy loading attribute set on images - [x] Alt text is descriptive and division-aware - [x] No images rendered when division is null (opt-out and fallback safe) ## Related Notes None. ## Related Closes #236

forgejo_admin added 1 commit

2026-04-09 05:02:10 +00:00

fix: add MinIO jersey images to jersey ordering page cards

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

0b42a4cafe

Jersey cards showed no product images. Add division-aware images from
MinIO for the reversible and warmup options so players see what they
are ordering.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-04-09 05:03:22 +00:00

Author

Contributor

QA Review -- PR #238

Diff Summary

1 file changed, 19 additions, 0 deletions
Adds division-aware <img> elements to the reversible and jersey_warmup cards in (app)/jersey/+page.svelte

Findings

Correctness: PASS

Division guard (&& division) prevents rendering when player info hasn't loaded
Ternary division === 'girls' matches existing codebase pattern
MinIO URLs use the same domain as the gear page (minio-api.tail5b443a.ts.net)
Image filenames match spec: queens-home/kings-home for reversible, queens-away/kings-warmup for warmup
Opt-out card correctly excluded (only reversible and jersey_warmup keys matched)

Accessibility: PASS

Alt text is descriptive and division-aware
loading="lazy" appropriate for card images

Nit: Missing CSS for jersey-card-img class

The class jersey-card-img is applied to both <img> elements but has no CSS definition anywhere in the codebase (not in app.css, not in a <style> block)
Images will render at their natural size, which could overflow the card layout on mobile
Recommend adding basic sizing (e.g., width: 100%; border-radius: var(--radius-md);) either in app.css or as a scoped <style> block
Non-blocking: images will display correctly at reasonable source sizes, just without explicit constraints

VERDICT: APPROVED with nit

The nit (missing jersey-card-img CSS) is cosmetic and non-blocking. The core fix -- replacing broken/missing image paths with valid MinIO URLs -- is correct and safe to merge.

## QA Review -- PR #238 ### Diff Summary - 1 file changed, 19 additions, 0 deletions - Adds division-aware `<img>` elements to the reversible and jersey_warmup cards in `(app)/jersey/+page.svelte` ### Findings **Correctness: PASS** - Division guard (`&& division`) prevents rendering when player info hasn't loaded - Ternary `division === 'girls'` matches existing codebase pattern - MinIO URLs use the same domain as the gear page (`minio-api.tail5b443a.ts.net`) - Image filenames match spec: queens-home/kings-home for reversible, queens-away/kings-warmup for warmup - Opt-out card correctly excluded (only `reversible` and `jersey_warmup` keys matched) **Accessibility: PASS** - Alt text is descriptive and division-aware - `loading="lazy"` appropriate for card images **Nit: Missing CSS for `jersey-card-img` class** - The class `jersey-card-img` is applied to both `<img>` elements but has no CSS definition anywhere in the codebase (not in `app.css`, not in a `<style>` block) - Images will render at their natural size, which could overflow the card layout on mobile - Recommend adding basic sizing (e.g., `width: 100%; border-radius: var(--radius-md);`) either in `app.css` or as a scoped `<style>` block - Non-blocking: images will display correctly at reasonable source sizes, just without explicit constraints ### VERDICT: APPROVED with nit The nit (missing `jersey-card-img` CSS) is cosmetic and non-blocking. The core fix -- replacing broken/missing image paths with valid MinIO URLs -- is correct and safe to merge.