fix открытие cabinet__orders

cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent f42d7d486c
commit 19cd9dfc68
  1. 6
      assets/css/gp-style-tablet.css
  2. 61
      assets/js/gp-cabinet.js
  3. 2
      registration.html

@ -187,6 +187,12 @@ main{
}
.cabinet__orders.active, .cabinet__profile.active{
opacity: 1;
width: 100%;
}
.cabinet__orders.hide, .cabinet__profile.hide{
position: static;
display: block;
}
.cabinet__subscription-pc{
display: none;

@ -7,55 +7,8 @@ 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);
@ -63,7 +16,6 @@ function controlCabinet(buttons, main, minWidth){
if (thisWidth <= minWidth) {
let thisButtons = document.querySelectorAll(buttons);
// let thisContents = document.querySelectorAll(contents);
thisButtons.forEach(e => {
e.onclick = function (element){
@ -76,6 +28,16 @@ function controlCabinet(buttons, main, minWidth){
if (!thisContent.classList.contains('active')) {
thisMain.querySelector('.active').classList.remove('active');
thisContent.classList.add('active');
setTimeout(() => {
thisMain.style.height = 'auto';
if (thisMain.querySelector('.hide')) {
thisMain.querySelector('.hide').classList.remove('hide');
}
thisMain.querySelector('.active').classList.add('hide');
}, 200);
}
thisButtons.forEach(e => {
@ -86,4 +48,5 @@ function controlCabinet(buttons, main, minWidth){
})
}
}
}

@ -366,7 +366,7 @@
</div>
</div>
</div>
<div class="cabinet__orders cabinet-content">
<div class="cabinet__orders cabinet-content active hide">
<div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc">
<div class="cabinet-card__content">
<p class="cabinet-card__title">

Loading…
Cancel
Save