From b43042686101ef50677ed3d8f62501b47f6a3a17 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Wed, 17 Jul 2024 15:03:20 +0800
Subject: [PATCH] problem: product and purchase layout is misaligned for
 desktop view

Time spent: 1 hour
---
 src/components/Heading.svelte          | 14 +++++++------
 src/components/ProductCard.svelte      | 27 ++++++++++++++++++++------
 src/components/ProductFomo.svelte      | 22 ++++++++++++---------
 src/components/ProductPurchases.svelte |  1 -
 src/routes/products/+page.svelte       |  8 +++++---
 5 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/components/Heading.svelte b/src/components/Heading.svelte
index df4b85d..a795978 100644
--- a/src/components/Heading.svelte
+++ b/src/components/Heading.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-	export let title: string;
+	export let title: string | undefined;
 </script>
 
-<div class="mb-4 flex items-center">
-	<h1 class="scroll-m-20 text-xl font-semibold tracking-tight md:text-3xl">
-		{title}
-	</h1>
-</div>
+{#if title}
+	<div class="my-4 flex items-center">
+		<h1 class="scroll-m-20 text-xl font-semibold tracking-tight md:text-3xl">
+			{title}
+		</h1>
+	</div>
+{/if}
diff --git a/src/components/ProductCard.svelte b/src/components/ProductCard.svelte
index 91721ec..ff4fca6 100644
--- a/src/components/ProductCard.svelte
+++ b/src/components/ProductCard.svelte
@@ -46,16 +46,31 @@
 </script>
 
 {#if validate(product)}
-	<Card.Root class="m-2 w-[450px]">
+	<Card.Root>
 		<Card.Header>
 			<Card.Title>{product.getMatchingTags('name')[0][1]}</Card.Title>
 			<Card.Description>{product.getMatchingTags('description')[0][1]}</Card.Description>
 		</Card.Header>
-		<img src={product.getMatchingTags('cover')[0][1]} alt="cover" />
-		<Card.Content>
-			<slot />
-		</Card.Content>
-		<Card.Footer class="flex justify-between">
+
+		{#if $$slots.default}
+			<Card.Content>
+				<div class="flex flex-col items-center justify-center gap-2 sm:flex-row">
+					<img
+						src={product.getMatchingTags('cover')[0][1]}
+						alt="cover"
+						class="aspect-square w-[200px] object-cover"
+					/>
+					<slot />
+				</div>
+			</Card.Content>
+		{:else}
+			<img
+				src={product.getMatchingTags('cover')[0][1]}
+				alt="cover"
+				class="aspect-square object-cover"
+			/>
+		{/if}
+		<Card.Footer class="flex justify-between pt-2">
 			{#if !includedInRocket()}
 				<AddProductToRocket {product} {rocket} />
 			{:else}
diff --git a/src/components/ProductFomo.svelte b/src/components/ProductFomo.svelte
index 1e4092e..23c5757 100644
--- a/src/components/ProductFomo.svelte
+++ b/src/components/ProductFomo.svelte
@@ -24,15 +24,19 @@
 <Card.Root class="sm:col-span-3">
 	<Card.Header class="pb-3">
 		<Card.Title>Products and Purchases</Card.Title>
-		<Card.Description class="grid grid-cols-2">
-			{#each $products as product}
-				<div class="grid-cols-1">
-					<ProductCardFromId {rocket} productID={product.ID}>
-						<ProductPurchases {rocket} {product} />
-					</ProductCardFromId>
-				</div>
-			{/each}
-		</Card.Description>
+		<Card.Description></Card.Description>
 	</Card.Header>
+	<Card.Content
+		class="grid gap-2"
+		style="grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 400px), 1fr));"
+	>
+		{#each $products as product}
+			<div>
+				<ProductCardFromId {rocket} productID={product.ID}>
+					<ProductPurchases {rocket} {product} />
+				</ProductCardFromId>
+			</div>
+		{/each}
+	</Card.Content>
 	<Card.Footer></Card.Footer>
 </Card.Root>
diff --git a/src/components/ProductPurchases.svelte b/src/components/ProductPurchases.svelte
index ba1b847..a937dc1 100644
--- a/src/components/ProductPurchases.svelte
+++ b/src/components/ProductPurchases.svelte
@@ -47,7 +47,6 @@
 </script>
 
 {#if $purchases.size > 0}
-	<div class="pt-2 text-lg font-semibold">Purchases</div>
 	<Table.Root>
 		<Table.Header>
 			<Table.Row>
diff --git a/src/routes/products/+page.svelte b/src/routes/products/+page.svelte
index 53c6601..55f0035 100644
--- a/src/routes/products/+page.svelte
+++ b/src/routes/products/+page.svelte
@@ -46,8 +46,10 @@
 {#if productsToRender && $productsToRender}
 	{#each $productsToRender as [r, p]}
 		<Heading title={r.dTag} />
-		{#each p as product}
-			<ProductCard {product} rocket={r} />
-		{/each}
+		<div class="grid gap-2" style="grid-template-columns: repeat(auto-fit, 350px);">
+			{#each p as product}
+				<ProductCard {product} rocket={r} />
+			{/each}
+		</div>
 	{/each}
 {/if}