Move debug panel to footer (#3097)

web/css/src/themes/dark.css

@@ -981,11 +981,7 @@ li[aria-expanded="true"] a {
 	color: #cacaca !important;
 }
 
-.graph-rounded {
-	border-radius: 8px;
-}
-
-.debug-panel-contents {
+.debug-panel-content {
 	background-color: #282828;
 }
 

web/css/src/themes/default.css

@@ -37,7 +37,7 @@
 		left: 0;
 		top: 0;
 		display: inline-block;
-		z-index: 99;
+		z-index: 2;
 	}
 }
 
@@ -221,6 +221,7 @@
 
 .top-bar-notification-title {
 	color: #9e9e9e;
+	font-size: 0.85rem;
 	font-weight: 600;
 
 	& a {
@@ -1783,6 +1784,69 @@ body.mobile .l-unit-toolbar__col--right {
 	opacity: 0.4;
 }
 
+.password-meter {
+	appearance: none;
+	display: block;
+	width: auto;
+	height: 3px;
+	background-color: #e7e7e7;
+	margin-left: 3px;
+	margin-right: 3px;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+}
+
+.password-meter[value="1"] {
+	background: red;
+}
+
+.password-meter[value="2"] {
+	background: orange;
+}
+
+.password-meter[value="3"] {
+	background: yellow;
+}
+
+.password-meter[value="4"] {
+	background: green;
+}
+
+/* Webkit based browsers */
+.password-meter[value="1"]::-webkit-meter-optimum-value {
+	background: red;
+}
+
+.password-meter[value="2"]::-webkit-meter-optimum-value {
+	background: orange;
+}
+
+.password-meter[value="3"]::-webkit-meter-optimum-value {
+	background: yellow;
+}
+
+.password-meter[value="4"]::-webkit-meter-optimum-value {
+	background: green;
+}
+
+/* Gecko based browsers */
+.password-meter[value="1"]::-moz-meter-bar {
+	background: red;
+}
+
+.password-meter[value="2"]::-moz-meter-bar {
+	background: orange;
+}
+
+.password-meter[value="3"]::-moz-meter-bar {
+	background: yellow;
+}
+
+.password-meter[value="4"]::-moz-meter-bar {
+	background: green;
+}
+
 .hint {
 	color: #777;
 	font-size: 0.8rem;
@@ -2034,10 +2098,8 @@ body.mobile .l-unit-toolbar__col--right {
 	background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%);
 }
 
-.body-login .debug-panel-header,
-.body-login .debug-panel-contents,
-.body-reset .debug-panel-header,
-.body-reset .debug-panel-contents {
+.body-login .debug-panel,
+.body-reset .debug-panel {
 	display: none;
 }
 
@@ -2646,99 +2708,37 @@ li[aria-expanded="true"] a {
 	line-height: 1.2rem;
 }
 
-.debug-panel-header {
-	text-align: center;
-	border-bottom: 1px solid rgb(255 255 255 / 25%);
-	box-shadow: 0 -2px 4px rgb(0 0 0 / 40%);
-	font-size: 0.75rem;
-	padding: 10px;
-	background-color: yellow;
-	color: #000;
-	position: sticky;
-	top: 0;
-	z-index: 301;
-}
-
-.debug-panel-header a {
-	font-weight: 500;
-	color: #000;
-}
+/* Debug panel
+   ========================================================================== */
 
-.debug-panel-contents {
-	background-color: #fff;
-	font-size: 0.75rem;
-	padding: 18px;
-	position: absolute;
-	top: 0;
-	z-index: 300;
-	height: 250px;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	border-bottom: 1px solid rgb(255 255 255 / 65%);
-	box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
+.debug-panel {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	z-index: 4;
+	box-shadow: 0 0 5px rgb(0 0 0 / 40%);
 }
 
-.password-meter {
-	appearance: none;
+.debug-panel-toggle {
 	display: block;
-	width: auto;
-	height: 3px;
-	background-color: #e7e7e7;
-	margin-left: 3px;
-	margin-right: 3px;
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
-}
-
-.password-meter[value="1"] {
-	background: red;
-}
-
-.password-meter[value="2"] {
-	background: orange;
-}
-
-.password-meter[value="3"] {
-	background: yellow;
-}
-
-.password-meter[value="4"] {
-	background: green;
-}
-
-/* Webkit based browsers */
-.password-meter[value="1"]::-webkit-meter-optimum-value {
-	background: red;
-}
-
-.password-meter[value="2"]::-webkit-meter-optimum-value {
-	background: orange;
-}
-
-.password-meter[value="3"]::-webkit-meter-optimum-value {
-	background: yellow;
-}
-
-.password-meter[value="4"]::-webkit-meter-optimum-value {
-	background: green;
-}
-
-/* Gecko based browsers */
-.password-meter[value="1"]::-moz-meter-bar {
-	background: red;
-}
-
-.password-meter[value="2"]::-moz-meter-bar {
-	background: orange;
-}
+	text-align: center;
+	font-size: 0.8rem;
+	font-weight: 500;
+	color: #000;
+	padding: 10px 15px;
+	background-color: #ff0;
 
-.password-meter[value="3"]::-moz-meter-bar {
-	background: yellow;
+	&:hover {
+		background-color: #ee0;
+	}
 }
 
-.password-meter[value="4"]::-moz-meter-bar {
-	background: green;
+.debug-panel-content {
+	background-color: #eee;
+	font-size: 0.75rem;
+	padding: 20px;
+	max-height: 300px;
+	overflow-y: auto;
 }
 
 /* Collapse component

web/css/src/themes/vestia.css

@@ -33,14 +33,10 @@ strong {
 	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
 }
 
-.top-bar-notification-item {
-	line-height: 1.1rem;
-
-	&.unseen {
-		& .top-bar-notification-title,
-		& .top-bar-notification-title a {
-			color: #111;
-		}
+.top-bar-notification-item.unseen {
+	& .top-bar-notification-title,
+	& .top-bar-notification-title a {
+		color: #111;
 	}
 }
 

web/templates/footer.php

@@ -55,5 +55,11 @@
 		<span class="u-hidden"><?=_('Top');?></span>
 	</button>
 
+	<?php
+		if (($_SESSION['DEBUG_MODE']) == "true") {
+			require $_SERVER['HESTIA'] . '/web/templates/pages/debug_panel.php';
+		}
+	?>
+
 </body>
 </html>

web/templates/header.php

@@ -20,7 +20,3 @@
 </head>
 
 <body class="body-<?=strtolower($TAB)?> lang-<?=$_SESSION['language']?>">
-<?php
-	if (($_SESSION['DEBUG_MODE']) == "true" ) {
-		require $_SERVER['HESTIA'] . '/web/templates/pages/debug_panel.php';
-	}

web/templates/pages/debug_panel.php

@@ -1,23 +1,31 @@
-<div class="debug-panel-header"><?=_('Debug mode is enabled.');?> <a href="javascript:elementHideShow('debug-panel')"><?=_('Show / Hide Panel');?></a></div>
-<div class="debug-panel-contents animate__animated animate__fadeIn" id="debug-panel" style="display:none;">
-	<?php
-		echo "<h3>Server Variables</h3>";
-		foreach ($_SERVER as $key=>$val)
-		echo "<b>".$key."= </b> ".$val."	";
-	?>
-	<?php
-		echo "<h3>Session Variables</h3>";
-		foreach ($_SESSION as $key=>$val)
-		echo "<b>".$key."= </b> ".$val."	";
-	?>
-	<?php
-		echo "<h3>POST Variables</h3>";
-		foreach ($_POST as $key=>$val)
-		echo "<b>".$key."= </b> ".$val."	";
-	?>
-	<?php
-		echo "<h3>GET Variables</h3>";
-		foreach ($_GET as $key=>$val)
-		echo "<b>".$key."= </b> ".$val."	";
-	?>
+<div class="debug-panel">
+	<a class="debug-panel-toggle" href="javascript:elementHideShow('debug-panel-content')">
+		<?= _("Toggle Debug Panel") ?>
+	</a>
+	<div id="debug-panel-content" class="debug-panel-content animate__animated animate__fadeIn" style="display:none;">
+		<?php
+			echo "<h3 class=\"u-mb10\">Server Variables</h3>";
+			foreach ($_SERVER as $key => $val) {
+				echo "<b>" . $key . "= </b> " . $val . " ";
+			}
+  	?>
+		<?php
+			echo "<h3 class=\"u-mb10 u-mt10\">Session Variables</h3>";
+			foreach ($_SESSION as $key => $val) {
+				echo "<b>" . $key . "= </b> " . $val . " ";
+			}
+  	?>
+		<?php
+			echo "<h3 class=\"u-mb10 u-mt10\">POST Variables</h3>";
+			foreach ($_POST as $key => $val) {
+				echo "<b>" . $key . "= </b> " . $val . " ";
+			}
+  	?>
+		<?php
+			echo "<h3 class=\"u-mb10 u-mt10\">GET Variables</h3>";
+			foreach ($_GET as $key => $val) {
+				echo "<b>" . $key . "= </b> " . $val . " ";
+			}
+  	?>
+	</div>
 </div>