From 062ab34f14c0406b45ea06f897b67920b5f36efb Mon Sep 17 00:00:00 2001 From: Robertw8 Date: Thu, 17 Aug 2023 15:36:59 +0300 Subject: [PATCH] extra filters demo --- src/js/search-filter.js | 9 + src/main.js | 4 + .../catalog-children/search-filter.html | 94 ++++++++- src/scss/partials/catalog/_search-filter.scss | 179 +++++++++++++++++- 4 files changed, 283 insertions(+), 3 deletions(-) create mode 100644 src/js/search-filter.js diff --git a/src/js/search-filter.js b/src/js/search-filter.js new file mode 100644 index 0000000..1d9d740 --- /dev/null +++ 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 index 5841508..16bda7b 100644 --- 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 index 7d4c78b..a7baaeb 100644 --- a/src/partials/catalog-children/search-filter.html +++ b/src/partials/catalog-children/search-filter.html @@ -1 +1,93 @@ -

SEARCH FILTER

+
+
+
+ + + + + +
+
+
    +
  • +

    Time

    +
    +
    +
    40 min
    + + + +
    +
      +
    • Option 1
      • +
    • Option 2
      • +
    • Option 3
      • +
    • Option 4
      • +
    • Option 5
      • +
    • Option 6
      • +
    • Option 7
      • +
    • Option 8
      • +
    +
    +
    • +
  • +

    Area

    +
    +
    +
    Italian
    + + + +
    +
      +
    • Option 1
      • +
    • Option 2
      • +
    • Option 3
      • +
    • Option 4
      • +
    • Option 5
      • +
    • Option 6
      • +
    • Option 7
      • +
    • Option 8
      • +
    +
    +
    • +
  • +

    Ingredients

    +
    +
    +
    Tomato
    + + + +
    +
      +
    • Option 1
      • +
    • Option 2
      • +
    • Option 3
      • +
    • Option 4
      • +
    • Option 5
      • +
    • Option 6
      • +
    • Option 7
      • +
    • Option 8
      • +
    +
    +
    • +
+
+ +
+
+
+
diff --git a/src/scss/partials/catalog/_search-filter.scss b/src/scss/partials/catalog/_search-filter.scss index 5003286..3bd38f1 100644 --- 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; } \ No newline at end of file