Merge pull request #158 from starboardcoop/issue/144

Issue/144
starboardcoop · Apr 27, 2021 · f8e4d75 · f8e4d75
2 parents 5e830c6 + 937ab0c
commit f8e4d75
Show file tree

Hide file tree

Showing 16 changed files with 26 additions and 518 deletions.
diff --git a/functions/auth-code.js b/functions/auth-code.js
diff --git a/functions/auth.js b/functions/auth.js
diff --git a/functions/sign-up.js b/functions/sign-up.js
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
@@ -1,10 +1,9 @@
 <script>
-    export let height = "auto";
-    export let width = "auto";
-    export let hovers = true;
+    export let hovers = true
+    export let style = "h-auto w-auto"
 </script>
 
-<div class={`h-${height} w-${width}`}>
+<div class={style}>
     <div class:hovers class="h-full bg-white brutal overflow-hidden">
         <slot />
     </div>

diff --git a/src/components/Layout.svelte b/src/components/Layout.svelte
@@ -1,3 +1,3 @@
-<main class="bg-indigo-300 flex flex-col min-h-screen w-screen">
+<main class="bg-indigo-300 flex flex-col min-h-screen w-full">
     <slot />
 </main>
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -35,8 +35,8 @@
 </script>
 
 <svelte:window on:click={closeIfOpen} on:keydown={closeOnEsc} />
-<div class="z-40 flex flex-col-reverse md:flex-col md:space-y-4 fixed bottom-4 md:top-4 right-4 items-end">
-    <button on:click={toggle} class:selected={visible} class="h-16 w-16 rounded-full cursor-pointer appearance-none focus:outline-none focus:ring focus:ring-white focus:bg-indigo-100 box-border border-2 border-indigo-200 bg-indigo-200 shadow-lg hover:shadow text-center p-4" bind:this={menuButton} id="menubutton" aria-haspopup="true" aria-controls="main-menu">
+<div class="z-40 flex flex-col-reverse pointer-events-none md:flex-col md:space-y-4 fixed bottom-4 md:top-4 right-4 items-end">
+    <button on:click={toggle} class:selected={visible} class="h-16 w-16 rounded-full cursor-pointer pointer-events-auto appearance-none focus:outline-none focus:ring focus:ring-white bg-indigo-200 shadow-lg hover:shadow text-center p-4" bind:this={menuButton} id="menubutton" aria-haspopup="true" aria-controls="main-menu">
         <span class="sr-only">Menu</span>
         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2 pointer-events-none" viewBox="0 0 24 24" stroke-width="1.7" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
@@ -45,7 +45,7 @@
             <line x1="4" y1="18" x2="20" y2="18" />
         </svg>
     </button>
-    <nav class:visible class="bg-white shadow w-max text-lg overflow-hidden p-4 rounded-lg hidden flex-col space-y-2 mb-4">
+    <nav class:visible class="pointer-events-auto bg-white shadow w-max text-lg overflow-hidden p-4 rounded-lg hidden flex-col space-y-2 mb-4">
         {#each pages as page}
             <a href={page.url} class="hover:underline focus:underline capitalize" role="menuitem">{page.label}</a>
         {/each}

diff --git a/src/components/Scroller.svelte b/src/components/Scroller.svelte
@@ -6,14 +6,14 @@
     export let things = [];
 </script>
 
-<div class="flex flex-row space-x-3 overflow-auto px-8 py-7">
+<div class="flex flex-row overflow-auto pl-4 py-7 lg:flex-wrap">
     {#each things as thing}
-        <div>
-            <Card height="24" width="24">
+        <div class="pr-3 lg:pr-6 lg:pb-6">
+            <Card style="h-24 w-24 lg:h-48 lg:w-48">
                 <Image height="full" src={thing.image} alt={thing.name} />
             </Card>
             <div class="pl-1 pt-2 w-24">
-                <Text bold small>{thing.name}</Text>
+                <Text bold smallauto>{thing.name}</Text>
                 {#if thing.stock > 0}
                     <Text small>{thing.stock} in stock</Text>
                 {/if}

diff --git a/src/components/Subheading.svelte b/src/components/Subheading.svelte
@@ -4,7 +4,7 @@
     export let oversized = false;
     export let color = "inherit";
 
-    let size = oversized ? "text-6xl" : "text-xl";
+    let size = oversized ? "text-6xl" : "text-xl md:text-2xl lg:text-3xl";
 </script>
 
 <h3 class:caps class:center class="{size} font-bold text-{color}">

diff --git a/src/components/Text.svelte b/src/components/Text.svelte
@@ -1,16 +1,18 @@
 <script>
-    export let center = false;
-    export let italic = false;
-    export let bold = false;
-    export let small = false;
-    export let large = false;
-    export let light = false;
+    export let center = false
+    export let italic = false
+    export let bold = false
+    export let small = false
+    export let smallauto = false
+    export let large = false
+    export let light = false
 </script>
 
 <div
     class:center 
     class:italic
     class:small
+    class:smallauto
     class:bold
     class:large 
     class:light 
@@ -31,6 +33,11 @@
     div.small {
         @apply text-xs;
     }
+    
+    div.smallauto {
+        @apply text-xs;
+        @apply lg:text-lg;
+    }
 
     div.large {
         @apply text-2xl;

diff --git a/src/routes/browse.svelte b/src/routes/browse.svelte
@@ -70,7 +70,7 @@
             {#each data.categories as category}
                 <div>
                     <Container>
-                        <Subheading>{category}:</Subheading>
+                        <Subheading>{category}</Subheading>
                     </Container>
                     <Scroller things={filterThings(category)} />
                 </div>

diff --git a/src/routes/home/index.svelte b/src/routes/home/index.svelte