rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(F-059): completed feature

Browse Source
This commit is contained in:
chattie
2026-08-19 15:32:56 +02:00
parent 4cdb5fb487
commit 72ba84456c
32 changed files with 369 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
project/frontend/src/app/products/[slug]/page.tsx
View File

@@ -100,13 +100,16 @@ export default async function ProductPage({ params }: Props) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Image */}
<div>
<div className="relative aspect-square max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-center overflow-hidden">
{/* Detail image: bound the box at max-h 500px and let the image keep
its natural aspect ratio with `object-contain`. Non-square photos
render fully inside the box, never cropped. */}
<div className="relative aspect-[5/7] max-h-[500px] bg-gray-50 rounded-2xl border border-gray-100 flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image
src={product.images[0].url}
alt={product.name}
fill
className="object-cover"
className="object-contain"
priority
sizes="(max-width: 1024px) 100vw, 50vw"
/>

14
project/frontend/src/app/products/page.tsx
View File

@@ -48,9 +48,19 @@ export default async function ProductsPage() {
return (
<Link key={product.id} href={`/products/${product.slug}`} className="group block">
<div className="bg-gray-50 rounded-xl overflow-hidden border border-gray-100 hover:border-[#70ad47] transition-all hover:shadow-md">
<div className="aspect-square relative bg-white flex items-center justify-center">
{/* Image container: bounded box (max 5:7 aspect ratio to match
backend thumbnail sizing). The image preserves its source
aspect ratio via `object-contain`, so non-square images
display without cropping. */}
<div className="relative aspect-[5/7] max-h-72 bg-white flex items-center justify-center overflow-hidden">
{product.images?.[0] ? (
<Image src={product.images[0].url} alt={product.name} fill className="object-cover" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" />
<Image
src={product.images[0].url}
alt={product.name}
fill
className="object-contain"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
/>
) : (
<span className="text-5xl">🌿</span>
)}