Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Status panel (.user-panel) visual adjustments #2040

Merged
merged 1 commit into from
Dec 31, 2021
Merged

Status panel (.user-panel) visual adjustments #2040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 69 additions & 72 deletions scripts/pi-hole/php/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,70 +326,67 @@ function pidofFTL()
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="img/logo.svg" alt="Pi-hole logo" width="45" height="90" style="height: 90px;">
<img src="img/logo.svg" alt="Pi-hole logo">
</div>
<div class="pull-left info">
<p>Status</p>
<?php
$pistatus = pihole_execute('status web');
if (isset($pistatus[0])) {
$pistatus = intval($pistatus[0]);
} else {
$pistatus = null;
}
if ($pistatus == 53) {
echo '<span id="status"><i class="fa fa-circle text-green-light"></i> Active</span>';
} elseif ($pistatus == 0) {
echo '<span id="status"><i class="fa fa-circle text-red"></i> Offline</span>';
} elseif ($pistatus == -1) {
echo '<span id="status"><i class="fa fa-circle text-red"></i> DNS service not running</span>';
} elseif ($pistatus == -2 || is_null($pistatus)) {
echo '<span id="status"><i class="fa fa-circle text-red"></i> Unknown</span>';
} else {
echo '<span id="status"><i class="fa fa-circle text-orange"></i> DNS service on port '.$pistatus.'</span>';
}
?>
<br/>
<?php $tempcolor = "text-vivid-blue";
if ($celsius > $temperaturelimit) {
$tempcolor = "text-red";}
echo "<span id=\"temperature\"><i class=\"fa fa-fire ".$tempcolor."\"></i>";
?>
<?php if ($celsius >= -273.15) {
echo "Temp:&nbsp;<span id=\"rawtemp\" hidden>" .$celsius. "</span><span id=\"tempdisplay\"></span>";
} else {
echo "No temp sensor found<span id=\"tempdisplay\"></span>";}
?></span>
<?php
$pistatus = pihole_execute('status web');
if (isset($pistatus[0])) {
$pistatus = intval($pistatus[0]);
} else {
$pistatus = null;
}
if ($pistatus == 53) {
echo '<span id="status"><i class="fa fa-w fa-circle text-green-light"></i> Active</span>';
} elseif ($pistatus == 0) {
echo '<span id="status"><i class="fa fa-w fa-circle text-red"></i> Offline</span>';
} elseif ($pistatus == -1) {
echo '<span id="status"><i class="fa fa-w fa-circle text-red"></i> DNS service not running</span>';
} elseif ($pistatus == -2 || is_null($pistatus)) {
echo '<span id="status"><i class="fa fa-w fa-circle text-red"></i> Unknown</span>';
} else {
echo '<span id="status"><i class="fa fa-w fa-circle text-orange"></i> DNS service on port '.$pistatus.'</span>';
}
?>
<br/>
<?php
echo '<span title="Detected $nproc cores"><i class="fa fa-w fa-circle ';
if ($loaddata[0] > $nproc) {
echo "text-red";
} else {
echo "text-green-light";
}
echo '"></i> Load:&nbsp;&nbsp;' . $loaddata[0] . "&nbsp;&nbsp;" . $loaddata[1] . "&nbsp;&nbsp;". $loaddata[2] . "</span>";
?>
<br/>
<?php
echo "<span title=\"Detected $nproc cores\"><i class=\"fa fa-circle ";
if ($loaddata[0] > $nproc) {
echo "text-red";
}
else
{
echo "text-green-light";
}
echo "\"></i> Load:&nbsp;&nbsp;" . $loaddata[0] . "&nbsp;&nbsp;" . $loaddata[1] . "&nbsp;&nbsp;". $loaddata[2] . "</span>";
echo '<span><i class="fa fa-w fa-circle ';
if ($memory_usage > 0.75 || $memory_usage < 0.0) {
echo "text-red";
} else {
echo "text-green-light";
}
if($memory_usage > 0.0) {
echo '"></i> Memory usage:&nbsp;&nbsp;' . sprintf("%.1f",100.0*$memory_usage) . "&thinsp;%</span>";
} else {
echo '"></i> Memory usage:&nbsp;&nbsp; N/A</span>';
}
?>
<br/>
<?php
echo "<span><i class=\"fa fa-circle ";
if ($memory_usage > 0.75 || $memory_usage < 0.0) {
echo "text-red";
}
else
{
echo "text-green-light";
}
if($memory_usage > 0.0)
{
echo "\"></i> Memory usage:&nbsp;&nbsp;" . sprintf("%.1f",100.0*$memory_usage) . "&thinsp;%</span>";
}
else
{
echo "\"></i> Memory usage:&nbsp;&nbsp; N/A</span>";
}
$tempcolor = "text-vivid-blue";
if ($celsius > $temperaturelimit) {
$tempcolor = "text-red";
}
echo '<span id="temperature"><i class="fa fa-w fa-fire '.$tempcolor.'" style="width: 1em !important"></i> ';

