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

сделал переключение в кабинете

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent e0cc1b1e0c
commit d5ea9b0a34
6 changed files with 342 additions and 100 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      assets/css/gp-style-desktop.css
  2. 16
      assets/css/gp-style-tablet.css
  3. 84
      assets/js/gp-cabinet.js
  4. 234
      notification copy.html
  5. 95
      notification.html
  6. 8
      registration.html

3
assets/css/gp-style-desktop.css
Unescape View File

@ -1291,6 +1291,9 @@ main{
transition: opacity .2s ease-out;
}
.cabinet-control__button:first-child{
margin-left: 0;
}
.cabinet-control__button.active{
background: var(--background-black);
color: var(--text-white);

16
assets/css/gp-style-tablet.css
Unescape View File

@ -110,15 +110,27 @@ main{
/* cabinet */
.cabinet{
flex-direction: column;
position: relative;
}
.cabinet__control{
display: flex;
align-items: center;
position: relative;
}
.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 */
}

84
assets/js/gp-cabinet.js
Unescape View File

@ -2,4 +2,88 @@
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');
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
View File

File diff suppressed because one or more lines are too long

95
notification.html
Unescape View File

@ -225,99 +225,8 @@
</header>
<footer class="footer">
<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>
<div class="modal active">
</div>
<!-- <script src="assets/js/gp-main.js"></script> -->

8
registration.html
Unescape View File

@ -226,11 +226,11 @@
<main class="wrapper">
<div class="cabinet__control">
<button class="cabinet-control__button active">Заказы</button>
<button class="cabinet-control__button">Профиль</button>
<button class="cabinet-control__button active start" data-cabinet="orders">Заказы</button>
<button class="cabinet-control__button" data-cabinet="profile">Профиль</button>
</div>
<div class="cabinet">
<div class="cabinet__profile">
<div class="cabinet__profile cabinet-content">
<div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content">
<div class="cabinet-card__element">
@ -350,7 +350,7 @@
</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__content">
<p class="cabinet-card__title">

Write Preview
Loading…
Cancel
Save