Fix sidebar collapse/expand

static/js/main.js

@@ -1,82 +1,81 @@
 "use strict";
 
+// 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
+
+var c = 0;
+function pop() {
+  if (c == 0) {
+    document.getElementById("popup-box").style.display = "block";
+    c = 1;
+  } else {
+    document.getElementById("popup-box").style.display = "none";
+    c = 0;
+  }
+}
+
+// const popupMessagesButtons = document.querySelectorAll('popup-btn-messages')
+
+// 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';
+// })
+// ##################################
+
+// 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) {
+  form.addEventListener(
+    "submit",
+    function (event) {
+      if (form.checkValidity() === false) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      form.classList.add("was-validated");
+    },
+    false
+  );
+});
+// ##################################
+
+// extend and collapse
+function showCourses(btn) {
+  var btn = $(btn);
+
+  if (collapsed) {
+    btn.html('Collapse <i class="fas fa-angle-up"></i>');
+    $(".hide").css("max-height", "unset");
+    $(".white-shadow").css({ background: "unset", "z-index": "0" });
+  } else {
+    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%)",
+      "z-index": "2",
+    });
+  }
+  collapsed = !collapsed;
+}
+
 $(document).ready(function () {
-  // 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
-
-  var c = 0;
-  function pop() {
-    if (c == 0) {
-      document.getElementById("popup-box").style.display = "block";
-      c = 1;
-    } else {
-      document.getElementById("popup-box").style.display = "none";
-      c = 0;
-    }
-  }
-
-  // const popupMessagesButtons = document.querySelectorAll('popup-btn-messages')
-
-  // 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';
-  // })
-  // ##################################
-
-  // 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) {
-    form.addEventListener(
-      "submit",
-      function (event) {
-        if (form.checkValidity() === false) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-        form.classList.add("was-validated");
-      },
-      false
-    );
-  });
-  // ##################################
-
-  // extend and collapse
-  function showCourses(btn) {
-    var btn = $(btn);
-
-    if (collapsed) {
-      btn.html('Collapse <i class="fas fa-angle-up"></i>');
-      $(".hide").css("max-height", "unset");
-      $(".white-shadow").css({ background: "unset", "z-index": "0" });
-    } else {
-      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%)",
-        "z-index": "2",
-      });
-    }
-    collapsed = !collapsed;
-  }
-
   $("#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>