diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 8bd7131..a5c6f39 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -640,7 +640,7 @@ button{ padding: 11px 47px 11px 13px; - pointer-events:none; + /* pointer-events:none; */ border: 1px solid var(--background-black); border-radius: 20px; @@ -651,6 +651,8 @@ button{ line-height: 120%; color: var(--text-black); + cursor: pointer; + position: relative; transition: opacity .2s ease-out; @@ -671,6 +673,8 @@ button{ background-image: url(../img/svg/main/arrow-black.svg); background-repeat: no-repeat; background-size: contain; + + pointer-events: none; } .state__block{ position: absolute; @@ -681,6 +685,8 @@ button{ height: 0; overflow: hidden; + + transition: height .2s ease-out; } .state__content{ padding: 8px; diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 7cc247b..10b5b01 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -487,20 +487,7 @@ position: relative; } - .product-item-overlay__tags li:nth-child(n+2)::before{ - content: ''; - - position: absolute; - top: 6px; - left: -8px; - - width: 4px; - aspect-ratio: 1; - - background-color: var(--text-3); - border-radius: 50%; - } - .product-item-overlay__tags li:nth-child(n+2)::after{ + .product-item-overlay__tags li:nth-child(n+1)::after{ content: ''; position: absolute; diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js index d46a9af..a822581 100644 --- a/assets/js/gp-main.js +++ b/assets/js/gp-main.js @@ -1,9 +1,80 @@ 'use strict'; +// header +toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); +singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu'); +singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu'); // header -// header +// media +modalOpen('.button--filter', '.modal__filter'); +modalOpen('.basket-open', '.modal__basket'); +modalClose('.modal__close'); +// media + +// toggle +toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); +// toggle + +// select +toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); + +let selects = document.querySelectorAll('.select'); + +selects.forEach(e => { + let state = e.querySelector('.select__state'), + buttons = e.querySelectorAll('.state__button'); + + buttons.forEach(e => { + let button = e; + + e.onclick = function (event) { + event.preventDefault(); + buttons.forEach(element => { + if (element.classList.contains('active')) { + element.classList.remove('active'); + } + }) + + let text = e.textContent.trim(); + state.value = text; + + button.classList.add('active'); + } + }) +}) +// select + +// counter +let counters = document.querySelectorAll('.counter'); + +counters.forEach(e => { + let minus = e.querySelector('.minus'), + plus = e.querySelector('.plus'), + input = e.querySelector('.counter__input'); + + minus.onclick = function (e) { + e.preventDefault(); + + let number = input.value; + + if (number >= 2){ + input.value = Number(number) - 1; + } + } + + plus.onclick = function (e) { + e.preventDefault(); + + let number = input.value; + + if (number <= 99) { + input.value = Number(number) + 1; + } + } +}) +// counter // checkbox let checkbox = document.querySelectorAll('.checkbox'); @@ -22,17 +93,6 @@ checkbox.forEach(e => { }) // checkbox -// media -modalOpen('.button--filter', '.modal__filter'); -modalOpen('.basket-open', '.modal__basket'); -modalClose('.modal__close'); -// media - -// toggle -toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); -// toggle - - function modalOpen(buttonElement, contentElement){ let modal = document.querySelector('.modal'), aside = document.querySelector('.modal__aside'), @@ -99,7 +159,7 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, let thisMainElement = e, thisButtonElement = e.querySelector(buttonElement), thisHeightElement = e.querySelector(heightElement), - thisContentElement = e.querySelector(contentElement); + thisContentElement = e.querySelector(contentElement); thisButtonElement.onclick = function (e) { let height = thisHeightElement.clientHeight; @@ -123,4 +183,22 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, } }); +} + +function singleToggleOpenX(button, content, blockheight) { + let thisButton = document.querySelector(button), + thisContent = document.querySelector(content), + thisBlockheight = document.querySelector(blockheight); + + thisButton.onclick = function () { + let height = thisBlockheight.clientHeight; + + if (!thisContent.classList .contains('open')) { + thisContent.style.height = `${height}px`; + thisContent.classList .add('open'); + }else{ + thisContent.style.height = null; + thisContent.classList .remove('open'); + } + } } \ No newline at end of file diff --git a/index.html b/index.html index 4677cca..25ac878 100644 --- a/index.html +++ b/index.html @@ -297,7 +297,7 @@

Объем

- +