Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

overlay js + css правки

Browse Source
This commit is contained in:
Kirill Pet
2024-10-08 23:17:45 +03:00
parent 7beff60d00
commit db58f5c463
4 changed files with 114 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/gp-style-core.css
View File

@@ -807,8 +807,6 @@ button{
opacity: 0; opacity: 0;
transition: opacity .2s ease-out; transition: opacity .2s ease-out;
pointer-events: none; pointer-events: none;
white-space: nowrap;
} }
.modal.active{ .modal.active{
opacity: 1; opacity: 1;

12
assets/css/gp-style-desktop.css
View File

@@ -326,6 +326,8 @@
background-color: var(--background-grey); background-color: var(--background-grey);
border-radius: 24px; border-radius: 24px;
overflow: hidden;
position: relative; position: relative;
} }
.product__item::before{ .product__item::before{
@@ -349,6 +351,9 @@
.product__item:hover::before{ .product__item:hover::before{
opacity: 1; opacity: 1;
} }
.product__item.active::before{
opacity: 0;
}
.product-item__block-label{ .product-item__block-label{
position: absolute; position: absolute;
top: 16px; top: 16px;
@@ -449,7 +454,7 @@
} }
.product-item__overlay{ .product-item__overlay{
position: absolute; position: absolute;
top: 0; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
@@ -466,6 +471,11 @@
background-color: rgba(242, 242, 242, 0.8); background-color: rgba(242, 242, 242, 0.8);
z-index: 10; z-index: 10;
transition: top .4s ease-out;
}
.product-item__overlay.active{
top: 0;
} }
.product-item-overlay__header{} .product-item-overlay__header{}
.product-item-overlay__tags{ .product-item-overlay__tags{

30
assets/js/gp-main.js
View File

@@ -16,6 +16,36 @@ modalClose('.modal__close');
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle // toggle
// overlay
let products = document.querySelectorAll('.product__item');
products.forEach(productItem => {
let button = productItem.querySelector('.open-overlay'),
overlay = productItem.querySelector('.product-item__overlay');
if (button) {
button.onclick = function (e) {
document.querySelectorAll('.product__item').forEach(e => {
if (e.classList.contains('active')) {
e.classList.remove('active');
}
});
document.querySelectorAll('.product-item__overlay').forEach(e => {
if (e.classList.contains('active')) {
e.classList.remove('active');
}
});
productItem.classList.toggle('active');
overlay.classList.toggle('active');
}
}
})
// overlay
// select // select
toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);

77
index.html
View File

@@ -274,7 +274,7 @@
1 304 1 304
</p> </p>
<div class="product-item__bye"> <div class="product-item__bye">
<button class="button button--white button--100-perc"> <button class="button button--white button--100-perc open-overlay">
Купить Купить
</button> </button>
</div> </div>
@@ -368,11 +368,80 @@
1 304 1 304
</p> </p>
<div class="product-item__bye"> <div class="product-item__bye">
<button class="button button--white button--100-perc"> <button class="button button--white button--100-perc open-overlay ">
Купить Купить
</button> </button>
</div> </div>
</div> </div>
<div class="product-item__overlay">
<div class="product-item-overlay__header">
<p class="product-item__title">
Сухой корм, 2 кг, для крупных и средних пород
</p>
<ul class="product-item-overlay__tags">
<li>Seperpremium</li>
<li>Для крупных и средних пород </li>
<li>Полнорационный</li>
</ul>
</div>
<form class="product-item__form" method="post" action="/send-telegram.php">
<div class="product-item-overlay__input-block">
<div class="product-item-overlay__field">
<p class="product-item-overlay-field__title">Объем</p>
<div class="select">
<input type="text" class="select__state" value="2 кг" readonly>
<div class="state__block">
<ul class="state__content">
<li>
<button class="state__button active">
2 кг
</button>
</li>
<li>
<button class="state__button">
3 кг
</button>
</li>
<li>
<button class="state__button">
4 кг
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="product-item-overlay__field">
<p class="product-item-overlay-field__title">Количество</p>
<div class="counter">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
</div>
</div>
<p class="product-item-overlay__price">
1280
</p>
<div class="product-item-overlay__block-button">
<div class="product-item-overlay__button">
<input class="button button--gradient button--base button--100-perc" type="submit" value="Добавить в корзину">
</div>
<div class="product-item-overlay__button">
<button class="to-know button--100-perc">
<p>Подробнее</p>
</button>
</div>
</div>
</form>
</div>
</div> </div>
<div class="product__item hiding"> <div class="product__item hiding">
<div class="product-item__label"> <div class="product-item__label">
@@ -421,7 +490,7 @@
1 304 1 304
</p> </p>
<div class="product-item__bye"> <div class="product-item__bye">
<button class="button button--white button--100-perc"> <button class="button button--white button--100-perc open-overlay">
Купить Купить
</button> </button>
</div> </div>
@@ -446,7 +515,7 @@
1 304 1 304
</p> </p>
<div class="product-item__bye"> <div class="product-item__bye">
<button class="button button--white button--100-perc"> <button class="button button--white button--100-perc open-overlay">
Купить Купить
</button> </button>
</div> </div>