Fix sidebar collapse/expand

This commit is contained in:
papi 2024-01-14 22:27:54 +03:00
parent 7e37879836
commit db5f45934a
2 changed files with 83 additions and 84 deletions

View File

@ -1,19 +1,18 @@
"use strict";
$(document).ready(function () {
// side navigation bar
function toggleSidebar() {
// side navigation bar
function toggleSidebar() {
document.getElementById("side-nav").classList.toggle("toggle-active");
document.getElementById("main").classList.toggle("toggle-active");
document.getElementById("top-navbar").classList.toggle("toggle-active");
document.querySelector(".manage-wrap").classList.toggle("toggle-active");
}
}
// #################################
// popup
// #################################
// popup
var c = 0;
function pop() {
var c = 0;
function pop() {
if (c == 0) {
document.getElementById("popup-box").style.display = "block";
c = 1;
@ -21,28 +20,28 @@ $(document).ready(function () {
document.getElementById("popup-box").style.display = "none";
c = 0;
}
}
}
// const popupMessagesButtons = document.querySelectorAll('popup-btn-messages')
// const popupMessagesButtons = document.querySelectorAll('popup-btn-messages')
// popupMessagesButtons.forEach(button, () => {
// button.addEventListener('click', () => {
// document.getElementById('popup-box-messages').style.display = 'none';
// })
// })
// popupMessagesButtons.forEach(button, () => {
// button.addEventListener('click', () => {
// document.getElementById('popup-box-messages').style.display = 'none';
// })
// })
// const popupMessagesButtom = document.getElementById('popup-btn-messages')
// popupMessagesButtom.addEventListener('click', () => {
// document.getElementById('popup-box-messages').style.display = 'none';
// })
// ##################################
// const popupMessagesButtom = document.getElementById('popup-btn-messages')
// popupMessagesButtom.addEventListener('click', () => {
// document.getElementById('popup-box-messages').style.display = 'none';
// })
// ##################################
// Example starter JavaScript for disabling form submissions if there are invalid fields
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName("needs-validation");
// Example starter JavaScript for disabling form submissions if there are invalid fields
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName("needs-validation");
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
// Loop over them and prevent submission
Array.prototype.filter.call(forms, function (form) {
form.addEventListener(
"submit",
function (event) {
@ -54,11 +53,11 @@ $(document).ready(function () {
},
false
);
});
// ##################################
});
// ##################################
// extend and collapse
function showCourses(btn) {
// extend and collapse
function showCourses(btn) {
var btn = $(btn);
if (collapsed) {
@ -69,14 +68,14 @@ $(document).ready(function () {
btn.html('Expand <i class="fas fa-angle-down"></i>');
$(".hide").css("max-height", "150");
$(".white-shadow").css({
background:
"linear-gradient(transparent 50%, rgba(255,255,255,.8) 80%)",
background: "linear-gradient(transparent 50%, rgba(255,255,255,.8) 80%)",
"z-index": "2",
});
}
collapsed = !collapsed;
}
}
$(document).ready(function () {
$("#primary-search").focus(function () {
$("#top-navbar").attr("class", "dim");
$("#side-nav").css("pointer-events", "none");

View File

@ -59,15 +59,15 @@
display: block;
}
.full-screen {
.expand {
transform: translateY(100%);
position: fixed;
bottom: 0;
top: 3rem;
left: 0;
right: 0;
width: 100%;
z-index: 999;
max-width: 100%;
max-height: 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
background-color: #fff;
@ -80,7 +80,7 @@
overflow: auto;
}
.full-screen .fa-expand-alt {
.expand .fa-expand-alt {
display: block;
}
@ -571,12 +571,12 @@
<script>
$('.fa-expand-alt').click(function () {
if ($(this).parent('.chart-wrap').parent('.col-md-6').hasClass('full-screen')) {
$('.col-md-6.full-screen').removeClass('full-screen');
if ($(this).parent('.chart-wrap').parent('.col-md-6').hasClass('expand')) {
$('.col-md-6.expand').removeClass('expand');
}
else {
$('.col-md-6.full-screen')?.removeClass('full-screen');
$(this).parent('.chart-wrap').parent('.col-md-6').addClass('full-screen');
$('.col-md-6.expand')?.removeClass('expand');
$(this).parent('.chart-wrap').parent('.col-md-6').addClass('expand');
}
})
</script>