Skip to content

Commit 0ae5c21

Browse files
AlecRustAlecRust
authored
Move debug panel to footer (hestiacp#3097)
1 parent 460da2c commit 0ae5c21

9 files changed

Lines changed: 135 additions & 133 deletions

File tree

‎web/css/src/themes/dark.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -981,11 +981,7 @@ li[aria-expanded="true"] a {
981981
color: #cacaca !important;
982982
}
983983

984-
.graph-rounded {
985-
border-radius: 8px;
986-
}
987-
988-
.debug-panel-contents {
984+
.debug-panel-content {
989985
background-color: #282828;
990986
}
991987

‎web/css/src/themes/default.css‎

Lines changed: 91 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
left: 0;
3838
top: 0;
3939
display: inline-block;
40-
z-index: 99;
40+
z-index: 2;
4141
}
4242
}
4343

@@ -221,6 +221,7 @@
221221

222222
.top-bar-notification-title {
223223
color: #9e9e9e;
224+
font-size: 0.85rem;
224225
font-weight: 600;
225226

226227
& a {
@@ -1783,6 +1784,69 @@ body.mobile .l-unit-toolbar__col--right {
17831784
opacity: 0.4;
17841785
}
17851786

1787+
.password-meter {
1788+
appearance: none;
1789+
display: block;
1790+
width: auto;
1791+
height: 3px;
1792+
background-color: #e7e7e7;
1793+
margin-left: 3px;
1794+
margin-right: 3px;
1795+
border-bottom-left-radius: 3px;
1796+
border-bottom-right-radius: 3px;
1797+
box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
1798+
}
1799+
1800+
.password-meter[value="1"] {
1801+
background: red;
1802+
}
1803+
1804+
.password-meter[value="2"] {
1805+
background: orange;
1806+
}
1807+
1808+
.password-meter[value="3"] {
1809+
background: yellow;
1810+
}
1811+
1812+
.password-meter[value="4"] {
1813+
background: green;
1814+
}
1815+
1816+
/* Webkit based browsers */
1817+
.password-meter[value="1"]::-webkit-meter-optimum-value {
1818+
background: red;
1819+
}
1820+
1821+
.password-meter[value="2"]::-webkit-meter-optimum-value {
1822+
background: orange;
1823+
}
1824+
1825+
.password-meter[value="3"]::-webkit-meter-optimum-value {
1826+
background: yellow;
1827+
}
1828+
1829+
.password-meter[value="4"]::-webkit-meter-optimum-value {
1830+
background: green;
1831+
}
1832+
1833+
/* Gecko based browsers */
1834+
.password-meter[value="1"]::-moz-meter-bar {
1835+
background: red;
1836+
}
1837+
1838+
.password-meter[value="2"]::-moz-meter-bar {
1839+
background: orange;
1840+
}
1841+
1842+
.password-meter[value="3"]::-moz-meter-bar {
1843+
background: yellow;
1844+
}
1845+
1846+
.password-meter[value="4"]::-moz-meter-bar {
1847+
background: green;
1848+
}
1849+
17861850
.hint {
17871851
color: #777;
17881852
font-size: 0.8rem;
@@ -2034,10 +2098,8 @@ body.mobile .l-unit-toolbar__col--right {
20342098
background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%);
20352099
}
20362100

2037-
.body-login .debug-panel-header,
2038-
.body-login .debug-panel-contents,
2039-
.body-reset .debug-panel-header,
2040-
.body-reset .debug-panel-contents {
2101+
.body-login .debug-panel,
2102+
.body-reset .debug-panel {
20412103
display: none;
20422104
}
20432105

@@ -2646,99 +2708,37 @@ li[aria-expanded="true"] a {
26462708
line-height: 1.2rem;
26472709
}
26482710

2649-
.debug-panel-header {
2650-
text-align: center;
2651-
border-bottom: 1px solid rgb(255 255 255 / 25%);
2652-
box-shadow: 0 -2px 4px rgb(0 0 0 / 40%);
2653-
font-size: 0.75rem;
2654-
padding: 10px;
2655-
background-color: yellow;
2656-
color: #000;
2657-
position: sticky;
2658-
top: 0;
2659-
z-index: 301;
2660-
}
2661-
2662-
.debug-panel-header a {
2663-
font-weight: 500;
2664-
color: #000;
2665-
}
2711+
/* Debug panel
2712+
========================================================================== */
26662713

2667-
.debug-panel-contents {
2668-
background-color: #fff;
2669-
font-size: 0.75rem;
2670-
padding: 18px;
2671-
position: absolute;
2672-
top: 0;
2673-
z-index: 300;
2674-
height: 250px;
2675-
overflow-x: hidden;
2676-
overflow-y: scroll;
2677-
border-bottom: 1px solid rgb(255 255 255 / 65%);
2678-
box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
2714+
.debug-panel {
2715+
position: fixed;
2716+
bottom: 0;
2717+
left: 0;
2718+
z-index: 4;
2719+
box-shadow: 0 0 5px rgb(0 0 0 / 40%);
26792720
}
26802721

2681-
.password-meter {
2682-
appearance: none;
2722+
.debug-panel-toggle {
26832723
display: block;
2684-
width: auto;
2685-
height: 3px;
2686-
background-color: #e7e7e7;
2687-
margin-left: 3px;
2688-
margin-right: 3px;
2689-
border-bottom-left-radius: 3px;
2690-
border-bottom-right-radius: 3px;
2691-
box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
2692-
}
2693-
2694-
.password-meter[value="1"] {
2695-
background: red;
2696-
}
2697-
2698-
.password-meter[value="2"] {
2699-
background: orange;
2700-
}
2701-
2702-
.password-meter[value="3"] {
2703-
background: yellow;
2704-
}
2705-
2706-
.password-meter[value="4"] {
2707-
background: green;
2708-
}
2709-
2710-
/* Webkit based browsers */
2711-
.password-meter[value="1"]::-webkit-meter-optimum-value {
2712-
background: red;
2713-
}
2714-
2715-
.password-meter[value="2"]::-webkit-meter-optimum-value {
2716-
background: orange;
2717-
}
2718-
2719-
.password-meter[value="3"]::-webkit-meter-optimum-value {
2720-
background: yellow;
2721-
}
2722-
2723-
.password-meter[value="4"]::-webkit-meter-optimum-value {
2724-
background: green;
2725-
}
2726-
2727-
/* Gecko based browsers */
2728-
.password-meter[value="1"]::-moz-meter-bar {
2729-
background: red;
2730-
}
2731-
2732-
.password-meter[value="2"]::-moz-meter-bar {
2733-
background: orange;
2734-
}
2724+
text-align: center;
2725+
font-size: 0.8rem;
2726+
font-weight: 500;
2727+
color: #000;
2728+
padding: 10px 15px;
2729+
background-color: #ff0;
27352730

2736-
.password-meter[value="3"]::-moz-meter-bar {
2737-
background: yellow;
2731+
&:hover {
2732+
background-color: #ee0;
2733+
}
27382734
}
27392735

2740-
.password-meter[value="4"]::-moz-meter-bar {
2741-
background: green;
2736+
.debug-panel-content {
2737+
background-color: #eee;
2738+
font-size: 0.75rem;
2739+
padding: 20px;
2740+
max-height: 300px;
2741+
overflow-y: auto;
27422742
}
27432743

27442744
/* Collapse component

‎web/css/src/themes/vestia.css‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,10 @@ strong {
3333
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
3434
}
3535

36-
.top-bar-notification-item {
37-
line-height: 1.1rem;
38-
39-
&.unseen {
40-
& .top-bar-notification-title,
41-
& .top-bar-notification-title a {
42-
color: #111;
43-
}
36+
.top-bar-notification-item.unseen {
37+
& .top-bar-notification-title,
38+
& .top-bar-notification-title a {
39+
color: #111;
4440
}
4541
}
4642

‎web/css/themes/dark.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/vestia.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/templates/footer.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,11 @@
5555
<span class="u-hidden"><?=_('Top');?></span>
5656
</button>
5757

58+
<?php
59+
if (($_SESSION['DEBUG_MODE']) == "true") {
60+
require $_SERVER['HESTIA'] . '/web/templates/pages/debug_panel.php';
61+
}
62+
?>
63+
5864
</body>
5965
</html>

‎web/templates/header.php‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,3 @@
2020
</head>
2121

2222
<body class="body-<?=strtolower($TAB)?> lang-<?=$_SESSION['language']?>">
23-
<?php
24-
if (($_SESSION['DEBUG_MODE']) == "true" ) {
25-
require $_SERVER['HESTIA'] . '/web/templates/pages/debug_panel.php';
26-
}

‎web/templates/pages/debug_panel.php‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
1-
<div class="debug-panel-header"><?=_('Debug mode is enabled.');?> <a href="javascript:elementHideShow('debug-panel')"><?=_('Show / Hide Panel');?></a></div>
2-
<div class="debug-panel-contents animate__animated animate__fadeIn" id="debug-panel" style="display:none;">
3-
<?php
4-
echo "<h3>Server Variables</h3>";
5-
foreach ($_SERVER as $key=>$val)
6-
echo "<b>".$key."= </b> ".$val." ";
7-
?>
8-
<?php
9-
echo "<h3>Session Variables</h3>";
10-
foreach ($_SESSION as $key=>$val)
11-
echo "<b>".$key."= </b> ".$val." ";
12-
?>
13-
<?php
14-
echo "<h3>POST Variables</h3>";
15-
foreach ($_POST as $key=>$val)
16-
echo "<b>".$key."= </b> ".$val." ";
17-
?>
18-
<?php
19-
echo "<h3>GET Variables</h3>";
20-
foreach ($_GET as $key=>$val)
21-
echo "<b>".$key."= </b> ".$val." ";
22-
?>
1+
<div class="debug-panel">
2+
<a class="debug-panel-toggle" href="javascript:elementHideShow('debug-panel-content')">
3+
<?= _("Toggle Debug Panel") ?>
4+
</a>
5+
<div id="debug-panel-content" class="debug-panel-content animate__animated animate__fadeIn" style="display:none;">
6+
<?php
7+
echo "<h3 class=\"u-mb10\">Server Variables</h3>";
8+
foreach ($_SERVER as $key => $val) {
9+
echo "<b>" . $key . "= </b> " . $val . " ";
10+
}
11+
?>
12+
<?php
13+
echo "<h3 class=\"u-mb10 u-mt10\">Session Variables</h3>";
14+
foreach ($_SESSION as $key => $val) {
15+
echo "<b>" . $key . "= </b> " . $val . " ";
16+
}
17+
?>
18+
<?php
19+
echo "<h3 class=\"u-mb10 u-mt10\">POST Variables</h3>";
20+
foreach ($_POST as $key => $val) {
21+
echo "<b>" . $key . "= </b> " . $val . " ";
22+
}
23+
?>
24+
<?php
25+
echo "<h3 class=\"u-mb10 u-mt10\">GET Variables</h3>";
26+
foreach ($_GET as $key => $val) {
27+
echo "<b>" . $key . "= </b> " . $val . " ";
28+
}
29+
?>
30+
</div>
2331
</div>

0 commit comments

Comments
 (0)