if ($celsius >= -273.15) {
echo 'Temp:&nbsp;<span id="rawtemp" hidden>' .$celsius. '</span>';
} else {
echo "No temp sensor found";
}
echo '<span id="tempdisplay"></span></span>';
?>
</div>
</div>
Expand All @@ -416,19 +413,19 @@ function pidofFTL()
<!-- Home Page -->
<li<?php if($scriptname === "index.php"){ ?> class="active"<?php } ?>>
<a href="index.php">
<i class="fa fa-fw menu-icon fa-home"></i> Dashboard
<i class="fa fa-fw menu-icon fa-home"></i> <span>Dashboard</span>
</a>
</li>
<?php if($auth){ ?>
<!-- Query Log -->
<li<?php if($scriptname === "queries.php"){ ?> class="active"<?php } ?>>
<a href="queries.php">
<i class="fa fa-fw menu-icon fa-file-alt"></i> Query Log
<i class="fa fa-fw menu-icon fa-file-alt"></i> <span>Query Log</span>
</a>
</li>
<li class="treeview<?php if($scriptname === "db_queries.php" || $scriptname === "db_lists.php" || $scriptname === "db_graph.php"){ ?> active<?php } ?>">
<a href="#">
<i class="fa fa-fw menu-icon fa-clock"></i> Long-term data
<i class="fa fa-fw menu-icon fa-clock"></i> <span>Long-term data</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
Expand All @@ -454,19 +451,19 @@ function pidofFTL()
<!-- Whitelist -->
<li<?php if($scriptname === "whitelist"){ ?> class="active"<?php } ?>>
<a href="groups-domains.php?type=white">
<i class="fa fa-fw menu-icon fa-check-circle"></i> <span>Whitelist
<i class="fa fa-fw menu-icon fa-check-circle"></i> <span>Whitelist</span>
</a>
</li>
<!-- Blacklist -->
<li<?php if($scriptname === "blacklist"){ ?> class="active"<?php } ?>>
<a href="groups-domains.php?type=black">
<i class="fa fa-fw menu-icon fa-ban"></i> <span>Blacklist
<i class="fa fa-fw menu-icon fa-ban"></i> <span>Blacklist</span>
</a>
</li>
<!-- Group Management -->
<li class="treeview<?php if (in_array($scriptname, array("groups.php", "groups-adlists.php", "groups-clients.php", "groups-domains.php"))){ ?> active<?php } ?>">
<a href="#">
<i class="fa fa-fw menu-icon fa-users-cog"></i> Group Management
<i class="fa fa-fw menu-icon fa-users-cog"></i> <span>Group Management</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
Expand Down Expand Up @@ -497,10 +494,10 @@ function pidofFTL()
<!-- Toggle -->
<li id="pihole-disable" class="treeview"<?php if ($pistatus == "0") { ?> hidden<?php } ?>>
<a href="#">
<i class="fa fa-fw menu-icon fa-stop"></i> <span>Disable&nbsp;&nbsp;&nbsp;<span id="flip-status-disable"></span></span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
<i class="fa fa-fw menu-icon fa-stop"></i> Disable&nbsp;&nbsp;&nbsp;<span id="flip-status-disable"></span>
</a>
<ul class="treeview-menu">
<li>
Expand All @@ -525,11 +522,11 @@ function pidofFTL()
</li>
<li>
<a href="#" id="pihole-disable-cst" data-toggle="modal" data-target="#customDisableModal">
<i class="fa fa-fw menu-icon fa-clock"></i> Custom time
<i class="fa fa-fw menu-icon fa-clock"></i> <span>Custom time</span>
</a>
</li>
</ul>
<!-- <a href="#" id="flip-status"><i class="fa fa-stop"></i> Disable</a> -->
<!-- <a href="#" id="flip-status"><i class="fa fa-stop"></i> <span>Disable</span></a> -->
</li>
<li id="pihole-enable" class="treeview"<?php if (!in_array($pistatus,["0","-1","-2"])) { ?> hidden<?php } ?>>
<a href="#">
Expand All @@ -542,7 +539,7 @@ function pidofFTL()
<!-- Tools -->
<li class="treeview<?php if (in_array($scriptname, array("messages.php", "gravity.php", "queryads.php", "auditlog.php", "taillog.php", "taillog-FTL.php", "debug.php", "network.php"))){ ?> active<?php } ?>">
<a href="#">
<i class="fa fa-fw menu-icon fa-folder"></i> Tools
<i class="fa fa-fw menu-icon fa-folder"></i> <span>Tools</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
Expand Down Expand Up @@ -601,13 +598,13 @@ function pidofFTL()
<!-- Settings -->
<li<?php if($scriptname === "settings.php"){ ?> class="active"<?php } ?>>
<a href="settings.php">
<i class="fa fa-fw menu-icon fa-cogs"></i> Settings
<i class="fa fa-fw menu-icon fa-cogs"></i> <span>Settings</span>
</a>
</li>
<!-- Local DNS Records -->
<li class="treeview <?php if(in_array($scriptname, array("dns_records.php", "cname_records.php"))){ ?>active<?php } ?>">
<a href="#">
<i class="fa fa-fw menu-icon fa-address-book"></i> Local DNS
<i class="fa fa-fw menu-icon fa-address-book"></i> <span>Local DNS</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
Expand All @@ -631,7 +628,7 @@ function pidofFTL()
if(strlen($pwhash) > 0) { ?>
<li>
<a href="?logout">
<i class="fa fa-fw menu-icon fa-user-times"></i> Logout
<i class="fa fa-fw menu-icon fa-user-times"></i> <span>Logout</span>
</a>
</li>
<?php } ?>
Expand All @@ -642,20 +639,20 @@ function pidofFTL()
if(strlen($pwhash) > 0 && !$auth) { ?>
<li<?php if($scriptname === "login"){ ?> class="active"<?php } ?>>
<a href="index.php?login">
<i class="fa fa-fw menu-icon fa-user"></i> Login
<i class="fa fa-fw menu-icon fa-user"></i> <span>Login</span>
</a>
</li>
<?php } ?>
<!-- Donate -->
<li>
<a href="https://pi-hole.net/donate/" rel="noopener" target="_blank">
<i class="fab fa-fw menu-icon fa-paypal"></i> Donate
<i class="fab fa-fw menu-icon fa-paypal"></i> <span>Donate</span>
</a>
</li>
<!-- Docs -->
<li>
<a href="https://docs.pi-hole.net/" rel="noopener" target="_blank">
<i class="fa fa-fw menu-icon fa-question-circle"></i> Documentation
<i class="fa fa-fw menu-icon fa-question-circle"></i> <span>Documentation</span>
</a>
</li>
</ul>
Expand Down
34 changes: 32 additions & 2 deletions style/pi-hole.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,9 +271,39 @@
padding: 0 12px;
}

