fix: 🐛 test

jaskaransarkaria · Jan 8, 2022 · 48b06e9 · 48b06e9
1 parent 5c2810c
commit 48b06e9
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 124 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2022-01-07T18:20:58.894Z',
+  started: '2022-01-08T12:40:27.418Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Fri Jan 07 2022 18:21:01 GMT+0000 (Greenwich Mean Time)
+ * File generated Sat Jan 08 2022 12:40:30 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2022-01-07T18:21:01.428Z';
+export const __timestamp = '2022-01-08T12:40:30.211Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -11,9 +11,9 @@
 
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1641579658892.css" />
+    <link rel="stylesheet" href="/build/bundle-1641645627416.css" />
 
-    <script defer src="/build/bundle-1641579658892.js"></script>
+    <script defer src="/build/bundle-1641645627416.js"></script>
   </head>
   <body></body>
 </html>
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -2,7 +2,10 @@
   import { goto } from '@roxi/routify';
   import SearchProducts from '@/components/SearchProducts/SearchProducts.svelte';
   import { tweened } from 'svelte/motion';
-  import { quartInOut } from 'svelte/easing';
+
+  const width = tweened(0, {
+    duration: 500,
+  });
 
   const left = tweened(0, {
     duration: 500,
@@ -17,14 +20,22 @@
   });
 
   function handleClick() {
-    left.set(-1250);
-    searchLeft.set(-1250);
-    //growSearch.set(300)
-    showSearch = !showSearch;
+    if (!showSearch) {
+      left.set(-300);
+      searchLeft.set(-300);
+      width.set(300);
+      showSearch = !showSearch;
+    } else {
+      left.set(0);
+      searchLeft.set(0);
+      width.set(0);
+      setTimeout(() => (showSearch = !showSearch), 500);
+    }
   }
   const move = (x: number) => `transform: translateX(${x}px);`;
   const grow = (width: number, x: number) =>
     `width: ${width}px; transform: translateX(${x}px);`;
+  const growSearchWidth = (width: number) => `width: ${width}px`;
 
   let showSearch = false;
 </script>
@@ -36,11 +47,19 @@
     alt="home"
     on:click={$goto('/')}
   />
+  <img
+    src="https://enki.imgix.net/moving_header.svg?wm=webp&q=90"
+    alt="Enki"
+    loading="eager"
+    class="enki-logo"
+    on:click={$goto('/')}
+  />
+
   <div class="right-container">
-    <button on:click={$goto('/shop')}> shop </button>
-    <button on:click={$goto('/repairs')}> repairs </button>
-    <button on:click={$goto('/classes')}> classes </button>
-    <button on:click={$goto('/about')}> about </button>
+    <button style={move($left)} on:click={$goto('/shop')}> shop </button>
+    <button style={move($left)} on:click={$goto('/repairs')}> repairs </button>
+    <button style={move($left)} on:click={$goto('/classes')}> classes </button>
+    <button style={move($left)} on:click={$goto('/about')}> about </button>
     <img
       class="search-icon"
       src="https://enki.imgix.net/search_icon.svg?q=50"
@@ -50,7 +69,7 @@
     />
     {#if showSearch}
       <div class="search-bar" style={grow($growSearch, $searchLeft)}>
-        <SearchProducts />
+        <SearchProducts width={growSearchWidth($width)} />
       </div>
     {/if}
     <img
@@ -81,19 +100,6 @@
     padding-right: 20px;
   }
 
-  .slide-search {
-    animation-name: slide-search;
-    animation-duration: 1s;
-  }
-
-  @keyframes slide-search {
-    from {
-      transform: scaleX(0%);
-    }
-    to {
-      transform: scaleX(100%);
-    }
-  }
   .right-container * {
     margin-right: 10px;
     align-self: center;
@@ -107,13 +113,21 @@
     width: 45px;
   }
 
+  .enki-logo {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 250px;
+    transform: translateX(-50%);
+  }
+
   button {
     all: unset;
     font-family: 'WelcomeHome3 Regular';
     cursor: pointer;
   }
 
   button:focus {
-    outline: orange 5px auto;
+    border-bottom: 3px solid orange;
   }
 </style>
