96 lines
4.3 KiB
Markdown
96 lines
4.3 KiB
Markdown
# F-068 — Implementer evidence
|
|
|
|
## Scope delivered
|
|
|
|
F-067 had replaced `aspect-[5/7] max-h-72` with `w-full max-h-72`. The
|
|
container filled the card width but the height was only bounded by
|
|
`max-h`, so all cards ended up roughly the same height as `max-h-72`
|
|
(288 px) regardless of the source image aspect — they looked "flat".
|
|
The product description was still rendered as plain text via
|
|
`{product.description}`, so any HTML markup that the admin now types
|
|
into the WYSIWYG editor (F-064) shows up as literal tags.
|
|
|
|
## Change
|
|
|
|
Both defects share one fix: a stable square aspect ratio for the
|
|
listing cards and a `prose` HTML renderer for the description.
|
|
|
|
`project/frontend/src/app/products/page.tsx`,
|
|
`project/frontend/src/app/brands/[slug]/page.tsx`,
|
|
`project/frontend/src/app/search/page.tsx`,
|
|
`project/frontend/src/app/categories/[slug]/page.tsx`,
|
|
`project/frontend/src/components/home/FeaturedProducts.tsx`
|
|
|
|
```diff
|
|
- <div className="relative w-full max-h-72 bg-white flex items-center justify-center overflow-hidden">
|
|
+ <div className="relative aspect-square w-full bg-white flex items-center justify-center overflow-hidden">
|
|
{product.images?.[0] ? (
|
|
<Image … fill className="object-contain" … />
|
|
) : (
|
|
<span className="text-5xl">🌿</span>
|
|
)}
|
|
</div>
|
|
- <p className="text-gray-500 text-xs mt-1 line-clamp-2">{product.description}</p>
|
|
+ {product.description && (
|
|
+ <div
|
|
+ className="text-gray-500 text-xs mt-1 line-clamp-2 prose prose-xs max-w-none"
|
|
+ dangerouslySetInnerHTML={{ __html: product.description }}
|
|
+ />
|
|
+ )}
|
|
```
|
|
|
|
The container now enforces `aspect-square` so the card height always
|
|
equals the card width (square cards in the 4-col grid). The image
|
|
keeps `object-contain`, so non-square sources still display without
|
|
distortion — they're letterboxed inside a square.
|
|
|
|
The description is rendered via `dangerouslySetInnerHTML` so HTML tags
|
|
typed into the WYSIWYG editor (F-062 / F-064) are interpreted on the
|
|
listing cards. `prose prose-xs` adds the small-typography Tailwind
|
|
prose styles (paragraph spacing, list bullets, bold/italic) without
|
|
needing extra CSS.
|
|
|
|
## Acceptance traceability
|
|
|
|
| Acceptance criterion | How it is met |
|
|
| -------------------- | ------------- |
|
|
| Each listing card has a 1:1 aspect ratio and the image fits inside without distortion | `aspect-square w-full` enforces a square; `object-contain` keeps the visual inside without cropping. |
|
|
| Product description renders HTML tags on listing cards | `dangerouslySetInnerHTML` on the description; `prose prose-xs` styles the inline HTML. |
|
|
| Existing products without HTML still display | Plain text descriptions render unchanged through `dangerouslySetInnerHTML` (text nodes only). |
|
|
| `verify.sh` is green | Exit 0. |
|
|
|
|
## Manual verification
|
|
|
|
```
|
|
$ curl -X PATCH /api/products/13a65dc0-… \
|
|
-d '{"description":"<p>Proteína <strong>ecológica</strong> de alta calidad.</p><ul><li>Vegana</li><li>Sin gluten</li></ul>"}'
|
|
{ … description: "<p>Proteína <strong>ecológica</strong> … </ul>" … }
|
|
|
|
$ curl http://192.168.18.93:3003/products | grep -oE 'prose[^"]*"[^>]*>[^<]*'
|
|
prose prose-xs max-w-none">Aceite de Oliva Virgen Extra Bio…
|
|
prose prose-xs max-w-none">Almendras Crudas Ecologicas…
|
|
… (one per card)
|
|
|
|
# Spot-check the HTML-rendered card
|
|
$ curl … | grep -oE 'Protei.*?</div>' | head -1
|
|
Proteina Guisante Ecologica</h3><div class="text-gray-500 text-xs mt-1 line-clamp-2 prose prose-xs max-w-none"><p>Proteína <strong>ecológica</strong> de alta calidad.</p><ul><li>Vegana</li><li>Sin gluten</li></ul></div>
|
|
```
|
|
|
|
The description was restored to its original plain text after the
|
|
test.
|
|
|
|
## Build verification
|
|
|
|
- `npx tsc --noEmit` (frontend) — exit 0
|
|
- `monolith.sh prod restart frontend` → 200
|
|
- `./scripts/verify.sh` — exit 0
|
|
|
|
## Files touched
|
|
|
|
```
|
|
project/frontend/src/app/products/page.tsx (aspect-square + dangerouslySetInnerHTML)
|
|
project/frontend/src/app/brands/[slug]/page.tsx (aspect-square + dangerouslySetInnerHTML)
|
|
project/frontend/src/app/search/page.tsx (aspect-square + dangerouslySetInnerHTML)
|
|
project/frontend/src/app/categories/[slug]/page.tsx (aspect-square + dangerouslySetInnerHTML)
|
|
project/frontend/src/components/home/FeaturedProducts.tsx (aspect-square + dangerouslySetInnerHTML)
|
|
``` |