.user-panel {
display: flex;
align-items: center;
padding: 10px 0;
}

.user-panel .image {
flex: 1 0 25%;
margin: 0 10px;
text-align: center;
}

.user-panel > .image > img {
max-width: 52px;
min-width: 30px;
}

.user-panel > .info {
padding: 0;
position: relative;
line-height: 1.05;
flex: 1 1 auto;
left: auto;
}

.user-panel > .info > p {
margin-bottom: 6px;
}

.user-panel > .info > span {
padding-right: 5px;
margin-top: 3px;
display: inline-block;
padding: 0;
margin: 2px 0;
font-size: 11px;
}

Expand Down
25 changes: 10 additions & 15 deletions style/themes/lcars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,41 +843,36 @@ label {

/*--- user-panel ---*/
.user-panel {
padding: 30px 10%;
padding: 30px 0;
background: #cce6ff;
border-radius: 75px 0 0;
z-index: 0;
}

.user-panel::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 88px;
z-index: -1;
background-image: linear-gradient(to right, rgb(204, 230, 255) 70%, rgba(204, 230, 255, 0) 100%);
}

.user-panel > .info,
.user-panel > .info > a {
color: #000;
left: auto;
right: 10%;
z-index: -2;
}

.user-panel > .info > span {
margin: 0;
}

.user-panel .pull-left.image {
margin: 20px 0 0;
margin-top: 20px;
}

.user-panel .fa-circle path {
stroke: rgba(0, 0, 0, 0.5);
stroke-width: 5%;
}

.user-panel .svg-inline--fa {
margin-right: 2px;
}

.user-panel svg.text-orange,
.user-panel svg.text-red {
animation: fire 1s ease-in-out 0s infinite;
Expand Down