From e364c2296414bad90023c249ad3b28fa78c190a7 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Tue, 16 May 2023 09:53:05 -0400 Subject: [PATCH 1/6] Implement new Thing card design --- src/lib/language/translations.ts | 11 +++++--- src/lib/things/Thing.svelte | 48 +++++++++++++++++++++----------- 2 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/lib/language/translations.ts b/src/lib/language/translations.ts index 9b37c76..c28d846 100644 --- a/src/lib/language/translations.ts +++ b/src/lib/language/translations.ts @@ -1,13 +1,14 @@ export default { en: { "Button.Home": "Home", - "Button.Donate": "Donate", "Button.WishList": "Wish List", "Chooser.CategoryPrompt": "Choose a category:", "Input.Search": "Search...", - "Thing.Tags.Available": "Available", "A project by": "A project by", - "No Results": "No Results" + "No Results": "No Results", + "Click to Donate": "Click to Donate", + "Available": "Available", + "Unavailable": "Unavailable" }, es: { "Button.Home": "Inicio", @@ -15,9 +16,11 @@ export default { "Button.WishList": "Donaciones", "Chooser.CategoryPrompt": "Elija una categoría:", "Input.Search": "Buscar...", - "Thing.Tags.Available": "Disponible", "A project by": "Un proyecto de", "No Results": "No hay resultados", + "Click to Donate": "Clic para donar", + "Available": "Disponible", + "Unavailable": "Indisponible", "All": "Todas", "DIY": "Bricolaje", "Media": "Media", diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte index b05ff26..d1daa13 100644 --- a/src/lib/things/Thing.svelte +++ b/src/lib/things/Thing.svelte @@ -1,28 +1,44 @@ -
- - {thing.name} - -
- {thing.name} -
- {#if thing.stock > 0} -
{$t("Thing.Tags.Available")}
- {:else} - {$t("Button.Donate")} - {/if} + +
+
+ {thing.name} +
+
{shortenName()}
+
+ {hasZeroStock + ? $t('Click to Donate') + : noneAvailable + ? $t('Unavailable') + : `${thing.available} / ${thing.stock} ${$t('Available')}`} +
\ No newline at end of file From c109d08f7366931bcacd8e59facea5dc87201933 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Tue, 16 May 2023 09:54:22 -0400 Subject: [PATCH 2/6] Remove Card component --- src/lib/Foundation.svelte | 1 - src/lib/foundation/Card.svelte | 3 --- 2 files changed, 4 deletions(-) delete mode 100644 src/lib/foundation/Card.svelte diff --git a/src/lib/Foundation.svelte b/src/lib/Foundation.svelte index fc6cac9..0b76959 100644 --- a/src/lib/Foundation.svelte +++ b/src/lib/Foundation.svelte @@ -1,6 +1,5 @@
@@ -42,8 +41,5 @@ - - {$t("A project by")} Starboard Co-op -
\ No newline at end of file From 1996bc5d7581d94aeb4e215648736daddfcccbb1 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Tue, 16 May 2023 11:37:35 -0400 Subject: [PATCH 4/6] Use order sent by the API --- src/lib/things/Scroller.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/things/Scroller.svelte b/src/lib/things/Scroller.svelte index 4cb7d7f..e2aad1f 100644 --- a/src/lib/things/Scroller.svelte +++ b/src/lib/things/Scroller.svelte @@ -5,7 +5,6 @@ const style = wrap ? "grid grid-cols-3 md:grid-cols-5 gap-x-4 gap-y-6 place-content-between" : "flex flex-row overflow-auto"; export let things = []; - things = things.sort((a, b) => b.stock - a.stock);
From cfd0b065f87ebc521e0b9920284d6194a6c09da7 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Tue, 16 May 2023 12:48:54 -0400 Subject: [PATCH 5/6] Adjust content to fit on small screens --- src/lib/language/translations.ts | 2 ++ src/lib/things/Thing.svelte | 27 ++++++++++++++++++--------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/lib/language/translations.ts b/src/lib/language/translations.ts index 3cb900c..7660bc8 100644 --- a/src/lib/language/translations.ts +++ b/src/lib/language/translations.ts @@ -5,6 +5,7 @@ export default { "Chooser.CategoryPrompt": "Choose a category:", "Input.Search": "Search...", "No Results": "No Results", + "Donate": "Donate", "Click to Donate": "Click to Donate", "Available": "Available", "Unavailable": "Unavailable" @@ -16,6 +17,7 @@ export default { "Chooser.CategoryPrompt": "Elija una categoría:", "Input.Search": "Buscar...", "No Results": "No hay resultados", + "Donate": "Donar", "Click to Donate": "Clic para donar", "Available": "Disponible", "Unavailable": "Indisponible", diff --git a/src/lib/things/Thing.svelte b/src/lib/things/Thing.svelte index d1daa13..d8390fe 100644 --- a/src/lib/things/Thing.svelte +++ b/src/lib/things/Thing.svelte @@ -4,18 +4,21 @@ export let thing; + let innerWidth = 0; + $: isMobile = innerWidth < 600; + $: fontSize = thing.name.length > 13 || isMobile ? 'text-sm' : 'text-base'; + const donateURL = `https://airtable.com/shrwMSrzvSLpQgQWC?prefill_Description=${encodeURIComponent(thing.name)}`; const hasZeroStock = thing.stock < 1; - const noneAvailable = !hasZeroStock && !thing.available || thing.available < 0; + const noneAvailable = !hasZeroStock && (!thing.available || thing.available < 1); - const fontSize = thing.name.length > 13 ? 'text-sm' : 'text-base'; const backgroundColor = noneAvailable ? 'bg-red-300' : hasZeroStock ? 'bg-yellow-300' : 'bg-green-400'; - const shortenName = () => { + const getShortName = () => { if (thing.name.length < 30) return thing.name; return thing.name.substring(0, 29) + '...'; }; @@ -26,19 +29,25 @@ }; + +
{thing.name}
-
{shortenName()}
+
{getShortName()}
- {hasZeroStock - ? $t('Click to Donate') - : noneAvailable - ? $t('Unavailable') - : `${thing.available} / ${thing.stock} ${$t('Available')}`} + {#if hasZeroStock} + {isMobile ? $t('Donate') : $t('Click to Donate')} + {:else if noneAvailable} + {isMobile ? `${thing.available} / ${thing.stock}` : $t('Unavailable')} + {:else} + {isMobile + ? `${thing.available} / ${thing.stock}` + : `${thing.available} / ${thing.stock} ${$t('Available')}`} + {/if}
\ No newline at end of file From 46cffc7ed1aae64f649270e5bd77564463c1ee75 Mon Sep 17 00:00:00 2001 From: Dillon Fagan Date: Tue, 16 May 2023 14:17:26 -0400 Subject: [PATCH 6/6] Target local API without API_HOST env variable --- src/routes/+page.server.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index c1b8632..3e3f580 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,5 +1,6 @@ export const load = async ({ fetch }) => { - const result = await fetch('https://starboardcoop-things-api.glitch.me/things'); + const host = process.env.API_HOST ?? 'http://localhost:8088'; + const result = await fetch(`${host}/things`); const data = await result.json(); data.things = data.things.filter(thing => thing.categories);