style: 💄 mobile landing

jaskaransarkaria · Feb 4, 2022 · 43a220b · 43a220b
1 parent 927d8b7
commit 43a220b
Show file tree

Hide file tree

Showing 12 changed files with 368 additions and 44 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-02-01T21:44:36.651Z',
+  started: '2022-02-04T16:18:29.095Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Tue Feb 01 2022 21:44:39 GMT+0000 (Greenwich Mean Time)
+ * File generated Fri Feb 04 2022 16:18:31 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2022-02-01T21:44:39.667Z';
+export const __timestamp = '2022-02-04T16:18:31.644Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,9 @@
 
     <link rel='icon' type='image/png' href='/favicon.png'>
     <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1643751876649.css'>
+    <link rel='stylesheet' href='/build/bundle-1643991509093.css'>
 
-    <script defer src='/build/bundle-1643751876649.js'></script>
+    <script defer src='/build/bundle-1643991509093.js'></script>
   </head>
   <body>
   </body>

diff --git a/public/mobile_about_us.png b/public/mobile_about_us.png
diff --git a/public/mobile_classes.png b/public/mobile_classes.png
diff --git a/public/mobile_contact_us.png b/public/mobile_contact_us.png
diff --git a/public/mobile_contact_us.svg b/public/mobile_contact_us.svg
diff --git a/public/mobile_jewellery_classes.png b/public/mobile_jewellery_classes.png
diff --git a/public/mobile_jewellery_services.png b/public/mobile_jewellery_services.png
diff --git a/public/mobile_online_shop.png b/public/mobile_online_shop.png
diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -31,6 +31,36 @@
     () => (isBasketPage = window.location.pathname === '/shop/basket')
   );
 
