💄 Better UI for e-shop

src/lib/components/Picture.svelte

@@ -17,3 +17,15 @@
 		on:load
 	/>
 {/if}
+
+<style>
+	img.hover-zoom {
+		transition: 400ms;
+
+		transform: scale(1);
+	}
+
+	img:hover.hover-zoom {
+		transform: scale(1.2);
+	}
+</style>

src/routes/tissus-et-finitions/+page.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Container from '$lib/components/Container.svelte';
+	import Picture from '$lib/components/Picture.svelte';
+	import Masonry from '$lib/components/Masonry.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const pictures = data.pictures.map((p) => ({ ...p, loaded: false }));
+</script>
+
+<Container class="my-4">
+	<h1 class="text-4xl text-oxford mb-3">Tissus et finitions</h1>
+	<Masonry>
+		{#each pictures as picture}
+			<a
+				href="/photos/raw/{picture.storage[0]._id}"
+				class="relative picture-link"
+				data-title={picture.name}
+			>
+				<Picture
+					minStorage={1}
+					{picture}
+					class="max-w-full {picture.loaded ? 'loaded' : ''}"
+					loading="lazy"
+				/>
+			</a>
+		{/each}
+	</Masonry>
+</Container>
+
+<style>
+	.picture-link {
+		overflow: hidden;
+	}
+
+	.picture-link::after {
+		position: absolute;
+		content: attr(data-title);
+		text-align: center;
+		left: 0;
+		right: 0;
+		bottom: 1rem;
+		color: white;
+		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+		font-size: 2rem;
+		opacity: 0.4;
+		transition-duration: 400ms;
+	}
+
+	:global(.picture-link img) {
+		transition-duration: 400ms;
+		transform: scale(0);
+	}
+
+	:global(.picture-link img.loaded) {
+		transform: scale(1);
+	}
+
+	:global(.picture-link:hover img.loaded) {
+		transform: scale(1.2);
+	}
+
+	.picture-link:hover::after {
+		opacity: 1;
+	}
+</style>

src/routes/vente/+page.svelte

@@ -34,9 +34,17 @@
 	<Masonry>
 		{#each published as product}
 			<a href="/vente/{product._id}" class="product">
-				<Picture picture={product.photos[0]} minStorage={1} class="picture mx-auto" />
-				<span class="name">{product.name}</span>
-				<span class="price text-right">{product.price} €</span>
+				<div class="overflow-hidden">
+					<Picture
+						picture={product.photos[0]}
+						minStorage={1}
+						class="picture mx-auto max-w-full hover-zoom"
+					/>
+				</div>
+				<div class="flex">
+					<span class="name">{product.name}</span>
+					<span class="price ml-auto">{product.price} €</span>
+				</div>
 			</a>
 		{/each}
 		<!-- In case there is only one product. We don't want a product to take full row in desktop mode -->
@@ -48,28 +56,18 @@
 	.product {
 		display: grid;
 		gap: 0.5rem;
-		grid-template-columns: 1fr auto;
 		grid-template-rows: auto auto;
-		grid-template-areas:
-			'picture picture'
-			'name price';
 	}
 
-	:global(.product > .picture) {
-		grid-area: picture;
+	:global(.product .picture) {
 		max-height: 24rem;
-		max-width: 100%;
+		width: 100%;
+		object-fit: cover;
 	}
 
-	.product > .name {
-		grid-area: name;
-
+	.product .name {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
-
-	.product > .price {
-		grid-area: price;
-	}
 </style>