extra filters demo

Robertw8 · Aug 17, 2023 · 062ab34 · 062ab34
1 parent b3ebcbe
commit 062ab34
Show file tree

Hide file tree

Showing 4 changed files with 283 additions and 3 deletions.
diff --git a/src/js/search-filter.js b/src/js/search-filter.js
@@ -0,0 +1,9 @@
+const filtersList = document.querySelector('.extra-filters-list');
+
+const onFilterItemClick = e => {
+  const item = e.target.closest('.extra-filters-item');
+  item.querySelector('.extra-select').classList.toggle('opened');
+  item.querySelector('.extra-options-list').classList.toggle('opened-list');
+};
+
+export { filtersList, onFilterItemClick };
diff --git a/src/main.js b/src/main.js
@@ -1,2 +1,6 @@
 import { testFn } from './js/test';
 testFn();
+
+import { filtersList, onFilterItemClick } from './js/search-filter';
+
+filtersList?.addEventListener('click', onFilterItemClick);
diff --git a/src/partials/catalog-children/search-filter.html b/src/partials/catalog-children/search-filter.html
@@ -1 +1,93 @@
-<div><p class="test-filter2">SEARCH FILTER</p></div>
+<div class="temporary-container container">
+  <div class="search-filter">
+    <div class="search-input-container">
+      <label class="search-label" for="search">Search</label>
+      <input
+        type="text"
+        class="search-input"
+        placeholder="Enter Text"
+        name="search"
+        id="search"
+        autocomplete="off"
+      />
+      <svg width="18" height="18" class="search-icon">
+        <use href="images/sprite.svg#icon-search"></use>
+      </svg>
+    </div>
+    <div class="extra-wrapper">
+      <ul class="extra-filters-list">
+        <li class="extra-filters-item">
+          <p class="search-label">Time</p>
+          <div class="extra-select">
+            <div class="extra-default">
+              <div class="selected-option">40 min</div>
+              <svg width="18" height="18" class="arrow-down">
+                <use href="images/sprite.svg#icon-arrow-down"></use>
+              </svg>
+            </div>
+            <ul class="extra-options-list">
+              <li class="extra-options-item">Option 1</li>
+              <li class="extra-options-item">Option 2</li>
+              <li class="extra-options-item current-option">Option 3</li>
+              <li class="extra-options-item">Option 4</li>
+              <li class="extra-options-item">Option 5</li>
+              <li class="extra-options-item">Option 6</li>
+              <li class="extra-options-item">Option 7</li>
+              <li class="extra-options-item">Option 8</li>
+            </ul>
+          </div>
+        </li>
+        <li class="extra-filters-item">
+          <p class="search-label">Area</p>
+          <div class="extra-select">
+            <div class="extra-default">
+              <div class="selected-option">Italian</div>
+              <svg width="18" height="18" class="arrow-down">
+                <use href="images/sprite.svg#icon-arrow-down"></use>
+              </svg>
+            </div>
+            <ul class="extra-options-list">
+              <li class="extra-options-item">Option 1</li>
+              <li class="extra-options-item">Option 2</li>
+              <li class="extra-options-item current-option">Option 3</li>
+              <li class="extra-options-item">Option 4</li>
+              <li class="extra-options-item">Option 5</li>
+              <li class="extra-options-item">Option 6</li>
+              <li class="extra-options-item">Option 7</li>
+              <li class="extra-options-item">Option 8</li>
+            </ul>
+          </div>
+        </li>
+        <li class="extra-filters-item">
+          <p class="search-label">Ingredients</p>
+          <div class="extra-select">
+            <div class="extra-default">
+              <div class="selected-option">Tomato</div>
+              <svg width="18" height="18" class="arrow-down">
+                <use href="images/sprite.svg#icon-arrow-down"></use>
+              </svg>
+            </div>
+            <ul class="extra-options-list">
+              <li class="extra-options-item">Option 1</li>
+              <li class="extra-options-item">Option 2</li>
+              <li class="extra-options-item current-option">Option 3</li>
+              <li class="extra-options-item">Option 4</li>
+              <li class="extra-options-item">Option 5</li>
+              <li class="extra-options-item">Option 6</li>
+              <li class="extra-options-item">Option 7</li>
+              <li class="extra-options-item">Option 8</li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+      <div class="reset-btn-container">
+        <button type="button" class="reset-btn">
+          <svg width="16" height="16" class="reset-icon">
+            <use href="images/sprite.svg#icon-cross"></use>
+          </svg>
+          <span class="reset-text">Reset the filter</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/scss/partials/catalog/_search-filter.scss b/src/scss/partials/catalog/_search-filter.scss
@@ -1,3 +1,178 @@
-.test-filter2 {
-  color: lightblue;
+.search-filter {
+  margin-left: 40px;
+
+  @media screen and (min-width: $tablet) {
+      display: flex; // temp
+      align-items: baseline; // temp
+      gap: 20px; // temp
+  }
+}
+
+.search-input-container {
+  position: relative;
+}
+
+.search-label {
+  @include filter-text;
+  font-size: 12px;
+  line-height: calc(14 / 12);
+  display: block;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 14px;
+    line-height: calc(18 / 14);
+  }
+}
+
+.search-input {
+  width: 335px; // ИЗМЕНИТЬ
+  border: 1px solid $color-black-20;
+  padding: 14px 14px 14px 48px;
+  margin-top: 8px;
+
+  @include filter-text;
+  font-size: 14px;
+  line-height: calc(18 / 14);
+
+  outline: none;
+  @include radius-15;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 16px;
+    line-height: calc(20 / 16);
+  }
+}
+
+.extra-filters-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 14px;
+
+  @media screen and (min-width: 768px) {
+    flex-wrap: nowrap;
+  }
+}
+
+.extra-filters-item {
+}
+
+.extra-select {
+  position: relative;
+  width: 160px;
+  height: 46px;
+  border-radius: 15px;
+  padding: 14px 18px;
+  border: 1px solid $color-black-20;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.extra-default {
+  display: flex;
+  justify-content: space-between;
+}
+
+.selected-option {
+  @include filter-text;
+  font-size: 14px;
+  line-height: calc(18 / 14);
+  font-weight: 600;
+}
+
+.extra-options-list {
+  position: absolute;
+  top: 105%;
+  left: 0;
+  width: 100%;
+  max-height: 176px;
+  overflow-y: auto;
+  background-color: $color-white;
+  @include radius-15;
+  box-shadow: 0px 4px 36px 0px #00000005;
+  transition-duration: 300ms;
+  z-index: 10;
+  transform-origin: top;
+
+  transform: scaleY(0);
+  -webkit-transform: scaleY(0);
+  -moz-transform: scaleY(0);
+  -ms-transform: scaleY(0);
+  -o-transform: scaleY(0);
+}
+
+.extra-options-item {
+  padding: 8px;
+  cursor: pointer;
+
+  @include filter-text;
+  font-size: 14px;
+  line-height: calc(18 / 14);
+  color: $color-black-30;
+
+  @media screen and (min-width: $tablet) {
+    font-size: 16px;
+    line-height: calc(20 / 16);
+  }
+}
+
+.search-icon {
+  position: absolute;
+  left: 18px;
+  top: 50%;
+  fill: $color-black-50;
+  pointer-events: none;
+}
+
+.arrow-down {
+  stroke: $color-black-50;
+  fill: transparent;
+  transition-duration: 300ms;
+}
+
+.reset-btn-container {
+  margin-top: 14px;
+  margin-left: auto;
+}
+
+.reset-btn {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.reset-icon {
+  stroke: $color-green;
+}
+
+.reset-text {
+  @include filter-text;
+  font-size: 12px;
+}
+
+.opened {
+
+  .arrow-down {
+    transform: rotate(180deg)  ;
+    -webkit-transform: rotate(180deg)  ;
+    -moz-transform: rotate(180deg)  ;
+    -ms-transform: rotate(180deg)  ;
+    -o-transform: rotate(180deg)  ;
+}
+}
+
+.opened-list {
+  transform: scaleY(1);
+  -webkit-transform: scaleY(1);
+  -moz-transform: scaleY(1);
+  -ms-transform: scaleY(1);
+  -o-transform: scaleY(1);
+}
+
+.current-option {
+  color: $color-black;
 }