Fix sidebar collapse/expand

static/js/main.js

@@ -1,19 +1,18 @@
 "use strict";
 
-$(document).ready(function () {
+// side navigation bar
-  // side navigation bar
+function toggleSidebar() {
-  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;
+var c = 0;
-  function pop() {
+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, () => {
+// popupMessagesButtons.forEach(button, () => {
-  //     button.addEventListener('click', () => {
+//     button.addEventListener('click', () => {
-  //         document.getElementById('popup-box-messages').style.display = 'none';
+//         document.getElementById('popup-box-messages').style.display = 'none';
-  //     })
+//     })
-  // })
+// })
 
-  // const popupMessagesButtom = document.getElementById('popup-btn-messages')
+// const popupMessagesButtom = document.getElementById('popup-btn-messages')
-  // popupMessagesButtom.addEventListener('click', () => {
+// popupMessagesButtom.addEventListener('click', () => {
-  //     document.getElementById('popup-box-messages').style.display = 'none';
+//     document.getElementById('popup-box-messages').style.display = 'none';
-  // })
+// })
-  // ##################################
+// ##################################
 
-  // Example starter JavaScript for disabling form submissions if there are invalid fields
+// 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
+// Fetch all the forms we want to apply custom Bootstrap validation styles to
-  var forms = document.getElementsByClassName("needs-validation");
+var forms = document.getElementsByClassName("needs-validation");
 
-  // Loop over them and prevent submission
+// Loop over them and prevent submission
-  Array.prototype.filter.call(forms, function (form) {
+Array.prototype.filter.call(forms, function (form) {
   form.addEventListener(
     "submit",
     function (event) {
@@ -54,11 +53,11 @@ $(document).ready(function () {
     },
     false
   );
-  });
+});
-  // ##################################
+// ##################################
 
-  // extend and collapse
+// extend and collapse
-  function showCourses(btn) {
+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:
+      background: "linear-gradient(transparent 50%, rgba(255,255,255,.8) 80%)",
-          "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");

templates/core/dashboard.html

@@ -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')) {
+		if ($(this).parent('.chart-wrap').parent('.col-md-6').hasClass('expand')) {
-			$('.col-md-6.full-screen').removeClass('full-screen');
+			$('.col-md-6.expand').removeClass('expand');
 		}
 		else {
-			$('.col-md-6.full-screen')?.removeClass('full-screen');
+			$('.col-md-6.expand')?.removeClass('expand');
-			$(this).parent('.chart-wrap').parent('.col-md-6').addClass('full-screen');
+			$(this).parent('.chart-wrap').parent('.col-md-6').addClass('expand');
 		}
 	})
 </script>