Merge pull request #211 from starboardcoop/v0.7

v0.7

src/app.css

@@ -9,17 +9,20 @@
         @apply border-2 border-black rounded-md;
     }
 
+    .hovers-static {
+        box-shadow: 2px 2px 0 #000000;
+        -webkit-box-shadow: 2px 2px 0px 0px #000000;
+    }
+
     .hovers {
         box-shadow: 2px 2px 0 #000000;
         -webkit-box-shadow: 2px 2px 0px 0px #000000;
-        @apply transform duration-200;
     }
 
     .hovers:focus,
     .hovers:hover {
-        box-shadow: 4px 4px 0 #000000;
-        -webkit-box-shadow: 4px 4px 0px 0px #000000;
-        @apply scale-105;
+        box-shadow: 3px 3px 0 #000000;
+        -webkit-box-shadow: 3px 3px 0px 0px #000000;
     }
 }
 

src/lib/Foundation.svelte

@@ -1,7 +1,5 @@
 <script context="module">
     export { default as Button } from "./foundation/Button.svelte";
-    export { default as ButtonTheme } from "./foundation/buttonTheme";
-
     export { default as Card } from "./foundation/Card.svelte";
     export { default as Column } from "./foundation/Column.svelte";
     export { default as Image } from "./foundation/Image.svelte";

src/lib/filters.ts

