Display brands in homepage products

openfoodfacts · Nov 20, 2023 · 990106c · 990106c
1 parent e62bed9
commit 990106c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/lib/api/product.ts b/src/lib/api/product.ts
@@ -108,7 +108,10 @@ export type Product = {
 	nutriments: Nutriments;
 };
 
-export type ProductReduced = Pick<Product, 'image_front_small_url' | 'code' | 'product_name'>;
+export type ProductReduced = Pick<
+	Product,
+	'image_front_small_url' | 'code' | 'product_name' | 'brands'
+>;
 export async function getProduct(
 	barcode: string,
 	fetch: (url: string) => Promise<Response>
@@ -132,7 +135,7 @@ export async function getProductReducedForCard(
 		PRODUCT_URL(barcode) +
 		'?' +
 		new URLSearchParams({
-			fields: 'image_front_small_url,code,product_name',
+			fields: 'image_front_small_url,code,product_name,brands',
 			lc: get(preferences).lang
 		});
 	const res = await wrapFetch(fetch)(url);

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -37,7 +37,7 @@
 					</button>
 				</div>
 
-				<a class="btn btn-secondary ms-4 px-5" href="/qr" title="Scan a barcode">
+				<a class="btn btn-secondary ms-4 px-5 text-lg" href="/qr" title="Scan a barcode">
 					<span class="icon-[mdi--camera]"></span>
 				</a>
 			</div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -18,7 +18,10 @@
 				Explorer!
 			</h3>
 
-			<p>OpenFoodFacts Explorer is a tool to explore the OpenFoodFacts database.</p>
+			<p>
+				<strong>OpenFoodFacts Explorer</strong>
+				is a tool to explore the OpenFoodFacts database.
+			</p>
 			<p>
 				You can enter a product code in the search bar above to get started or click on one of the
 				products below.
@@ -28,15 +31,15 @@
 
 	<div class="mt-8 w-full">
 		{#await data.streamed.products}
-			<div class="flex justify-center">
-				<span class="loading loading-ring loading-lg mx-auto" />
+			<div class="mt-10 flex justify-center">
+				<span class="loading loading-dots loading-lg mx-auto" />
 			</div>
 		{:then products}
 			<div class="grid grid-cols-4 gap-4">
 				{#each products as state}
 					<a
 						href={`/products/${state.product.code}`}
-						class="btn btn-ghost pointer-events-none h-auto justify-normal p-2 text-start"
+						class="btn btn-ghost pointer-events-none h-auto justify-normal bg-white p-4 text-start text-primary shadow-md dark:bg-base-300"
 						class:pointer-events-none={$navigating}
 					>
 						<div class="flex flex-row items-center">
@@ -51,9 +54,14 @@
 									/>
 								{/if}
 							</div>
-							<p>
-								{state.product.product_name ?? state.product.code}
-							</p>
+							<div>
+								<p class="text-lg">
+									{state.product.product_name ?? state.product.code}
+								</p>
+								<p class="mt-2 text-sm font-light">
+									{state.product.brands}
+								</p>
+							</div>
 						</div>
 					</a>
 				{/each}