Skip to content

Commit

Permalink
Fix formatting with prettier tailwindcss + style fixes to product page
Browse files Browse the repository at this point in the history
  • Loading branch information
@VaiTon
VaiTon committed Nov 20, 2023
1 parent 918e0fc commit c8fc5dd
Show file tree
Hide file tree
Showing 7 changed files with 180 additions and 94 deletions.
2 changes: 1 addition & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"postcss": "^8.4.31",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.1.0",
"prettier-plugin-tailwindcss": "^0.5.7",
"svelte": "^4.2.3",
"svelte-check": "^3.6.0",
"svelte-local-storage-store": "^0.6.4",
Expand Down
59 changes: 59 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 9 additions & 6 deletions src/lib/knowledgepanels/KnowledgePanel.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let allPanels: Record<string, KnowledgePanel>;
export let panel: KnowledgePanel | null;
export let id: string;
export let link: string;
let expanded = panel?.expanded ?? false;
</script>
Expand All @@ -16,7 +17,10 @@
<div class="alert alert-warning">Panel is null</div>
{:else if panel.type === 'card'}
<Card>
<h2 class="text-4xl font-bold my-3">{panel.title_element.title}</h2>
<div class="flex items-center">
<h2 class="my-3 flex-grow text-4xl font-bold">{panel.title_element.title}</h2>
<a class="link" href={link}>Go back</a>
</div>

