сделал переключение в кабинете
This commit is contained in:
Kirill Pet
@@ -1291,6 +1291,9 @@ main{
|
|||||||
|
|
||||||
transition: opacity .2s ease-out;
|
transition: opacity .2s ease-out;
|
||||||
}
|
}
|
||||||
|
.cabinet-control__button:first-child{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
.cabinet-control__button.active{
|
.cabinet-control__button.active{
|
||||||
background: var(--background-black);
|
background: var(--background-black);
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
|
|||||||
@@ -110,15 +110,27 @@ main{
|
|||||||
/* cabinet */
|
/* cabinet */
|
||||||
.cabinet{
|
.cabinet{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
}
|
}
|
||||||
.cabinet__control{
|
.cabinet__control{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.cabinet__orders, .cabinet__profile{
|
.cabinet__orders, .cabinet__profile{
|
||||||
width: 100%;
|
width: calc(100% - 48px);
|
||||||
}
|
}
|
||||||
|
.cabinet__orders, .cabinet__profile{
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
transition: opacity .2s ease-out;
|
||||||
|
}
|
||||||
|
.cabinet__orders.active, .cabinet__profile.active{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
/* cabinet */
|
/* cabinet */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,4 +2,88 @@
|
|||||||
|
|
||||||
import * as fun from './_gp-function.js';
|
import * as fun from './_gp-function.js';
|
||||||
|
|
||||||
|
let widthPhoneCabinet = 1200;
|
||||||
|
|
||||||
fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
|
fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
|
||||||
|
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
|
||||||
|
|
||||||
|
window.addEventListener('resize', (e) => {
|
||||||
|
startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// function
|
||||||
|
function startHeight(heightElement, contentElement, minWidth, removeActive, buttons) {
|
||||||
|
let thisWidth = window.innerWidth;
|
||||||
|
let thisHeightElement = document.querySelector(heightElement);
|
||||||
|
let thisContentElement = document.querySelector(contentElement);
|
||||||
|
let thisRemoveActive = document.querySelector(removeActive);
|
||||||
|
let thisButtons = document.querySelectorAll(buttons);
|
||||||
|
|
||||||
|
if (thisWidth <= minWidth) {
|
||||||
|
let newHeight = thisHeightElement.clientHeight + 48;
|
||||||
|
|
||||||
|
thisContentElement.style.height = `${newHeight}px`;
|
||||||
|
thisHeightElement.classList.add('active');
|
||||||
|
thisRemoveActive.classList.remove('active');
|
||||||
|
|
||||||
|
thisButtons.forEach(e => {
|
||||||
|
let thisClassList = e.classList;
|
||||||
|
|
||||||
|
if (!thisClassList.contains('start')) {
|
||||||
|
thisClassList.remove('active');
|
||||||
|
}else{
|
||||||
|
thisClassList.add('active')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
thisContentElement.style.height = 'auto';
|
||||||
|
thisHeightElement.classList.remove('active');
|
||||||
|
|
||||||
|
thisButtons.forEach(e => {
|
||||||
|
let thisClassList = e.classList;
|
||||||
|
|
||||||
|
if (!thisClassList.contains('start')) {
|
||||||
|
thisClassList.remove('active');
|
||||||
|
}else{
|
||||||
|
thisClassList.add('active')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function controlCabinet(buttons, main, minWidth){
|
||||||
|
let thisWidth = window.innerWidth;
|
||||||
|
let thisMain = document.querySelector(main);
|
||||||
|
|
||||||
|
|
||||||
|
if (thisWidth <= minWidth) {
|
||||||
|
let thisButtons = document.querySelectorAll(buttons);
|
||||||
|
// let thisContents = document.querySelectorAll(contents);
|
||||||
|
|
||||||
|
thisButtons.forEach(e => {
|
||||||
|
e.onclick = function (element){
|
||||||
|
let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
|
||||||
|
let newHeight = thisContent.clientHeight + 48;
|
||||||
|
let thisButton = element.target;
|
||||||
|
|
||||||
|
thisMain.style.height = `${newHeight}px`
|
||||||
|
|
||||||
|
if (!thisContent.classList.contains('active')) {
|
||||||
|
thisMain.querySelector('.active').classList.remove('active');
|
||||||
|
thisContent.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
thisButtons.forEach(e => {
|
||||||
|
e.classList.remove('active');
|
||||||
|
})
|
||||||
|
thisButton.classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
234
notification copy.html
Normal file
234
notification copy.html
Normal file
File diff suppressed because one or more lines are too long
@@ -225,99 +225,8 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="modal active">
|
||||||
<footer class="footer">
|
</div>
|
||||||
<div class="footer__wrapper wrapper">
|
|
||||||
<div class="footer__content">
|
|
||||||
<img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
|
|
||||||
|
|
||||||
<address class="footer__address">
|
|
||||||
123182 г. Москва, <br>
|
|
||||||
4-й Красногорский пр., <br>
|
|
||||||
д. 2/4, стр. 1, этаж/ком. 3/1
|
|
||||||
</address>
|
|
||||||
|
|
||||||
<div class="footer__list">
|
|
||||||
<div class="footer-list__item">
|
|
||||||
<p class="footer-list__title">Отзывы и предложения</p>
|
|
||||||
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
|
|
||||||
pro@cosmopet.shop
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-list__item">
|
|
||||||
<p class="footer-list__title">Связь с ветеринаром</p>
|
|
||||||
<a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
|
|
||||||
vetvopros@cosmopet.shop
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-list__item">
|
|
||||||
<p class="footer-list__title">Заявки для оптовых покупателей</p>
|
|
||||||
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
|
|
||||||
pro@cosmopet.shop
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-list__item">
|
|
||||||
<a href="#" class="button button--black button--100-perc button--link">
|
|
||||||
Чат бот с ветеринаром
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer__about">
|
|
||||||
<div class="social-media">
|
|
||||||
<a href="#" class="social-media__item">
|
|
||||||
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
|
|
||||||
</a>
|
|
||||||
<a href="#" class="social-media__item">
|
|
||||||
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
|
|
||||||
</a>
|
|
||||||
<a href="#" class="social-media__item">
|
|
||||||
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer__form">
|
|
||||||
<form class="form" method="post" action="/send-telegram.php">
|
|
||||||
<p class="form__title">
|
|
||||||
Форма обратной связи
|
|
||||||
</p>
|
|
||||||
<div class="form__item">
|
|
||||||
<input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
|
|
||||||
</div>
|
|
||||||
<div class="form__item">
|
|
||||||
<input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
|
|
||||||
</div>
|
|
||||||
<div class="form__item">
|
|
||||||
<textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="form__item">
|
|
||||||
<input class="form__button" type="submit" value="Отправить">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer__social-media">
|
|
||||||
<div class="social-media">
|
|
||||||
<a href="#" class="social-media__item">
|
|
||||||
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
|
|
||||||
</a>
|
|
||||||
<a href="#" class="social-media__item">
|
|
||||||
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
|
|
||||||
</a>
|
|
||||||
<a href="#" class="social-media__item">
|
|
||||||
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <script src="assets/js/gp-main.js"></script> -->
|
<!-- <script src="assets/js/gp-main.js"></script> -->
|
||||||
|
|||||||
@@ -226,11 +226,11 @@
|
|||||||
|
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
<div class="cabinet__control">
|
<div class="cabinet__control">
|
||||||
<button class="cabinet-control__button active">Заказы</button>
|
<button class="cabinet-control__button active start" data-cabinet="orders">Заказы</button>
|
||||||
<button class="cabinet-control__button">Профиль</button>
|
<button class="cabinet-control__button" data-cabinet="profile">Профиль</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="cabinet">
|
<div class="cabinet">
|
||||||
<div class="cabinet__profile">
|
<div class="cabinet__profile cabinet-content">
|
||||||
<div class="cabinet-card cabinet-card--green">
|
<div class="cabinet-card cabinet-card--green">
|
||||||
<div class="cabinet-card__content">
|
<div class="cabinet-card__content">
|
||||||
<div class="cabinet-card__element">
|
<div class="cabinet-card__element">
|
||||||
@@ -350,7 +350,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cabinet__orders">
|
<div class="cabinet__orders cabinet-content">
|
||||||
<div class="cabinet-card cabinet-card--green-white">
|
<div class="cabinet-card cabinet-card--green-white">
|
||||||
<div class="cabinet-card__content">
|
<div class="cabinet-card__content">
|
||||||
<p class="cabinet-card__title">
|
<p class="cabinet-card__title">
|
||||||
|
|||||||
Reference in New Issue
Block a user