feat: 🎸 search on comp vertical scroll

jaskaransarkaria · Nov 3, 2021 · a161abc · a161abc
1 parent 0afa4e1
commit a161abc
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 22 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: '2021-11-03T08:59:12.927Z',
+  started: '2021-11-03T13:32:18.705Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Wed Nov 03 2021 08:59:15 GMT+0000 (Greenwich Mean Time)
+ * File generated Wed Nov 03 2021 13:32:22 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-11-03T08:59:15.928Z';
+export const __timestamp = '2021-11-03T13:32:22.826Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta
-      name="description"
-      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
-    />
-    <title>Enki</title>
 
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1635929952925.css" />
-
-    <script defer src="/build/bundle-1635929952925.js"></script>
-  </head>
-  <body></body>
-</html>
+            <!DOCTYPE html>
+            <html lang="en">
+              <head>
+              <meta charset='utf-8'>
+              <meta name='viewport' content='width=device-width,initial-scale=1'>
+                <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
+                <title>Enki</title>
+
+                <link rel='icon' type='image/png' href='/favicon.png'>
+                <link rel='stylesheet' href='/global.css'>
+                <link rel='stylesheet' href='/build/bundle-1635946338703.css'>
+
+                <script defer src='/build/bundle-1635946338703.js'></script>
+              </head>
+              <body>
+              </body>
+            </html>
diff --git a/src/components/SearchProducts/SearchProducts.svelte b/src/components/SearchProducts/SearchProducts.svelte
@@ -79,6 +79,7 @@
     </div>
     <button
       class="close-search"
+      transition:fade|local
       on:click={() => {
         showSearchView = false;
         searchValue = '';
@@ -101,7 +102,6 @@
     display: grid;
     grid-gap: 16px;
     padding: 16px;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-auto-flow: column;
     overflow-x: auto;
   }
@@ -113,4 +113,12 @@
     background: none;
     cursor: pointer;
   }
+
+  @media (min-width: 960px) {
+    .matches-container {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-auto-flow: row;
+      overflow-x: none;
+    }
+  }
 </style>