diff --git a/src/components/Navbar/Navbar.svelte b/src/components/Navbar/Navbar.svelte
diff --git a/src/components/ProductView/ProductView.svelte b/src/components/ProductView/ProductView.svelte
@@ -23,35 +23,26 @@
 </script>
 
 {#if productArr}
-  {#if variantArr.length}
-    {#each groupedVariantProducts as variants (variants)}
-      <div
-        in:fade={{ delay: 500 }}
-        class={showDetailedView ||
-        !calcShowGrid(window.innerWidth, productArr.length)
-          ? 'detailed-products-container'
-          : 'products-container'}
-      >
+  <div
+    in:fade={{ delay: 500 }}
+    class={showDetailedView ||
+    !calcShowGrid(window.innerWidth, productArr.length)
+      ? 'detailed-products-container'
+      : 'products-container'}
+  >
+    {#if variantArr.length}
+      {#each groupedVariantProducts as variants (variants)}
         {#each variants as variant (variant)}
           <SingleProduct product={variant} />
         {/each}
-      </div>
-    {/each}
-  {:else}
-    <div
-      in:fade={{ delay: 500 }}
-      class={showDetailedView ||
-      !calcShowGrid(window.innerWidth, productArr.length)
-        ? 'detailed-products-container'
-        : 'products-container'}
-    >
-      {#if nonVariantArr.length}
-        {#each nonVariantArr as product}
-          <SingleProduct {product} {showDetailedView} />
-        {/each}
-      {/if}
-    </div>
-  {/if}
+      {/each}
+    {/if}
+    {#if nonVariantArr.length}
+      {#each nonVariantArr as product}
+        <SingleProduct {product} {showDetailedView} />
+      {/each}
+    {/if}
+  </div>
 {/if}
 
 <style>

diff --git a/src/components/RootCategories/RootCategories.svelte b/src/components/RootCategories/RootCategories.svelte
@@ -30,21 +30,16 @@
 </script>
 
 <div class="opening-times">
-  <img
-    src="https://enki.imgix.net/moving_header.svg?wm=webp&q=90"
-    alt="Enki"
-    loading="eager"
-  />
-  <h1>online shop</h1>
+  <h1>welcome to the online shop</h1>
 </div>
 
 <HexGrid {data} {categoryFn} />
 
 <style>
   .opening-times {
     position: relative;
-    top: 135px;
-    margin-bottom: 100px;
+    top: 100px;
+    margin-bottom: 80px;
 
     display: block;
     flex-direction: column;

diff --git a/src/components/RootCategories/RootCategories.test.ts b/src/components/RootCategories/RootCategories.test.ts
@@ -14,7 +14,9 @@ describe('GIVEN RootCategories', () => {
     it('THEN display opening times', () => {
       render(RootCategories);
 
-      expect(screen.getByText('online shop')).toBeInTheDocument();
+      expect(
+        screen.getByText('welcome to the online shop')
+      ).toBeInTheDocument();
     });
 
     it('THEN display the loading spinner if no categories are present', () => {

diff --git a/src/components/SearchProducts/SearchProducts.svelte b/src/components/SearchProducts/SearchProducts.svelte
@@ -1,14 +1,15 @@
 <script lang="typescript">
   import { goto } from '@roxi/routify';
-  export let width = 300;
+  export let width: string;
 
   let searchValue = '';
 </script>
 
 <input
   data-testid="search-bar"
+  autofocus
   type="search"
-  style={`width: ${width}px`}
+  style={width}
   bind:value={searchValue}
   on:keydown={(e) => {
     if (e.key === 'Enter') {
@@ -19,3 +20,13 @@
     }
   }}
 />
+
+<style>
+  input {
+    font-family: 'WelcomeHome3 Regular';
+    border: 0;
+    outline: 0;
+    background: transparent;
+    border-bottom: 1px solid black;
+  }
+</style>
diff --git a/src/components/Services/Services.svelte b/src/components/Services/Services.svelte
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
@@ -1,3 +1,8 @@
+<script lang="ts">
+  import Header from '@/components/Header/Header.svelte';
+</script>
+
+<Header />
 <slot scoped={{ name: 'world' }} />
 <h1>footer</h1>
 

diff --git a/src/pages/shop/_layout.svelte b/src/pages/shop/_layout.svelte
@@ -1,8 +1,3 @@
-<script lang="ts">
-  import Header from '@/components/Header/Header.svelte';
-</script>
-
-<Header />
 <br />
 <slot />