Adjust content to fit on small screens

pvdthings · May 16, 2023 · cfd0b06 · cfd0b06
1 parent 1996bc5
commit cfd0b06
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git 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
@@ -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 @@
     };
 </script>
 
+<svelte:window bind:innerWidth />
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="flex flex-col justify-between bg-white rounded-md overflow-hidden brutal hovers-static {hasZeroStock && 'cursor-pointer'}" on:click={onClick}>
     <div class="p-2">
         <img src={thing.image ?? BoxIcon} alt={thing.name} class="w-full aspect-square object-contain rounded" />
         <div class="mt-3">
-            <div class="{fontSize} uppercase font-bold font-sans text-center">{shortenName()}</div>
+            <div class="{fontSize} uppercase font-bold font-sans text-center">{getShortName()}</div>
         </div>
     </div>
     <div class="{backgroundColor} py-1 text-center font-medium border-t border-black">
-        {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}
     </div>
 </div>