Updated margin for flex and added proper click for dropdown

Author: catchspider2002

src/components/LangSelect.svelte

@@ -24,6 +24,8 @@
   function toggle(e) {
     e.stopPropagation();
     let menu = this.nextSibling;
+    // let menu = document.getElementById('langMenu')
+    document.getElementById('shopMenu').style.display = "none";
 
     while (menu && menu.nodeType != 1) {
       menu = menu.nextSibling;
@@ -79,7 +81,7 @@
       <polyline points="6 9 12 15 18 9" />
     </svg>
   </button>
-  <ul class="menuItems p-0">
+  <ul id="langMenu" class="menuItems p-0">
     {#each languageList as lang}
       <li>
         <a class="px-4 py-3 {lang.name === languageName ? 'selectedLang' : ''}" href={lang.link}>{lang.name}</a>

src/components/Nav.svelte

@@ -13,7 +13,7 @@
   let visible = true;
   let bellCount = "0";
 
-  let starsCount = 219;
+  let starsCount = 222;
 
   // const dispatch = createEventDispatcher();
 

src/components/ShopSelect.svelte

@@ -1,24 +1,22 @@
 <script>
-  import { langStore } from "../routes/stores.js";
   import lang from "../routes/_lang.js";
   let strings = lang.strings;
   let toClose = false;
 
-  let language = $langStore || "en";
-  let languageList = [
-    { id: "en", name: "Accessories", link: "pattern-accessories" },
-    { id: "de", name: "Home & Living", link: "pattern-home-living" },
-    { id: "fr", name: "Phone Cases", link: "pattern-phone-cases" },
-    { id: "it", name: "Stationery & Office", link: "pattern-stationery-office" },
-    { id: "es", name: "Stickers & Skins", link: "pattern-stickers-skins" },
-    { id: "pl", name: "Wall Art", link: "pattern-wall-art" },
+  let shopList = [
+    { name: "Accessories", link: "pattern-accessories" },
+    { name: "Home & Living", link: "pattern-home-living" },
+    { name: "Phone Cases", link: "pattern-phone-cases" },
+    { name: "Stationery & Office", link: "pattern-stationery-office" },
+    { name: "Stickers & Skins", link: "pattern-stickers-skins" },
+    { name: "Wall Art", link: "pattern-wall-art" },
   ];
 
-  const languageName = languageList.find(({ id }) => id === language).name;
-
   function toggle(e) {
     e.stopPropagation();
     let menu = this.nextSibling;
+    // let menu = document.getElementById('shopMenu')
+    document.getElementById('langMenu').style.display = "none";
 
     while (menu && menu.nodeType != 1) {
       menu = menu.nextSibling;
@@ -77,12 +75,9 @@
       <polyline points="6 9 12 15 18 9" />
     </svg>
   </button>
-  <ul class="menuItems p-0">
-    {#each languageList as lang}
-      <li>
-        <!-- <a class="px-4 py-3 {lang.name === languageName ? 'selectedLang' : ''}" href={lang.link}>{lang.name}</a> -->
-        <a class="px-4 py-3" href={lang.link}>{lang.name}</a>
-      </li>
+  <ul id="shopMenu" class="menuItems p-0">
+    {#each shopList as shop}
+      <li><a class="px-4 py-3" href={shop.link}>{shop.name}</a></li>
     {/each}
   </ul>
 </div>
@@ -130,14 +125,9 @@
     background-clip: padding-box;
     border-radius: var(--border-radius);
     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
-    /* --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --tw-ring-offset-shadow: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */
-    /* padding: 0; */
   }
   .menuItems a {
     text-decoration: none;
-    /* padding: 0; */
   }
   .menuItems li a {
     color: var(--gray-300);

src/css/global.css

@@ -392,6 +392,9 @@ button:active {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-4 {
+  gap: 1rem;
+}
 .gap-6 {
   gap: 1.5rem;
 }
@@ -416,7 +419,7 @@ button:active {
 .uppercase {
   text-transform: uppercase;
 }
-.tracking-wider{
+.tracking-wider {
   letter-spacing: 0.05em;
 }
 .container {
@@ -884,9 +887,9 @@ button.bellIcon:active {
 }
 
 .alert {
-	background: var(--shop-gradient);
-	background-size: 400% 400%;
-	animation: gradient 15s ease infinite;
+  background: var(--shop-gradient);
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
   margin: 0 auto;
   place-content: center;
   display: flex;
@@ -911,6 +914,7 @@ button.bellIcon:active {
   border: 0.125em solid var(--gray-text);
   color: var(--gray-text);
   padding: 0.375rem 0.75rem;
+  margin: 0.3em;
 }
 .shop-button:hover {
   border: 0.125em solid var(--secondary-text-color);
@@ -923,11 +927,15 @@ button.bellIcon:active {
   background-color: var(--pattern-bg);
   border-radius: var(--border-radius);
 }
+
+.innerShop span {
+  color: var(--accent-text);
+}
 .shop-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.6em;
-  margin-top: 16px;
+  margin: -0.3em;
+  padding: 0.6em 0 0.3em;
 }
 
 /* Scrollbar */

src/routes/index.svelte

@@ -373,7 +373,7 @@
   <div class="container flex mx-auto pb-20 pt-2">
     <div class="alert">
       <div class="innerShop">
-    <span class="text-sm uppercase font-semibold tracking-wider">Shop Product Range</span>
+        <span class="text-sm uppercase font-semibold tracking-wider">Shop Product Range</span>
     <div class="shop-buttons">
     <a class="shop-button" href="pattern-accessories">{strings["accessories"]}</a>
     <a class="shop-button" href="pattern-home-living">{strings["home-living"]}</a>
@@ -382,7 +382,7 @@
     <a class="shop-button" href="pattern-stickers-skins">{strings["stickers-skins"]}</a>
     <a class="shop-button" href="pattern-wall-art">{strings["wall-art"]}</a>
   </div></div></div></div>
-  
+
   <h1>{@html strings.heading}</h1>
   <div class="stats">
     {#each stats as stat}

src/routes/pattern-accessories.svelte

@@ -28,7 +28,6 @@
 
   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
   data.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
-  // data.sort((a, b) => a.creation_date.localeCompare(b.creation_date));
 
   let selection = data[0].category_id;
 
@@ -43,8 +42,7 @@
     };
   });
   const uniqCategories = [...new Map(categories.map((item) => [item["category_id"], item])).values()];
-  // uniqCategories.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
-
+  
   $: selectedUnique = uniqCategories.filter((category) => category.category_id === selection);
 </script>
 
@@ -143,12 +141,12 @@
   .radio-toolbar {
     box-sizing: border-box;
     width: 100%;
-    /* max-width: 1536px; */
+    margin: -0.5rem;
     margin-left: auto;
     margin-right: auto;
     display: grid;
     grid-template-columns: repeat(2, minmax(0px, 1fr));
-    gap: 1rem;
+    /* gap: 1rem; */
     padding: 1rem;
   }
   img,
@@ -222,6 +220,7 @@
     gap: 0.25em;
     grid-auto-flow: column;
     padding: 0.35rem 0.6rem;
+    margin: 0.5rem;
     place-items: center;
     font-size: 1rem;
     background-color: var(--gray-bg);

src/routes/pattern-home-living.svelte

@@ -28,7 +28,6 @@
 
   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
   data.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
-  // data.sort((a, b) => a.creation_date.localeCompare(b.creation_date));
 
   let selection = data[0].category_id;
 
@@ -43,7 +42,6 @@
     };
   });
   const uniqCategories = [...new Map(categories.map((item) => [item["category_id"], item])).values()];
-  // uniqCategories.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
 
   $: selectedUnique = uniqCategories.filter((category) => category.category_id === selection);
 </script>
@@ -143,12 +141,12 @@
   .radio-toolbar {
     box-sizing: border-box;
     width: 100%;
-    /* max-width: 1536px; */
+    margin: -0.5rem;
     margin-left: auto;
     margin-right: auto;
     display: grid;
     grid-template-columns: repeat(2, minmax(0px, 1fr));
-    gap: 1rem;
+    /* gap: 1rem; */
     padding: 1rem;
   }
   img,
@@ -222,6 +220,7 @@
     gap: 0.25em;
     grid-auto-flow: column;
     padding: 0.35rem 0.6rem;
+    margin: 0.5rem;
     place-items: center;
     font-size: 1rem;
     background-color: var(--gray-bg);

src/routes/pattern-phone-cases.svelte

@@ -28,7 +28,6 @@
 
   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
   data.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
-  // data.sort((a, b) => a.creation_date.localeCompare(b.creation_date));
 
   let selection = data[0].category_id;
 
@@ -43,7 +42,6 @@
     };
   });
   const uniqCategories = [...new Map(categories.map((item) => [item["category_id"], item])).values()];
-  // uniqCategories.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
 
   $: selectedUnique = uniqCategories.filter((category) => category.category_id === selection);
 </script>
@@ -143,12 +141,12 @@
   .radio-toolbar {
     box-sizing: border-box;
     width: 100%;
-    /* max-width: 1536px; */
+    margin: -0.5rem;
     margin-left: auto;
     margin-right: auto;
     display: grid;
     grid-template-columns: repeat(2, minmax(0px, 1fr));
-    gap: 1rem;
+    /* gap: 1rem; */
     padding: 1rem;
   }
   img,
@@ -222,6 +220,7 @@
     gap: 0.25em;
     grid-auto-flow: column;
     padding: 0.35rem 0.6rem;
+    margin: 0.5rem;
     place-items: center;
     font-size: 1rem;
     background-color: var(--gray-bg);

src/routes/pattern-stationery-office.svelte

@@ -28,7 +28,6 @@
 
   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
   data.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
-  // data.sort((a, b) => a.creation_date.localeCompare(b.creation_date));
 
   let selection = data[0].category_id;
 
@@ -43,7 +42,6 @@
     };
   });
   const uniqCategories = [...new Map(categories.map((item) => [item["category_id"], item])).values()];
-  // uniqCategories.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
 
   $: selectedUnique = uniqCategories.filter((category) => category.category_id === selection);
 </script>
@@ -143,12 +141,12 @@
   .radio-toolbar {
     box-sizing: border-box;
     width: 100%;
-    /* max-width: 1536px; */
+    margin: -0.5rem;
     margin-left: auto;
     margin-right: auto;
     display: grid;
     grid-template-columns: repeat(2, minmax(0px, 1fr));
-    gap: 1rem;
+    /* gap: 1rem; */
     padding: 1rem;
   }
   img,
@@ -222,6 +220,7 @@
     gap: 0.25em;
     grid-auto-flow: column;
     padding: 0.35rem 0.6rem;
+    margin: 0.5rem;
     place-items: center;
     font-size: 1rem;
     background-color: var(--gray-bg);

src/routes/pattern-stickers-skins.svelte

@@ -28,7 +28,6 @@
 
   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
   data.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
-  // data.sort((a, b) => a.creation_date.localeCompare(b.creation_date));
 
   let selection = data[0].category_id;
 
@@ -43,7 +42,6 @@
     };
   });
   const uniqCategories = [...new Map(categories.map((item) => [item["category_id"], item])).values()];
-  // uniqCategories.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
 
   $: selectedUnique = uniqCategories.filter((category) => category.category_id === selection);
 </script>
@@ -143,12 +141,12 @@
   .radio-toolbar {
     box-sizing: border-box;
     width: 100%;
-    /* max-width: 1536px; */
+    margin: -0.5rem;
     margin-left: auto;
     margin-right: auto;
     display: grid;
     grid-template-columns: repeat(2, minmax(0px, 1fr));
-    gap: 1rem;
+    /* gap: 1rem; */
     padding: 1rem;
   }
   img,
@@ -222,6 +220,7 @@
     gap: 0.25em;
     grid-auto-flow: column;
     padding: 0.35rem 0.6rem;
+    margin: 0.5rem;
     place-items: center;
     font-size: 1rem;
     background-color: var(--gray-bg);