<Elements elements={panel.elements} {allPanels} />
</Card>
Expand All @@ -34,26 +38,25 @@
class:pl-2={expanded}
>
<summary
class="dark:hover:bg-base-100 hover:bg-base-200 w-full rounded-lg p-2 my-2 cursor-pointer flex items-center select-none"
class="my-2 flex w-full cursor-pointer select-none items-center rounded-lg p-2 hover:bg-base-200 dark:hover:bg-base-100"
>
{#if panel.title_element != null}
{#if panel.title_element.icon_url != null}
{#if panel.title_element.type === 'grade'}
<img
class="h-12 mr-4"
class="mr-4 h-12"
src={panel.title_element.icon_url}
alt={panel.title_element.title}
/>
{:else}
<img
class="w-8 h-8 rounded-full mr-4 dark:invert"

class="mr-4 h-8 w-8 rounded-full dark:invert"
src={panel.title_element.icon_url}
alt={panel.title_element.title}
/>
{/if}
{/if}
<span class="text-xl grow">
<span class="grow text-xl">
{panel.title_element.title}
</span>
{/if}
Expand Down
30 changes: 21 additions & 9 deletions src/lib/knowledgepanels/KnowledgePanels.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,32 @@
export let knowledgePanels: Record<string, KnowledgePanel>;
$: arr = Object.entries(knowledgePanels);
const summaryId = 'knowledge-panels';
</script>

<div class="btn-group justify-center">
{#each arr as [panelKey, panel]}
{#if panel.type === 'card'}
<a href={'#' + panelKey} class="btn">
{panel.title_element.title}
</a>
{/if}
{/each}
<div class="">
<div class="absolute ms-5 max-w-max rounded-xl bg-secondary px-4 text-secondary-content">
Summary
</div>

<div class="mt-3 border-b-2 border-dashed border-secondary"></div>

<div class="my-4 flex justify-center gap-4" id={summaryId}>
{#each arr as [panelKey, panel]}
{#if panel.type === 'card'}
<a class="btn btn-secondary text-lg" href={'#' + panelKey}>
{panel.title_element.title}
</a>
{/if}
{/each}
</div>

<div class="border-b-2 border-dashed border-secondary"></div>
</div>

{#each arr as [id, panel]}
{#if panel.type === 'card'}
<Panel {panel} allPanels={knowledgePanels} {id} />
<Panel {panel} allPanels={knowledgePanels} {id} link={'#' + summaryId} />
{/if}
{/each}
37 changes: 24 additions & 13 deletions src/routes/+page.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
import { getProductReducedForCard, type ProductReduced, type ProductStateFound } from '$lib/api';
import {
getProductReducedForCard,
type ProductReduced,
type ProductState,
type ProductStateFound
} from '$lib/api';
import type { PageLoad } from './$types';

async function productsWithQuestions(fetch: typeof window.fetch) {
const res = await fetch('https://robotoff.openfoodfacts.org/api/v1/questions?count=10');
const questions = (await res.json()) as {
status: string;
questions: {
barcode: string;
}[];
count: number;
};
type QuestionsResponse = {
status: string;
questions: {
barcode: string;
}[];
count: number;
};

async function productsWithQuestions(
fetch: typeof window.fetch
): Promise<ProductState<ProductReduced>[]> {
const res: QuestionsResponse = await fetch(
'https://robotoff.openfoodfacts.org/api/v1/questions?count=10'
).then((it) => it.json());

const products = await Promise.all(
questions.questions.map((question) => getProductReducedForCard(question.barcode, fetch))
const productsPromises = res.questions.map((question) =>
getProductReducedForCard(question.barcode, fetch)
);
return products;

return Promise.all(productsPromises);
}

export const load = (async ({ fetch }) => {
Expand Down
130 changes: 65 additions & 65 deletions src/routes/products/[barcode]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,98 +16,98 @@
</script>

<Card>
<div class="md:flex max-md:text-center gap-2 max-md:mb-4">
<h1 class="font-bold text-3xl md:text-4xl my-4 grow">
<div class="items-center gap-2 max-md:mb-4 max-md:text-center md:flex">
<h1 class="my-4 grow text-3xl font-bold md:text-4xl">
{product.product_name ?? product.code}
</h1>

<a
href={'https://world.openfoodfacts.org/product/' + product.code}
target="_blank"
rel="noopener noreferrer"
class="btn max-sm:btn-sm btn-secondary ml-auto"
class="link me-4"
>
See on OpenFoodFacts
</a>
<a href={`/products/${product.code}/edit`} class="btn max-sm:btn-sm btn-secondary ml-auto">

<a href={`/products/${product.code}/edit`} class="btn btn-secondary ml-auto max-sm:btn-sm">
Edit
</a>
</div>

<div class="flex gap-4">
<div class="flex-grow">
<div class="grid grid-cols-[max-content,1fr] gap-x-4 gap-y-1">
<span class="font-bold text-end">Quantity:</span>
<span>{product.quantity}</span>
<div class="grid w-3/4 grid-cols-[max-content,1fr] gap-x-4 gap-y-1">
<span class="text-end font-bold">Quantity:</span>
<span>{product.quantity}</span>

<span class="font-bold text-end">Brands:</span>
<span>
{#await data.taxo.brands}
Loading...
{:then brands}
{#each product.brands_tags as tag, i}
{#if i > 0},
{/if}
{brands[tag] != null ? getOrDefault(brands[tag].name, lang) : tag}
{/each}
{/await}
</span>
<span class="text-end font-bold">Brands:</span>
<span>
{#await data.taxo.brands}
Loading...
{:then brands}
{#each product.brands_tags as tag, i}
{#if i > 0},
{/if}
{brands[tag] != null ? getOrDefault(brands[tag].name, lang) : tag}
{/each}
{/await}
</span>

<span class="font-bold text-end">Categories:</span>
<span>
{#await data.taxo.categories}
Loading...
{:then categories}
{#each product.categories_tags as tag, i}
{#if i > 0},
{/if}
<a class="link" href={'/taxo/categories/' + tag}
>{categories[tag] != null ? getOrDefault(categories[tag].name, lang) : tag}</a
>
{/each}
{/await}
</span>
<span class="text-end font-bold">Categories:</span>
<span>
{#await data.taxo.categories}
Loading...
{:then categories}
{#each product.categories_tags as tag, i}
{#if i > 0},
{/if}
<a class="link" href={'/taxo/categories/' + tag}
>{categories[tag] != null ? getOrDefault(categories[tag].name, lang) : tag}</a
>
{/each}
{/await}
</span>

<span class="font-bold text-end">Stores:</span>
<span>
{#await data.taxo.stores}
Loading...
{:then stores}
{#each product.stores_tags as tag, i}
{#if i > 0},
{/if}
{stores[tag] != null ? getOrDefault(stores[tag].name, lang) : tag}
{/each}
{/await}
</span>
<span class="text-end font-bold">Stores:</span>
<span>
{#await data.taxo.stores}
Loading...
{:then stores}
{#each product.stores_tags as tag, i}
{#if i > 0},
{/if}
{stores[tag] != null ? getOrDefault(stores[tag].name, lang) : tag}
{/each}
{/await}
</span>

<span class="font-bold text-end">Labels:</span>
<span>
{#await data.taxo.labels}
Loading...
{:then labels}
{#each product.labels_tags as tag, i}
{#if i > 0},
{/if}
<a class="link" href={'/taxo/labels/' + tag}
>{labels[tag] != null ? getOrDefault(labels[tag].name, lang) : tag}</a
>
{/each}
{/await}
</span>
</div>
<span class="text-end font-bold">Labels:</span>
<span>
{#await data.taxo.labels}
Loading...
{:then labels}
{#each product.labels_tags as tag, i}
{#if i > 0},
{/if}
<a class="link" href={'/taxo/labels/' + tag}>
{labels[tag] != null ? getOrDefault(labels[tag].name, lang) : tag}
</a>
{/each}
{/await}
</span>
</div>
<div>

<div class="flex flex-grow justify-center">
<img
src={product.image_front_url}
alt={product.product_name}
class="w-32 float-right rounded-lg"
class="float-right w-32 rounded-lg"
/>
</div>
</div>
</Card>

<div class="p-3 w-full flex gap-4 justify-evenly">
<div class="flex w-full justify-evenly gap-4 p-3">
<NutriScore grade={product.nutriscore_grade} />
<Nova grade={product.nova_group} />
<EcoScore grade={product.ecoscore_grade} />
Expand All @@ -116,7 +116,7 @@
<KnowledgePanels knowledgePanels={product.knowledge_panels} />

<Card>
<h1 class="text-4xl my-4 font-bold">
<h1 class="my-4 text-4xl font-bold">
Folksonomy Engine <span class="font-light italic">(alpha)</span>
</h1>

Expand Down

0 comments on commit c8fc5dd

Please sign in to comment.