+  function clickOutside(
+    node: HTMLElement,
+    { enabled: initialEnabled, cb }: { enabled: boolean; cb: () => void }
+  ) {
+    const handleOutsideClick: (this: Window, ev: MouseEvent) => void = ({
+      target,
+    }: {
+      target: HTMLElement;
+    }) => {
+      if (!node.contains(target)) {
+        cb();
+      }
+    };
+
+    function update({ enabled }: { enabled: boolean }) {
+      if (enabled) {
+        window.addEventListener('click', handleOutsideClick);
+      } else {
+        window.removeEventListener('click', handleOutsideClick);
+      }
+    }
+
+    update({ enabled: initialEnabled });
+    return {
+      update,
+      destroy() {
+        window.removeEventListener('click', handleOutsideClick);
+      },
+    };
+  }
   function handleClick() {
     if (!showSearch) {
       left.set(-offset);
@@ -106,6 +136,7 @@
       alt="search"
       style={move($left)}
       on:click={handleClick}
+      use:clickOutside={{ enabled: showSearch, cb: handleClick }}
     />
     {#if showSearch}
       <div class="search-bar" style={grow($growSearch, $searchLeft)}>

diff --git a/src/pages/index.svelte b/src/pages/index.svelte
@@ -11,57 +11,93 @@
   $: repairsAndCommissionsHover = false;
   $: classesHover = false;
   $: contactHover = false;
+  $: isMobile = outerWidth <= 450 ? true : false;
 </script>
 
 <svelte:window bind:outerWidth />
-<figure>
+<figure class={isMobile ? 'mobile-container' : 'container'}>
   <img
-    class="inside-shop"
+    class={isMobile ? 'parrallax-inside-shop' : 'inside-shop'}
     src={`http://enki.imgix.net/inside-enki${
       outerWidth <= 450 ? '-mobile' : '-no-signs'
     }.png?${outerWidth <= 450 ? 'fit=crop' : 'format=auto'}&w=${outerWidth}`}
     alt="welcome to the shop, this ilustration shows the shopkeeper behind her bench"
   />
-  <img
-    class="repairs-and-comms"
-    src={repairsAndCommissionsHover
-      ? '/jewellery_services.gif'
-      : '/jewellery_services.png'}
-    alt="repair and commissions button hover over me"
-    on:mouseenter={() => (repairsAndCommissionsHover = true)}
-    on:mouseleave={() => (repairsAndCommissionsHover = false)}
-    on:click={$goto('/services')}
-  />
-  <img
-    class="classes"
-    src={classesHover ? '/classes.gif' : '/classes.png'}
-    alt="classes button hover over me"
-    on:mouseenter={() => (classesHover = true)}
-    on:mouseleave={() => (classesHover = false)}
-    on:click={$goto('/classes')}
-  />
-  <img
-    class="online-shop"
-    src={`https://enki.imgix.net/${
-      onlineShopHover ? 'online_shop.gif' : 'online-shop.png'
-    }`}
-    alt="online shop button hover over me"
-    on:mouseenter={() => (onlineShopHover = true)}
-    on:mouseleave={() => (onlineShopHover = false)}
-    on:click={$goto('/shop')}
-  />
-  <img
-    class="contact"
-    src={contactHover ? '/contact.gif' : '/contact.png'}
-    alt="online shop button hover over me"
-    on:mouseenter={() => (contactHover = true)}
-    on:mouseleave={() => (contactHover = false)}
-    on:click={$goto('/contact')}
-  />
+  {#if isMobile}
+    <div class="mobile-button-container">
+      <img
+        class="mobile-online-shop"
+        src="/mobile_online_shop.png"
+        alt="online shop button"
+        on:click={$goto('/shop')}
+      />
+      <img
+        class="mobile-repairs-and-comms"
+        src="/mobile_jewellery_services.png"
+        alt="jewellery services button"
+        on:click={$goto('/services')}
+      />
+      <img
+        class="mobile-classes"
+        src="/mobile_jewellery_classes.png"
+        alt="classes button"
+        on:click={$goto('/classes')}
+      />
+      <img
+        class="mobile-contact-us"
+        src="/mobile_contact_us.png"
+        alt="contact us button"
+        on:click={$goto('/contact')}
+      />
+      <img
+        class="mobile-about-us"
+        src="/mobile_about_us.png"
+        alt="about us button"
+        on:click={$goto('/about')}
+      />
+    </div>
+  {:else}
+    <img
+      class="repairs-and-comms"
+      src={repairsAndCommissionsHover
+        ? '/jewellery_services.gif'
+        : '/jewellery_services.png'}
+      alt="repair and commissions button hover over me"
+      on:mouseenter={() => (repairsAndCommissionsHover = true)}
+      on:mouseleave={() => (repairsAndCommissionsHover = false)}
+      on:click={$goto('/services')}
+    />
+    <img
+      class="classes"
+      src={classesHover ? '/classes.gif' : '/classes.png'}
+      alt="classes button hover over me"
+      on:mouseenter={() => (classesHover = true)}
+      on:mouseleave={() => (classesHover = false)}
+      on:click={$goto('/classes')}
+    />
+    <img
+      class="online-shop"
+      src={`https://enki.imgix.net/${
+        onlineShopHover ? 'online_shop.gif' : 'online-shop.png'
+      }`}
+      alt="online shop button hover over me"
+      on:mouseenter={() => (onlineShopHover = true)}
+      on:mouseleave={() => (onlineShopHover = false)}
+      on:click={$goto('/shop')}
+    />
+    <img
+      class="contact"
+      src={contactHover ? '/contact.gif' : '/contact.png'}
+      alt="online shop button hover over me"
+      on:mouseenter={() => (contactHover = true)}
+      on:mouseleave={() => (contactHover = false)}
+      on:click={$goto('/contact')}
+    />
+  {/if}
 </figure>
 
 <style>
-  figure {
+  .container {
     display: grid;
     grid-template-columns: repeat(100, 1fr);
     grid-template-rows: repeat(100, 1fr);
@@ -70,13 +106,39 @@
     margin-right: 0;
   }
 
+  .mobile-container {
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .mobile-button-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 175vh;
+    width: 100vw;
+  }
+
+  .mobile-button-container > * {
+    width: 80%;
+    align-self: center;
+    padding: 10px;
+  }
+
   .inside-shop {
     grid-column-start: 1;
     grid-column-end: span end;
     grid-row-start: 1;
     grid-row-end: span end;
   }
 
+  .parrallax-inside-shop {
+    position: fixed;
+  }
+
   .contact,
   .classes,
   .repairs-and-comms,