From 71804ed32a8b6bdcbb228ac1e608d42c8816d1c4 Mon Sep 17 00:00:00 2001
From: zazawowow <zazawowow@icloud.com>
Date: Fri, 24 Jan 2025 14:35:09 +0000
Subject: [PATCH] refactor: fixing margins across the different pages that
 implement item-grid so they are more consistent

---
 .../lib/components/common/item-grid.svelte    | 18 +++++----
 packages/app/src/routes/+page.svelte          |  2 +
 .../routes/category/[category]/+page.svelte   |  2 +-
 .../community/[...stallId]/+page.svelte       | 18 +++++----
 packages/app/src/routes/p/[id]/+page.svelte   | 38 ++++++++++---------
 .../products/[...productId]/+page.svelte      | 21 +++++-----
 6 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/packages/app/src/lib/components/common/item-grid.svelte b/packages/app/src/lib/components/common/item-grid.svelte
index 2eb28c93..4530ff46 100644
--- a/packages/app/src/lib/components/common/item-grid.svelte
+++ b/packages/app/src/lib/components/common/item-grid.svelte
@@ -20,7 +20,7 @@
 </script>
 
 {#if forItemType === 'product'}
-	<div class="m-8">
+	<div class="my-8 mx-4">
 		{#if title}
 			<div class="flex flex-col md:flex-row justify-between items-center">
 				<h2>{title}</h2>
@@ -45,12 +45,16 @@
 		</div>
 	</div>
 {:else if forItemType === 'stall'}
-	<div class="my-16 mx-4">
-		{#if title}
-			<h2>{title}</h2>
-		{/if}
-		<div class="grid grid-cols-1 gap-8 md:gap-16 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-			<slot />
+	<div class="my-8">
+		<div class="mx-4">
+			{#if title}
+				<div class="my-8">
+					<h2>{title}</h2>
+				</div>
+			{/if}
+			<div class="grid grid-cols-1 gap-8 md:gap-16 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+				<slot />
+			</div>
 		</div>
 	</div>
 {/if}
diff --git a/packages/app/src/routes/+page.svelte b/packages/app/src/routes/+page.svelte
index 2bcc2b4d..a8e6f97a 100644
--- a/packages/app/src/routes/+page.svelte
+++ b/packages/app/src/routes/+page.svelte
@@ -33,6 +33,7 @@
 				<div>
 					<CatMenu />
 				</div>
+			<div class="my-8 mx-4">
 				{#if $featuredProductsQuery.data?.products?.length}
 					<ItemGrid title="Featured">
 						{#each $featuredProductsQuery.data?.products as item (item.id)}
@@ -56,6 +57,7 @@
 						</div>
 					</div>
 				{/if}
+			</div>	
 			</div>
 		</main>
 	</div>
diff --git a/packages/app/src/routes/category/[category]/+page.svelte b/packages/app/src/routes/category/[category]/+page.svelte
index f90935a9..07c928dc 100644
--- a/packages/app/src/routes/category/[category]/+page.svelte
+++ b/packages/app/src/routes/category/[category]/+page.svelte
@@ -29,7 +29,7 @@
 </Hero>
 <CatMenu />
 <div class="flex min-h-screen w-full flex-col">
-	<div class="flex flex-col gap-2 relative">
+	<div class="flex flex-col gap-2 relative mx-4">
 		{#if $productsQuery.data?.products}
 			<ItemGrid title="Products">
 				{#each $productsQuery?.data.products as product}
diff --git a/packages/app/src/routes/community/[...stallId]/+page.svelte b/packages/app/src/routes/community/[...stallId]/+page.svelte
index 18524141..7539dea8 100644
--- a/packages/app/src/routes/community/[...stallId]/+page.svelte
+++ b/packages/app/src/routes/community/[...stallId]/+page.svelte
@@ -178,7 +178,7 @@
 			</div>
 
 			{#if isMyStall}
-				<div class="flex flex-row gap-2">
+				<div class="flex flex-row gap-2 mx-8">
 					<Button variant="primary" class="mt-4 w-fit" on:click={() => openDrawerForStall(stall.id)}>Edit stall</Button>
 					<Button variant="primary" class="mt-4 w-fit" on:click={() => openDrawerForNewProductForStall(stall.id)}>Add product</Button>
 				</div>
@@ -192,13 +192,15 @@
 
 	{#if $productsQuery.data?.products.length}
 		{@const { products } = $productsQuery.data}
-		<ItemGrid title="Products" withSort={false} on:sortSelectedChange={(e) => onSortSelectedChange(e.detail.value)}>
-			{#if products.length}
-				{#each products as item (item.id)}
-					<ProductItem product={item} />
-				{/each}
-			{/if}
-		</ItemGrid>
+		<div class="mx-4">
+			<ItemGrid title="Products" withSort={false} on:sortSelectedChange={(e) => onSortSelectedChange(e.detail.value)}>
+				{#if products.length}
+					{#each products as item (item.id)}
+						<ProductItem product={item} />
+					{/each}
+				{/if}
+			</ItemGrid>
+		</div>
 	{:else if $productsQuery.isSuccess && !$productsQuery.data}
 		<div class="my-16 mx-8">
 			<h3>No products found</h3>
diff --git a/packages/app/src/routes/p/[id]/+page.svelte b/packages/app/src/routes/p/[id]/+page.svelte
index a395bc7d..2808cc2c 100644
--- a/packages/app/src/routes/p/[id]/+page.svelte
+++ b/packages/app/src/routes/p/[id]/+page.svelte
@@ -155,25 +155,27 @@
 						</div>
 					</div>
 				{/if}
-				{#if stallsMixture.length}
-					<ItemGrid title="Shops">
-						{#key stallsMixture}
-							{#each stallsMixture as item (item.id)}
-								<StallItem stallData={item} />
-							{/each}
-						{/key}
-					</ItemGrid>
-				{/if}
+				<div class="mx-4">
+					{#if stallsMixture.length}
+						<ItemGrid title="Shops">
+							{#key stallsMixture}
+								{#each stallsMixture as item (item.id)}
+									<StallItem stallData={item} />
+								{/each}
+							{/key}
+						</ItemGrid>
+					{/if}
 
-				{#if productsMixture.length}
-					<ItemGrid title="Products">
-						{#key stallsMixture}
-							{#each productsMixture as item (item.id)}
-								<ProductItem product={item} />
-							{/each}
-						{/key}
-					</ItemGrid>
-				{/if}
+					{#if productsMixture.length}
+						<ItemGrid title="Products">
+							{#key stallsMixture}
+								{#each productsMixture as item (item.id)}
+									<ProductItem product={item} />
+								{/each}
+							{/key}
+						</ItemGrid>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/packages/app/src/routes/products/[...productId]/+page.svelte b/packages/app/src/routes/products/[...productId]/+page.svelte
index 39196e14..cc0b59db 100644
--- a/packages/app/src/routes/products/[...productId]/+page.svelte
+++ b/packages/app/src/routes/products/[...productId]/+page.svelte
@@ -287,14 +287,15 @@
 			</div>
 		{/if}
 	{/if}
-
-	{#if $otherProducts?.data?.products.length}
-		<ItemGrid title="More from {$userProfileQuery?.data?.name}">
-			{#key $otherProducts.data.products}
-				{#each $otherProducts?.data?.products as item}
-					<ProductItem product={item} />
-				{/each}
-			{/key}
-		</ItemGrid>
-	{/if}
+	<div class="mx-4">
+		{#if $otherProducts?.data?.products.length}
+			<ItemGrid title="More from {$userProfileQuery?.data?.name}">
+				{#key $otherProducts.data.products}
+					{#each $otherProducts?.data?.products as item}
+						<ProductItem product={item} />
+					{/each}
+				{/key}
+			</ItemGrid>
+		{/if}
+	</div>
 {/if}