added filter, menu, sub cat treatment

wbraden · Aug 16, 2024 · 891e3c4 · 891e3c4
1 parent 52d8939
commit 891e3c4
Show file tree

Hide file tree

Showing 69 changed files with 1,328 additions and 49 deletions.
diff --git a/Components/carousel.js b/Components/carousel.js
@@ -103,8 +103,9 @@ class CustomCarousel extends HTMLElement {
             },
             breakpoints: {
                 480: { slidesPerView: 3.25, slidesPerGroup: 3.25, freeMode: true },
-                768: { slidesPerView: 5, slidesPerGroup: 5, freeMode: true },
-                1280: { slidesPerView: 5, slidesPerGroup: 5, freeMode: false },
+                768: { slidesPerView: 4, slidesPerGroup: 4, freeMode: true },
+                1024: { slidesPerView: 5, slidesPerGroup: 5, freeMode: true },
+                1280: { slidesPerView: 6, slidesPerGroup: 6, freeMode: false },
                 1440: { slidesPerView: 7, slidesPerGroup: 7, freeMode: false },
                 1880: { slidesPerView: 8, slidesPerGroup: 8, freeMode: false },
             },

diff --git a/Pets.html b/Pets.html
@@ -418,7 +418,7 @@ <h1 class="typography headline xl">Pets</h1>
       header-image="assets/kitty-corner.png"
       headline="Cats"      
       subheadline="Description"
-      data-source="datacats.json"
+      data-source="data/cats.json"
       component-type="product-card"
     >
     </custom-carousel>
@@ -436,18 +436,19 @@ <h1 class="typography headline xl">Pets</h1>
     <script src="Components/carousel.js"></script>
 
     <script>
