fix открытие cabinet__orders
This commit is contained in:
@@ -187,6 +187,12 @@ main{
|
|||||||
}
|
}
|
||||||
.cabinet__orders.active, .cabinet__profile.active{
|
.cabinet__orders.active, .cabinet__profile.active{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.cabinet__orders.hide, .cabinet__profile.hide{
|
||||||
|
position: static;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
.cabinet__subscription-pc{
|
.cabinet__subscription-pc{
|
||||||
display: none;
|
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');
|
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);
|
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){
|
function controlCabinet(buttons, main, minWidth){
|
||||||
let thisWidth = window.innerWidth;
|
let thisWidth = window.innerWidth;
|
||||||
let thisMain = document.querySelector(main);
|
let thisMain = document.querySelector(main);
|
||||||
@@ -63,7 +16,6 @@ function controlCabinet(buttons, main, minWidth){
|
|||||||
|
|
||||||
if (thisWidth <= minWidth) {
|
if (thisWidth <= minWidth) {
|
||||||
let thisButtons = document.querySelectorAll(buttons);
|
let thisButtons = document.querySelectorAll(buttons);
|
||||||
// let thisContents = document.querySelectorAll(contents);
|
|
||||||
|
|
||||||
thisButtons.forEach(e => {
|
thisButtons.forEach(e => {
|
||||||
e.onclick = function (element){
|
e.onclick = function (element){
|
||||||
@@ -76,6 +28,16 @@ function controlCabinet(buttons, main, minWidth){
|
|||||||
if (!thisContent.classList.contains('active')) {
|
if (!thisContent.classList.contains('active')) {
|
||||||
thisMain.querySelector('.active').classList.remove('active');
|
thisMain.querySelector('.active').classList.remove('active');
|
||||||
thisContent.classList.add('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 => {
|
thisButtons.forEach(e => {
|
||||||
@@ -87,3 +49,4 @@ function controlCabinet(buttons, main, minWidth){
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -366,7 +366,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 cabinet-card--green-white cabinet__subscription-pc">
|
||||||
<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