@@ -1,9 +1,13 @@
-export const filter = (things, { keyword, onlyWishList }) => {
+export const filter = (things, { keyword, onlyWishList, category }) => {
     let filtered = things;
+    if (category)
+        filtered = filtered.filter(thing => thing.categories.includes(category));
     if (keyword.length > 0)
         filtered = filtered.filter(thing => thing.name.toLowerCase().includes(keyword.toLowerCase()));
     if (onlyWishList)
         filtered = filtered.filter(thing => thing.stock < 1);
+    if (!onlyWishList)
+        filtered = filtered.filter(thing => thing.stock !== 0);
 
     return filtered;
 }

src/lib/foundation/Button.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import ButtonTheme from './buttonTheme';
+    import { ButtonSize, ButtonTheme } from './button';
 
     export let text: string = 'Button';
+    export let icon: string = null;
+    export let selectedIcon: string = null;
     export let selected: boolean = false;
     export let theme: ButtonTheme = ButtonTheme.default;
+    export let size: ButtonSize = ButtonSize.normal;
+    export let flat: boolean = false;
+
+    const padding = size === ButtonSize.normal ? 'px-3 py-1' : 'px-2';
 
     const isToggled = (providedTheme: ButtonTheme) => theme === providedTheme && selected;
 
     const dispatch = createEventDispatcher();
 
     const onClick = () => {
-        if (selected) return;
         dispatch('click', `"${text}" Button clicked`);
     }
 </script>
@@ -20,10 +25,16 @@
     on:click={onClick}
     class:default={theme === ButtonTheme.default}
     class:defaultToggled={isToggled(ButtonTheme.default)}
-    class:alert={theme === ButtonTheme.alert}
-    class:alertToggled={isToggled(ButtonTheme.alert)}
-    class="px-3 py-1 rounded brutal hovers font-bold font-display outline-none">
-        {text}
+    class:primary={theme === ButtonTheme.primary}
+    class:primaryToggled={isToggled(ButtonTheme.primary)}
+    class="{padding} rounded brutal {!flat && 'hovers'} font-bold font-display outline-none">
+        {#if icon && !selected}
+            <img class="icon" src={icon} alt={text} />
+        {/if}
+        {#if selectedIcon && selected}
+            <img class="icon" src={selectedIcon} alt={text} />
+        {/if}
+        <slot />
 </button>
 
 <style lang="postcss">
@@ -32,14 +43,18 @@
     }
 
     button.defaultToggled {
-        @apply bg-yellow-400 !important;
+        @apply bg-primary !important;
+    }
+
+    button.primary {
+        @apply bg-primary;
     }
 
-    button.alert {
-        @apply bg-red-100;
+    button.primaryToggled {
+        @apply bg-primary;
     }
 
-    button.alertToggled {
-        @apply bg-red-300 !important;
+    img.icon {
+        @apply inline h-5 w-5 mr-1;
     }
 </style>

src/lib/foundation/Card.svelte

@@ -1,10 +1,9 @@
 <script>
-    export let hovers = true
     export let style = "h-auto w-auto"
 </script>
 
 <div class={style}>
-    <div class:hovers class="h-full bg-white brutal overflow-hidden">
+    <div class="h-full bg-white brutal hovers-static overflow-hidden">
         <slot />
     </div>
 </div>

src/lib/foundation/Chooser.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    export let options = [];
+
+    let chosenOption = options[0];
+    let dropdownHidden = true;
+
+    const dispatch = createEventDispatcher();
+
+    const toggleDropdown = () => {
+        dropdownHidden = !dropdownHidden;
+    }
+
+    const optionChosen = (option) => {
+        chosenOption = option;
+        toggleDropdown();
+        dispatch("chosen", option);
+    }
+</script>
+
+<svelte:window on:click={() => dropdownHidden = true} />
+
+<div class="relative h-11" on:click|stopPropagation={() => {}} on:keypress={() => {}}>
+    <button on:click={toggleDropdown} class="{ dropdownHidden ? 'bg-indigo-100 hover:bg-indigo-50' : 'bg-primary' } px-3 py-1 h-full w-44 rounded brutal hovers font-bold font-display text-left outline-none">
+        <span class="mr-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="inline"><polyline points="6 9 12 15 18 9"></polyline></svg>
+        </span>
+        <span>{chosenOption}</span>
+    </button>
+    <div class:dropdownHidden class="fixed top-0 left-0 w-full h-full overflow-y-scroll md:h-fit md:absolute md:top-14 bg-indigo-50 md:brutal md:hovers-static p-4 md:rounded-md flex flex-col gap-y-4 md:gap-y-2 z-50">
+        <div class="text-xl font-bold md:hidden">Choose a category&colon;</div>
+        {#each options as option}
+            <button on:click={() => optionChosen(option)} class="text-2xl md:text-lg text-left active:underline hover:underline hover:underline-offset-2 hover:decoration-2">{option}</button>
+        {/each}
+    </div>
+</div>
+
+<style lang="postcss">
+    .dropdownHidden {
+        @apply hidden;
+    }
+</style>

src/lib/foundation/Image.svelte

@@ -1,7 +1,9 @@
 <script>
     export let src = "";
     export let alt = "";
-    export let height = "40";
+
+    let className = "";
+    export { className as class };
 </script>
 
-<img {src} {alt} class="w-full h-{height} object-contain" />
+<img {src} {alt} class="object-contain {className}" />

src/lib/foundation/Text.svelte

@@ -41,7 +41,7 @@
     }
     
     div.smallauto {
-        @apply text-xs;
+        @apply text-sm;
         @apply lg:text-lg;
     }
 

src/lib/foundation/button.ts

@@ -0,0 +1,9 @@
+export enum ButtonTheme {
+    default,
+    primary
+}
+
+export enum ButtonSize {
+    normal,
+    small
+}

src/lib/layout/Header.svelte

@@ -1,33 +1,22 @@
-<script>
-    import { Row, Title } from "$lib/Foundation.svelte";
-    
-    export let title = null;
-</script>
-
-<header class="w-full p-4 flex flex-col space-y-8 justify-center bg-long-city bg-center bg-cover border-b-2 border-bg">
+<header class="w-full p-4 flex flex-col space-y-8 justify-center">
     <div class="grid grid-cols-3">
         <div class="flex flex-row justify-start">
             <div>
                 <a href="https://pvdthings.coop" class="flex flex-row items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 lg:w-12 lg:h-12" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                         <polyline points="15 6 9 12 15 18" />
                     </svg>
-                    <div class="text-xl lg:text-2xl font-bold font-display hover:underline">BACK</div>
+                    <div class="text-xl font-bold font-display hover:underline">HOME</div>
                 </a>
             </div>
         </div>
-        <div class="flex flex-row justify-center">
+        <div class="flex flex-row justify-center content-center">
             <a href="https://pvdthings.coop">
-                <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="mt-2 h-14 md:h-20 lg:h-24"/>
+                <img src="/PVD_Things_Logo_White.png" alt="PVD Things" class="h-16 lg:h-20"/>
             </a>
         </div>
         <div class="flex flex-row justify-end"></div>
     </div>
-    <Row center><slot /></Row>
-    {#if title}
-        <Row center><Title bold caps>{title}</Title></Row>
-    {:else}
-        <h1 hidden>PVD Things</h1>
-    {/if}
+    <h1 hidden>PVD Things</h1>
 </header>

src/lib/things/Scroller.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
     import Thing from "./Thing.svelte";
 
+    export let wrap = false;
+    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);
 </script>
 
-<div class="flex flex-row overflow-auto pl-4 py-7 lg:flex-wrap">
+<div class={style}>
     {#each things as thing}
         <Thing {thing} />
     {/each}

src/lib/things/Thing.svelte

@@ -2,18 +2,25 @@
 	import { Card, Image, Text } from "$lib/Foundation.svelte";
 
     export let thing;
+
+    let className = "";
+    export { className as class };
+
+    const donateURL = `https://airtable.com/shrwMSrzvSLpQgQWC?prefill_Description=${encodeURIComponent(thing.name)}`;
 </script>
 
-<div class="pr-3 lg:pr-6 lg:pb-6 flex flex-col">
-    <Card style="h-24 w-24 lg:h-48 lg:w-48">
-        <Image height="full" src={thing.image} alt={thing.name} />
+<div class="flex flex-col {className}">
+    <Card>
+        <Image src={thing.image} alt={thing.name} class="aspect-square" />
     </Card>
-    <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 justify-between flex-grow">
+    <div class="pl-1 pt-2 flex flex-col gap-2 justify-between flex-grow">
         <Text display bold smallauto>{thing.name}</Text>
         <div class="flex flex-col lg:flex-row gap-2">
-            <div class="px-2 py-1 rounded bg-black">
-                <Text body small light>{thing.stock > 0 ? `${thing.stock} in stock` : 'Wish List'}</Text>
-            </div>
+            {#if thing.stock > 0}
+                <div class="px-2 py-1 rounded bg-green-300 w-max font-medium text-sm">Available</div>
+            {:else}
+                <a class="px-2 py-1 rounded brutal hover:hovers-static bg-primary w-max font-bold font-display text-sm" href={donateURL} target="_blank" rel="noreferrer">Donate</a>
+            {/if}
         </div>
     </div>
 </div>

src/lib/things/Things.svelte

@@ -4,22 +4,25 @@
 
     export let things;
     export let categories;
+    export let shownCategory;
 </script>
 
 <div>
   {#key things}
-    {#each categories as category}
-      {@const filteredThings = filterByCategory(things, category)}
-      {#if filteredThings.length > 0}
-        <div>
-          <div
-            class="pl-4 text-4xl lg:text-5xl font-display font-bold text-black"
-          >
-            {category}
+    {#if shownCategory}
+      <Scroller things={filterByCategory(things, shownCategory)} wrap={true} />
+    {:else}
+      {#each categories as category}
+        {@const filteredThings = filterByCategory(things, category)}
+        {#if filteredThings.length > 0}
+          <div>
+            <div class="pl-4 text-4xl lg:text-5xl font-display font-bold text-black">
+              {category}
+            </div>
+            <Scroller things={filteredThings} />
           </div>
-          <Scroller things={filteredThings} />
-        </div>
-      {/if}
-    {/each}
+        {/if}
+      {/each}
+    {/if}
   {/key}
 </div>