-      // browse tiles
+      // category browse tiles
       document.addEventListener("DOMContentLoaded", function () {
         var swiper = new Swiper(".wb-swiper-1", {
           slidesPerView: 2.1,
           freeMode: true,
           spaceBetween: 8,
           breakpoints: {
             480: { slidesPerView: 3.25, slidesPerGroup: 3.25 },
-            768: { slidesPerView: 6.25, slidesPerGroup: 6.25 },
-            1280: { slidesPerView: 8, slidesPerGroup: 8 },
-            1440: { slidesPerView: 10, slidesPerGroup: 10 },
-            1880: { slidesPerView: 12, slidesPerGroup: 12 },
+            768: { slidesPerView: 4.25, slidesPerGroup: 4.25 },
+            1024: { slidesPerView: 5, slidesPerGroup: 5 },
+            1280: { slidesPerView: 6, slidesPerGroup: 6 },
+            1440: { slidesPerView: 6, slidesPerGroup: 6 },
+            1880: { slidesPerView: 8, slidesPerGroup: 8 },
           },
           navigation: { nextEl: ".wb-next-1", prevEl: ".wb-prev-1" },
         });
@@ -529,7 +530,7 @@ <h1 class="typography headline xl">Pets</h1>
         var swiper = new Swiper(".wb-swiper-4", {
           slidesPerView: 1.1,
           freeMode: true,
-          spaceBetween: 8,
+          spaceBetween: 8,        
           breakpoints: {
             480: { slidesPerView: 1.1, slidesPerGroup: 1.5 },
             768: { slidesPerView: 2.25, slidesPerGroup: 2.25 },

diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/age-01.png b/assets/age-01.png
diff --git a/assets/age-02.png b/assets/age-02.png
diff --git a/assets/age-03.png b/assets/age-03.png
diff --git a/assets/age-04.png b/assets/age-04.png
diff --git a/assets/age-05.png b/assets/age-05.png
diff --git a/assets/age-06.png b/assets/age-06.png
diff --git a/assets/brand-01.png b/assets/brand-01.png
diff --git a/assets/brand-02.png b/assets/brand-02.png
diff --git a/assets/brand-03.png b/assets/brand-03.png
diff --git a/assets/brand-04.png b/assets/brand-04.png
diff --git a/assets/brand-05.png b/assets/brand-05.png
diff --git a/assets/brand-06.png b/assets/brand-06.png
diff --git a/assets/categories/existing-category-01.png b/assets/categories/existing-category-01.png
diff --git a/assets/categories/existing-category-02.png b/assets/categories/existing-category-02.png
diff --git a/assets/categories/existing-category-03.png b/assets/categories/existing-category-03.png
diff --git a/assets/categories/existing-category-04.png b/assets/categories/existing-category-04.png
diff --git a/assets/categories/existing-category-05.png b/assets/categories/existing-category-05.png
diff --git a/assets/categories/existing-category-06.png b/assets/categories/existing-category-06.png
diff --git a/assets/categories/existing-category-07.png b/assets/categories/existing-category-07.png
diff --git a/assets/categories/existing-category-08.png b/assets/categories/existing-category-08.png
diff --git a/assets/categories/existing-category-09.png b/assets/categories/existing-category-09.png
diff --git a/assets/categories/existing-category-10.png b/assets/categories/existing-category-10.png
diff --git a/assets/categories/existing-category-11.png b/assets/categories/existing-category-11.png
diff --git a/assets/categories/existing-category-12.png b/assets/categories/existing-category-12.png
diff --git a/assets/categories/existing-category-13.png b/assets/categories/existing-category-13.png
diff --git a/assets/categories/existing-category-14.png b/assets/categories/existing-category-14.png
diff --git a/assets/categories/existing-category-15.png b/assets/categories/existing-category-15.png
diff --git a/assets/categories/existing-category-16.png b/assets/categories/existing-category-16.png
diff --git a/assets/categories/existing-category-17.png b/assets/categories/existing-category-17.png
diff --git a/assets/categories/existing-category-18.png b/assets/categories/existing-category-18.png
diff --git a/assets/categories/existing-category-19.png b/assets/categories/existing-category-19.png
diff --git a/assets/categories/existing-category-20.png b/assets/categories/existing-category-20.png
diff --git a/assets/categories/existing-category-21.png b/assets/categories/existing-category-21.png
diff --git a/assets/categories/existing-category-22.png b/assets/categories/existing-category-22.png
diff --git a/assets/categories/existing-category-23.png b/assets/categories/existing-category-23.png
diff --git a/assets/categories/existing-category-24.png b/assets/categories/existing-category-24.png
diff --git a/assets/categories/existing-category-25.png b/assets/categories/existing-category-25.png
diff --git a/assets/categories/existing-category-26.png b/assets/categories/existing-category-26.png
diff --git a/assets/categories/existing-category-27.png b/assets/categories/existing-category-27.png
diff --git a/assets/categories/existing-category-28.png b/assets/categories/existing-category-28.png
diff --git a/assets/categories/existing-category-29.png b/assets/categories/existing-category-29.png
diff --git a/assets/categories/existing-category-30.png b/assets/categories/existing-category-30.png
diff --git a/assets/categories/existing-category-31.png b/assets/categories/existing-category-31.png
diff --git a/assets/categories/existing-category-32.png b/assets/categories/existing-category-32.png
diff --git a/assets/categories/existing-category-33.png b/assets/categories/existing-category-33.png
diff --git a/assets/categories/existing-category-34.png b/assets/categories/existing-category-34.png
diff --git a/assets/categories/existing-category-35.png b/assets/categories/existing-category-35.png
diff --git a/assets/categories/existing-category-36.png b/assets/categories/existing-category-36.png
diff --git a/assets/categories/existing-category-37.png b/assets/categories/existing-category-37.png
diff --git a/assets/categories/existing-category-38.png b/assets/categories/existing-category-38.png
diff --git a/assets/categories/existing-category-39.png b/assets/categories/existing-category-39.png
diff --git a/assets/categories/existing-category-40.png b/assets/categories/existing-category-40.png
diff --git a/assets/categories/existing-category-41.png b/assets/categories/existing-category-41.png
diff --git a/assets/categories/existing-category-42.png b/assets/categories/existing-category-42.png
diff --git a/assets/categories/existing-category-43.png b/assets/categories/existing-category-43.png
diff --git a/assets/categories/existing-category-44.png b/assets/categories/existing-category-44.png
diff --git a/assets/categories/existing-category-45.png b/assets/categories/existing-category-45.png
diff --git a/css/main.css b/css/main.css
@@ -471,6 +471,207 @@ body {
 }
 
 
+/* button */
+a.button {
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  max-width: 22.5rem;
+  width: unset;
+  font-family: EuclidCircular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: 0rem;
+  color: rgb(255, 255, 255);
+  background-color: rgb(37, 18, 58);
+  display: inline-flex;
+  text-align: center;
+  box-sizing: border-box;
+  gap: 0.5rem;
+  transition: color 0.1s ease-in, background-color, border-color;
+  border-width: 0.125rem;
+  border-style: solid;
+  border-image: initial;
+  border-radius: 25rem;
+  padding: 0.875rem 1.875rem;
+  border-color: rgb(37, 18, 58);
+  text-decoration: none;
+}
+a.button.sm {  
+  font-size: 14px;
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  /* align-self: stretch; */
+  border-radius: 400px;
+  border: var(--025, 2px) solid var(--button-color-action-border-primary-default-default, #25123A);
+  background: var(--button-color-action-background-primary-default-default, #25123A);
+}
+
+a.button.sec {
+  background-color: var(--color-background-secondary);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-tertiary);
+}
+
+
+/* Modal Menu */
+.options-menu {
+  display: flex;
+  width: 268px;
+  padding: 16px 8px 8px 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  border-radius: 24px;
+  background: var(--Default-Background-Base-primary, #FFF);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 6px 6px -4px rgba(0, 0, 0, 0.20);
+  position: absolute;
+  transform: translateY(8px);
+  /* display: none; */
+  z-index: 1000;
+}
+
+.options-menu .option {
+  display: flex;
+  width: 100%;
+  padding: 8px 8px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.options-menu .option:hover {
+  background: var(--color-background-secondary, #F6F5F6);
+}
+
+.option .label {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.option .label span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;  
+  flex-shrink: 1;
+}
+
+.options-menu>div {
+  padding: 8px;
+}
+
+.options-menu .options-menu-subheadline {
+  padding: 0 8px;
+  margin-top: 8px;
+}
+
+.options-menu .options-menu-headline {
+  padding: 0 8px;
+  margin-top: 8px;
+}
+
+.options-menu .option .artwork {
+  width: 48px;
+  height: 48px;
+  margin-right: 8px;
+  border: .5px solid rgba(0, 0, 0, .2);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+
+.options-menu .option .artwork img{
+    width: auto;
+    height: 100%;
+    align-self: center;
+}
+
+.option a.hoverBtn {
+  display: none !important;
+}
+
+.option:hover a.hoverBtn {
+  display: block !important;
+}
+
+/* FILTER */
+
+.filter-bar {
+  /* background-color: white; */
+  /* border-bottom: 1px solid #ddd; */
+  padding: 10px 0;
+  position: relative;
+  overflow: hidden; /* Ensure overflow is hidden for the entire bar */
+}
+
+.filter-container {
+  display: flex;
+  flex-wrap: nowrap; /* Allow wrapping */
+  gap: 8px; /* Space between filter buttons */  
+  max-height: 48px; /* Set a max height to match button height */
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 8px;
+ flex-wrap: wrap;
+ overflow: hidden;
+ flex-shrink: 1;
+}
+.filter-button {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  padding: 10px 20px;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  text-align: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.filter-button.hasDropdown {
+  padding-right: 10px;
+  gap:4px;
+}
+
+.filter-button:hover {
+  background-color: #f1f1f1;
+}
+
+.caret-down {
+  margin-left: 5px;
+}
+
+.filter-icon {
+  margin-left: 5px;
+}
+
+.separator {
+  border-left: 1px solid #ddd;
+  height: 20px;
+  align-self: center;
+}
+
+
 /* Box */
 .box {
   background-color: var(--color-background-primary);
@@ -836,7 +1037,7 @@ button {
 }
 
 .link {
-  font-weight: 700;
+  font-weight: 500;
   color: var(--color-action);
   cursor: pointer;
 }
@@ -1218,14 +1419,21 @@ body.theme--neutral {
 
 @media (min-width: 768px) {
   .wrapper[class] {
-    --breakpoint-grid_columns: 5;
+    --breakpoint-grid_columns: 4;
   }
   .navbar-left .logo,
   .navbar-left .location-link {
     display: flex;
   }
 }
 
+
+@media (min-width: 1024px) {
+  .wrapper[class] {
+    --breakpoint-grid_columns: 5;
+  }
+}
+
 @media (min-width: 1280px) {
   .wrapper[class] {
     --breakpoint-grid_columns: 6;
@@ -1293,35 +1501,9 @@ body.theme--neutral {
     display: block;
   }
 }
-a.button {
-  -webkit-box-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  max-width: 22.5rem;
-  width: unset;
-  font-family: EuclidCircular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  letter-spacing: 0rem;
-  color: rgb(255, 255, 255);
-  background-color: rgb(37, 18, 58);
-  display: inline-flex;
-  text-align: center;
-  box-sizing: border-box;
-  gap: 0.5rem;
-  transition: color 0.1s ease-in, background-color, border-color;
-  border-width: 0.125rem;
-  border-style: solid;
-  border-image: initial;
-  border-radius: 25rem;
-  padding: 0.875rem 1.875rem;
-  border-color: rgb(37, 18, 58);
-  text-decoration: none;
-}
+
+
+
 .header-image-slot img {
   max-width: 375px;;
 }