pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2298 from pi-hole/test_topmenu

Browse Source 
Improve top right menu and sidebar
This commit is contained in:
RD WebDesign
2022-08-20 17:47:09 -03:00
committed by GitHub
parent c34c7d4d0e 5b4f8d87d6
commit 5e23f1996a
11 changed files with 268 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
-10
View File
@@ -90,14 +90,6 @@ require_once 'scripts/pi-hole/php/gravity.php';
</div>
</div>
</div>
<?php
// If the user is logged in, then we show the more detailed index page.
// Even if we would include them here anyhow, there would be nothing to
// show since the API will respect the privacy of the user if he defines
// a password
if ($auth) {
?>
<div class="row">
<div class="col-md-12">
<div class="box" id="clients">
@@ -285,8 +277,6 @@ if ($auth) {
<!-- /.col -->
</div>
<!-- /.row -->
<?php
} ?>
<script src="scripts/pi-hole/js/index.js?v=<?php echo $cacheVer; ?>"></script>
scripts/pi-hole/js/footer.js
-38
View File
@@ -255,44 +255,6 @@ $("#pihole-disable-custom").on("click", function (e) {
piholeChange("disable", custVal);
});
// Session timer
function updateSessionTimer() {
start = new Date();
start.setSeconds(start.getSeconds() + sessionvalidity);
}
var sessionTimerCounter, sessionvalidity, start;
var sessiontimer = document.getElementById("sessiontimer");
if (sessiontimer) {
sessionTimerCounter = document.getElementById("sessiontimercounter");
sessionvalidity = parseInt(sessionTimerCounter.textContent, 10);
start = new Date();
if (sessionvalidity > 0) {
// setSeconds will correctly handle wrap-around cases
updateSessionTimer();
setInterval(function () {
var current = new Date();
var totalseconds = (start - current) / 1000;
var minutes = Math.floor(totalseconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
var seconds = Math.floor(totalseconds % 60);
if (seconds < 10) {
seconds = "0" + seconds;
}
sessionTimerCounter.textContent = totalseconds > 0 ? minutes + ":" + seconds : "-- : --";
}, 1000);
} else {
sessiontimer.style.display = "none";
}
}
// Handle Ctrl + Enter button on Login page
$(document).keypress(function (e) {
if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey && $("#loginpw").is(":focus")) {
scripts/pi-hole/js/index.js
+1 -3
View File
@@ -5,7 +5,7 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
/* global utils:false, Chart:false, updateSessionTimer:false */
/* global utils:false, Chart:false */
// Define global variables
var timeLineChart, clientsChart;
@@ -774,8 +774,6 @@ function updateSummaryData(runOnce) {
};
$.getJSON("api.php?summaryRaw", function (data) {
updateSessionTimer();
if ("FTLnotrunning" in data) {
data.dns_queries_today = "Lost";
data.ads_blocked_today = "connection";
scripts/pi-hole/php/header.php
+8 -5
View File
@@ -38,17 +38,12 @@ $cacheVer = filemtime(__FILE__);
<!-- Theme styles -->
<?php if ($theme == 'default-light') { ?>
<meta name="theme-color" content="#367fa9">
<link rel="stylesheet" href="style/vendor/SourceSansPro/SourceSansPro.css?v=<?php echo $cacheVer; ?>">
<?php } elseif ($theme == 'default-dark') { ?>
<meta name="theme-color" content="#272c30">
<link rel="stylesheet" href="style/vendor/SourceSansPro/SourceSansPro.css?v=<?php echo $cacheVer; ?>">
<?php } elseif ($theme == 'default-darker') { ?>
<meta name="theme-color" content="#2e6786">
<link rel="stylesheet" href="style/vendor/SourceSansPro/SourceSansPro.css?v=<?php echo $cacheVer; ?>">
<?php } elseif ($theme == 'lcars') { ?>
<meta name="theme-color" content="#4488FF">
<link rel="stylesheet" href="style/vendor/fonts/ubuntu-mono/ubuntu-mono.css?v=<?php echo $cacheVer; ?>">
<link rel="stylesheet" href="style/vendor/fonts/antonio/antonio.css?v=<?php echo $cacheVer; ?>">
<?php } ?>
<?php if ($darkmode) { ?>
@@ -57,6 +52,14 @@ $cacheVer = filemtime(__FILE__);
</style>
<?php } ?>
<!-- Theme fonts -->
<?php if ($theme == 'lcars') { ?>
<link rel="stylesheet" href="style/vendor/fonts/ubuntu-mono/ubuntu-mono.css?v=<?php echo $cacheVer; ?>">
<link rel="stylesheet" href="style/vendor/fonts/antonio/antonio.css?v=<?php echo $cacheVer; ?>">
<?php } else { ?>
<link rel="stylesheet" href="style/vendor/SourceSansPro/SourceSansPro.css?v=<?php echo $cacheVer; ?>">
<?php } ?>
<!-- Common styles -->
<link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap.min.css?v=<?php echo $cacheVer; ?>">
<?php if ($auth) { ?>
scripts/pi-hole/php/header_authenticated.php
+26 -33
View File
@@ -158,6 +158,17 @@ if ($auth) {
<div id="enableTimer" hidden><?php if (file_exists('../custom_disable_timer')) {
echo file_get_contents('../custom_disable_timer');
} ?></div>
<!-- Pi-hole SVG icon - used in topmenu and sidebar -->
<svg display="none">
<symbol id="pihole-svg-logo" viewBox="0 0 200 200">
<path d="M88.387 61.745C63.6 59.101 38.632 40.367 36.66.728c38.462 0 59.03 22.769 61.017 58.846 7.273-43.275 41.366-38.203 41.366-38.203 1.619 24.526-18.52 39.394-41.366 40.632C91.26 48.48 52.813 15.305 52.813 15.305a.108.108 0 0 0-.169.122c0 .001 37.102 32.32 35.743 46.318" fill="currentcolor"/>
<path d="M100 199.272c-2.399-.137-24.785-.993-26.145-26.145-1.1-15.28 10.972-26.543 10.972-41.38-2.736-36.994-52.307-32.41-52.307 0a30.472 30.472 0 0 0 8.91 21.608l36.933 36.949a30.466 30.466 0 0 0 21.607 8.908" fill="currentColor"/>
<path d="M167.48 131.762c-.137 2.399-.994 24.785-26.146 26.145-15.28 1.1-26.558-10.972-41.38-10.972-36.996 2.736-32.41 52.292 0 52.292a30.468 30.468 0 0 0 21.607-8.91l36.965-36.933a30.466 30.466 0 0 0 8.908-21.607" fill="currentColor"/>
<path d="M100 64.282c2.399.137 24.786.992 26.146 26.145 1.1 15.281-10.972 26.543-10.972 41.38 2.735 36.995 52.292 32.41 52.292 0a30.465 30.465 0 0 0-8.91-21.607l-36.949-36.965A30.468 30.468 0 0 0 100 64.326" fill="currentColor"/>
<path d="M32.642 131.762c.137-2.4.994-24.786 26.145-26.146 15.28-1.101 26.558 10.972 41.38 10.972 36.996-2.781 32.411-52.292 0-52.292a30.468 30.468 0 0 0-21.607 8.91l-36.964 36.949a30.472 30.472 0 0 0-8.91 21.607" fill="currentColor"/>
</symbol>
</svg>
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
@@ -171,7 +182,7 @@ if ($auth) {
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle-svg" data-toggle="push-menu" role="button">
<i aria-hidden="true" class="fa fa-bars"></i>
<i aria-hidden="true" class="fa fa-angle-double-left"></i>
<span class="sr-only">Toggle navigation</span>
<span class="warning-count hidden" id="top-warning-count"></span>
</a>
@@ -179,14 +190,13 @@ if ($auth) {
<ul class="nav navbar-nav">
<li<?php echo !$hostname ? ' class="hidden"' : ''; ?>>
<p class="navbar-text">
<span class="hidden-xs hidden-sm">hostname:</span>
<span class="hidden-xs">hostname:</span>
<code><?php echo $hostname; ?></code>
</p>
</li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="img/logo.svg" class="user-image" alt="Pi-hole logo" style="border-radius: 0" width="25" height="25">
<span class="hidden-xs">Pi-hole</span>
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu">
<!-- User image -->
@@ -194,40 +204,23 @@ if ($auth) {
<img src="img/logo.svg" alt="Pi-hole Logo" style="border: 0" width="90" height="90">
<p>
Open Source Ad Blocker
<small>Designed For Raspberry Pi</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a class="btn-link" href="https://github.com/pi-hole" rel="noopener" target="_blank">GitHub</a>
</div>
<div class="col-xs-4 text-center">
<a class="btn-link" href="https://pi-hole.net/" rel="noopener" target="_blank">Website</a>
</div>
<div class="col-xs-4 text-center">
<a class="btn-link" href="https://github.com/pi-hole/pi-hole/releases" rel="noopener" target="_blank">Updates</a>
</div>
<div id="sessiontimer" class="col-xs-12 text-center">
<strong>Session is valid for <span id="sessiontimercounter">
<?php if ($auth && strlen($pwhash) > 0) {
echo $maxlifetime;
} else {
echo '0';
} ?>
</span></strong>
</div>
</div>
</li>
<!-- <li class="user-body"></li> -->
<!-- Menu Footer -->
<li class="user-footer">
<!-- Donate Button -->
<div class="text-center">
<a class="btn btn-primary btn-lg donate" href="https://pi-hole.net/donate/" rel="noopener" target="_blank">
<i class="fas fa-fw menu-icon fa-donate"></i> Donate
</a>
</div>
<a class="btn-link" href="https://pi-hole.net/" rel="noopener" target="_blank">
<svg class="svg-inline--fa fa-fw menu-icon" style="height: 1.25em"><use xlink:href="#pihole-svg-logo"/></svg>
Pi-hole Website
</a>
<hr>
<a class="btn-link" href="https://docs.pi-hole.net/" rel="noopener" target="_blank"><i class="fa fa-fw menu-icon fa-question-circle"></i> Documentation</a>
<a class="btn-link" href="https://discourse.pi-hole.net/" rel="noopener" target="_blank"><i class="fa fa-fw menu-icon fab fa-discourse"></i> Pi-hole Forum</a>
<a class="btn-link" href="https://github.com/pi-hole" rel="noopener" target="_blank"><i class="fa-fw menu-icon fab fa-github"></i> GitHub</a>
<a class="btn-link" href="https://discourse.pi-hole.net/c/announcements/5" rel="noopener" target="_blank"><i class="fa-fw menu-icon fa fa-regular fa-rocket"></i> Pi-hole Releases</a>
<hr>
<a class="btn-link" href="logout.php" rel="noopener"><i class="fa fa-fw menu-icon fa-sign-out-alt"></i> Log out</a>
</li>
</ul>
</li>
scripts/pi-hole/php/sidebar.php
+32 -93
View File
@@ -63,54 +63,24 @@
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<?php
if (!$auth && (!isset($indexpage) || isset($_GET['login']))) {
$scriptname = 'login';
}
?>
<ul class="sidebar-menu" data-widget="tree">
<li class="header text-uppercase">Main</li>
<!-- Home Page -->
<li<?php if ($scriptname === 'index.php') { ?> class="active"<?php } ?>>
<li class="menu-main<?php if ($scriptname === 'index.php') { ?> active<?php } ?>">
<a href="index.php">
<i class="fa fa-fw menu-icon fa-home"></i> <span>Dashboard</span>
</a>
</li>
<!-- Logout -->
<?php
// Show Logout button if $auth is set and authorization is required
if (strlen($pwhash) > 0 && $auth) {
?>
<li>
<a href="logout.php">
<i class="fa fa-fw menu-icon fa-sign-out-alt"></i> <span>Logout</span>
</a>
</li>
<?php
} ?>
<!-- Login -->
<?php
// Show Login button if $auth is *not* set and authorization is required
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> <span>Login</span>
</a>
</li>
<?php
} ?>
<?php if ($auth) { ?>
<li class="header text-uppercase">Analysis</li>
<!-- Query Log -->
<li<?php if ($scriptname === 'queries.php') { ?> class="active"<?php } ?>>
<li class="menu-analysis<?php if ($scriptname === 'queries.php') { ?> active<?php } ?>">
<a href="queries.php">
<i class="fa fa-fw menu-icon fa-file-alt"></i> <span>Query Log</span>
</a>
</li>
<!-- Long-term database -->
<li class="treeview<?php if ($scriptname === 'db_queries.php' || $scriptname === 'db_lists.php' || $scriptname === 'db_graph.php') { ?> active<?php } ?>">
<li class="menu-analysis 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-history"></i> <span>Long-term Data</span>
<span class="pull-right-container">
@@ -118,17 +88,17 @@
</span>
</a>
<ul class="treeview-menu">
<li<?php if ($scriptname === 'db_graph.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'db_graph.php') { ?> active<?php } ?>">
<a href="db_graph.php">
<i class="fa fa-fw menu-icon fa-chart-bar"></i> Graphics
</a>
</li>
<li<?php if ($scriptname === 'db_queries.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'db_queries.php') { ?> active<?php } ?>">
<a href="db_queries.php">
<i class="fa fa-fw menu-icon fa-file-alt"></i> Query Log
</a>
</li>
<li<?php if ($scriptname === 'db_lists.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'db_lists.php') { ?> active<?php } ?>">
<a href="db_lists.php">
<i class="fa fa-fw menu-icon fa-list"></i> Top Lists
</a>
@@ -138,30 +108,31 @@
<li class="header text-uppercase">Group Management</li>
<!-- Group Management -->
<li<?php if ($scriptname === 'groups.php') { ?> class="active"<?php } ?>>
<li class="menu-group<?php if ($scriptname === 'groups.php') { ?> active<?php } ?>">
<a href="groups.php">
<i class="fa fa-fw menu-icon fa-user-friends"></i> <span>Groups</span>
</a>
</li>
<li<?php if ($scriptname === 'groups-clients.php') { ?> class="active"<?php } ?>>
<li class="menu-group<?php if ($scriptname === 'groups-clients.php') { ?> active<?php } ?>">
<a href="groups-clients.php">
<i class="fa fa-fw menu-icon fa-laptop"></i> <span>Clients</span>
</a>
</li>
<li<?php if ($scriptname === 'groups-domains.php') { ?> class="active"<?php } ?>>
<li class="menu-group<?php if ($scriptname === 'groups-domains.php') { ?> active<?php } ?>">
<a href="groups-domains.php">
<i class="fa fa-fw menu-icon fa-list"></i> <span>Domains</span>
</a>
</li>
<li<?php if ($scriptname === 'groups-adlists.php') { ?> class="active"<?php } ?>>
<li class="menu-group<?php if ($scriptname === 'groups-adlists.php') { ?> active<?php } ?>">
<a href="groups-adlists.php">
<i class="fa fa-fw menu-icon fa-shield-alt"></i> <span>Adlists</span>
</a>
</li>
<li class="header text-uppercase">DNS Control</li>
<!-- Local DNS Records -->
<!-- Enable/Disable Blocking -->
<li id="pihole-disable" class="treeview"<?php if ($pistatus == '0') { ?> hidden<?php } ?>>
<li id="pihole-disable" class="menu-dns treeview"<?php if ($pistatus == '0') { ?> hidden<?php } ?>>
<a href="#">
<i class="fa fa-fw menu-icon fa-stop"></i> <span>Disable Blocking&nbsp;&nbsp;&nbsp;<span id="flip-status-disable"></span></span>
<span class="pull-right-container">
@@ -197,7 +168,7 @@
</ul>
<!-- <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, array('0', '-1', '-2'))) { ?> hidden<?php } ?>>
<li id="pihole-enable" class="menu-dns treeview"<?php if (!in_array($pistatus, array('0', '-1', '-2'))) { ?> hidden<?php } ?>>
<a href="#">
<i class="fa fa-fw menu-icon fa-play"></i>
<span id="enableLabel">Enable Blocking&nbsp;&nbsp;&nbsp;
@@ -205,8 +176,7 @@
</span>
</a>
</li>
<!-- Local DNS Records -->
<li class="treeview <?php if (in_array($scriptname, array('dns_records.php', 'cname_records.php'))) { ?>active<?php } ?>">
<li class="menu-dns 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> <span>Local DNS</span>
<span class="pull-right-container">
@@ -214,12 +184,12 @@
</span>
</a>
<ul class="treeview-menu">
<li<?php if ($scriptname === 'dns_records.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'dns_records.php') { ?> active<?php } ?>">
<a href="dns_records.php">
<i class="fa fa-fw menu-icon fa-address-book"></i> DNS Records
</a>
</li>
<li<?php if ($scriptname === 'cname_records.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'cname_records.php') { ?> active<?php } ?>">
<a href="cname_records.php">
<i class="fa fa-fw menu-icon fa-address-book"></i> CNAME Records
</a>
@@ -229,7 +199,7 @@
<li class="header text-uppercase">System</li>
<!-- 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 } ?>">
<li class="menu-system 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-tools"></i> <span>Tools</span>
<span class="warning-count hidden"></span>
@@ -239,70 +209,52 @@
</a>
<ul class="treeview-menu">
<!-- Pi-hole diagnosis -->
<li<?php if ($scriptname === 'messages.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'messages.php') { ?> active<?php } ?>">
<a href="messages.php">
<i class="fa fa-fw menu-icon fa-file-medical-alt"></i> Pi-hole diagnosis
<span class="pull-right-container warning-count hidden"></span>
</a>
</li>
<!-- Run gravity.sh -->
<li<?php if ($scriptname === 'gravity.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'gravity.php') { ?> active<?php } ?>">
<a href="gravity.php">
<i class="fa fa-fw menu-icon fa-arrow-circle-down"></i> Update Gravity
</a>
</li>
<!-- Query Lists -->
<li<?php if ($scriptname === 'queryads.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'queryads.php') { ?> active<?php } ?>">
<a href="queryads.php">
<i class="fa fa-fw menu-icon fa-search"></i> Search Adlists
</a>
</li>
<!-- Audit log -->
<li<?php if ($scriptname === 'auditlog.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'auditlog.php') { ?> active<?php } ?>">
<a href="auditlog.php">
<i class="fa fa-fw menu-icon fa-balance-scale"></i> Audit log
</a>
</li>
<!-- Tail pihole.log -->
<li<?php if ($scriptname === 'taillog.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'taillog.php') { ?> active<?php } ?>">
<a href="taillog.php">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" height="14" viewBox="0 0 200 200" class="svg-inline--fa custom-menu-icon fa-w-20 fa-fw menu-icon">
<g>
<linearGradient id="svg_1_1_" gradientUnits="userSpaceOnUse" x1="-317.0903" y1="393.5137" x2="-316.0898" y2="393.5137" gradientTransform="matrix(94.8803 0 0 -56.7359 30129.9492 22362.8691)">
<stop offset="0.051" style="stop-color:currentColor;stop-opacity:0.6"/>
<stop offset="0.95" style="stop-color:currentColor"/>
</linearGradient>
<path id="svg_1" fill="url(#svg_1_1_)" d="M89.247,64.579C66.298,62.131,43.179,44.785,41.354,8.083 c35.612,0,54.656,21.082,56.496,54.486c6.734-40.069,38.301-35.372,38.301-35.372c1.499,22.708-17.148,36.475-38.301,37.621 c-5.942-12.521-41.541-43.238-41.541-43.238c-0.042-0.036-0.104-0.03-0.14,0.011c-0.024,0.028-0.03,0.067-0.016,0.102 C56.153,21.694,90.506,51.619,89.247,64.579"/>
<path id="svg_2" opacity="0.6" fill="currentColor" d="M100,191.916c-2.221-0.127-22.949-0.92-24.208-24.208 c-1.019-14.148,10.159-24.576,10.159-38.314c-2.533-34.253-48.431-30.009-48.431,0c-0.019,7.5,2.949,14.699,8.249,20.007 l34.197,34.211c5.307,5.299,12.506,8.268,20.006,8.248"/>
<path id="svg_3" fill="currentColor" d="M162.48,129.408c-0.127,2.221-0.92,22.949-24.209,24.208 c-14.148,1.019-24.59-10.159-38.314-10.159c-34.254,2.533-30.009,48.417,0,48.417c7.5,0.019,14.699-2.949,20.006-8.249 l34.226-34.197c5.299-5.307,8.268-12.506,8.248-20.006"/>
<path id="svg_4" opacity="0.6" fill="currentColor" d="M100,66.928c2.221,0.127,22.949,0.919,24.209,24.208 c1.018,14.149-10.159,24.576-10.159,38.314c2.532,34.254,48.417,30.009,48.417,0c0.019-7.5-2.949-14.698-8.25-20.006 l-34.211-34.226c-5.307-5.3-12.506-8.268-20.006-8.249"/>
<path id="svg_5" fill="currentColor" d="M37.633,129.408c0.127-2.222,0.92-22.949,24.208-24.209 c14.148-1.019,24.59,10.159,38.314,10.159c34.254-2.575,30.009-48.417,0-48.417c-7.5-0.019-14.699,2.949-20.006,8.249 l-34.226,34.212c-5.299,5.307-8.268,12.506-8.249,20.006"/>
</g>
</svg>
<svg class="svg-inline--fa fa-fw menu-icon" style="height: 1.25em"><use xlink:href="#pihole-svg-logo"/></svg>
Tail pihole.log
</a>
</li>
<!-- Tail FTL.log -->
<li<?php if ($scriptname === 'taillog-FTL.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'taillog-FTL.php') { ?> active<?php } ?>">
<a href="taillog-FTL.php">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" height="14" viewBox="0 0 400 340" class="svg-inline--fa custom-menu-icon fa-w-20 fa-fw menu-icon">
<g fill="currentColor">
<path opacity=".6" d="M42.315 11h111.078l-7.381 31.378H34.898L42.315 11z"/>
<path d="M237.368 42.207q-13.098 62.242-26.23 124.486h-37.354q13.135-62.244 26.23-124.486h-39.652l7.381-31.174h132.055l-7.639 31.174h-54.791zm87.03 94.016L351.124 11h-37.18q-16.584 77.846-33.199 155.693h103.356v-30.47h-59.703zM32.428 67.509l-22.316 99.184h31.807l16.068-67.908h59.41l7.381-31.326-92.35.05z"/>
<path opacity=".6" d="M10 186.2a283.868 283.868 0 0 1 42.976-2.992c26.697 0 44.014 4.806 57.58 15.023 14.604 10.853 23.782 28.17 23.782 52.991 0 26.914-9.798 45.487-23.364 56.96-14.806 12.31-37.348 18.154-64.882 18.154A276.442 276.442 0 0 1 10 324.29V186.2zm31.922 114.726a57.564 57.564 0 0 0 11.054.636c28.79.201 47.564-15.659 47.564-49.24.217-29.208-16.899-44.65-44.231-44.65a66.665 66.665 0 0 0-14.387 1.241v92.013zm113.283 24.015V184.325h37.209l29.146 51.595a408.098 408.098 0 0 1 22.945 48.06h.62a523.847 523.847 0 0 1-2.697-58.618v-41.037h29.208V324.94h-33.394l-30.046-54.262a523.459 523.459 0 0 1-24.402-49.611l-.62.201c.821 18.605 1.24 38.402 1.24 61.348v42.355l-29.209-.03zm145.004-32.759a81.099 81.099 0 0 0 35.27 8.76c14.605 0 22.326-6.047 22.326-15.225 0-8.76-6.682-13.767-23.581-19.829-23.364-8.123-38.604-21.069-38.604-41.518 0-23.984 20.03-42.355 53.208-42.355a86.246 86.246 0 0 1 35.89 7.1l-7.1 25.658a66.804 66.804 0 0 0-29.456-6.666c-13.783 0-20.45 6.201-20.45 13.55 0 8.976 7.923 12.945 26.077 19.829 24.806 9.178 36.511 22.108 36.511 41.937 0 23.58-18.155 43.611-56.743 43.611-16.077 0-31.921-4.186-39.86-8.558l6.512-26.294z"/>
</g>
</svg>
<svg class="svg-inline--fa fa-fw menu-icon" style="height: 1.25em"><use xlink:href="#pihole-svg-logo"/></svg>
Tail FTL.log
</a>
</li>
<!-- Generate debug log -->
<li<?php if ($scriptname === 'debug.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'debug.php') { ?> active<?php } ?>">
<a href="debug.php">
<i class="fa fa-fw menu-icon fa-ambulance"></i> Generate debug log
</a>
</li>
<!-- Network -->
<li<?php if ($scriptname === 'network.php') { ?> class="active"<?php } ?>>
<li class="<?php if ($scriptname === 'network.php') { ?> active<?php } ?>">
<a href="network.php">
<i class="fa fa-fw menu-icon fa-network-wired"></i> Network
</a>
@@ -310,29 +262,16 @@
</ul>
</li>
<!-- Settings -->
<li<?php if ($scriptname === 'settings.php') { ?> class="active"<?php } ?>>
<li class="menu-system<?php if ($scriptname === 'settings.php') { ?> active<?php } ?>">
<a href="settings.php">
<i class="fa fa-fw menu-icon fa-cog"></i> <span>Settings</span>
</a>
</li>
<?php } ?>
<li class="header text-uppercase">Support</li>
<!-- Docs -->
<li>
<a href="https://docs.pi-hole.net/" rel="noopener" target="_blank" class="menu-support">
<i class="fa fa-fw menu-icon fa-question-circle"></i> <span>Documentation</span>
</a>
</li>
<!-- Discourse -->
<li>
<a href="https://discourse.pi-hole.net/" rel="noopener" target="_blank" class="menu-support">
<i class="fa fa-fw menu-icon fab fa-discourse"></i> <span>Pi-hole Forum</span>
</a>
</li>
<!-- Donate -->
<li>
<a href="https://pi-hole.net/donate/" rel="noopener" target="_blank" class="menu-support">
<!-- Donate button -->
<li class="header text-uppercase">Donate</li>
<li class="menu-donate">
<a href="https://pi-hole.net/donate/" target="_blank">
<i class="fas fa-fw menu-icon fa-donate"></i> <span>Donate</span>
</a>
</li>
style/pi-hole.css
+82 -18
View File
@@ -408,6 +408,8 @@ td.lookatme {
float: left;
background: none;
padding: 15px;
width: 50px;
text-align: center;
}
.sidebar-toggle-svg:hover {
@@ -415,6 +417,25 @@ td.lookatme {
background: #367fa9;
}
/* Hide the "Ph" and move the toggle to the left */
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 0;
position: absolute;
}
.sidebar-mini.sidebar-collapse .main-header .logo-mini {
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .main-header .navbar {
margin-left: 0;
}
/* "Hide" all sidebar header titles, but keep them readable to screen readers */
.sidebar-menu > li.header {
color: transparent;
font-size: 0;
padding: 1px;
}
.box,
.small-box {
border-radius: 10px;
@@ -707,6 +728,21 @@ li:not(.menu-open) .treeview-menu .warning-count {
}
}
/* reverse side menu collapse arrows when menu is closed */
.sidebar-collapse .sidebar-toggle-svg svg {
transform: scaleX(-1);
}
/* reverse side menu collapse arrows on mobile screens */
@media (max-width: 767px) {
.sidebar-toggle-svg svg {
transform: scaleX(-1);
}
.sidebar-open .sidebar-toggle-svg svg {
transform: scaleX(1);
}
}
.icon-bounce {
display: inline-block;
position: relative;
@@ -742,31 +778,59 @@ li:not(.menu-open) .treeview-menu .warning-count {
height: 50px;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
background: transparent !important;
.navbar-nav > .user-menu {
margin-left: 15px;
width: 50px;
text-align: center;
}
@media screen and (min-width: 767px) {
.navbar-nav > .user-menu {
background: rgba(0, 0, 0, 0.1);
}
}
/*** Donate button - navbar ***/
.main-header .navbar-custom-menu .user-footer .donate {
margin: 15px;
padding: 0.8em 1em;
width: calc(100% - 30px);
color: #fff;
background: #96060c;
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
height: auto;
padding: 15px 15px 5px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
height: 50px;
width: 50px;
border: none;
border-radius: 6px;
}
.main-header .navbar-custom-menu .user-footer .donate:hover,
.main-header .navbar-custom-menu .user-footer .donate:active,
.main-header .navbar-custom-menu .user-footer .donate:active:hover,
.main-header .navbar-custom-menu .user-footer .donate:focus,
.main-header .navbar-custom-menu .user-footer .donate:active:focus {
background: #f60d1a;
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
border-radius: 0;
border-color: #fff;
}
.navbar-custom-menu > .navbar-nav > li:nth-child(1) {
padding: 0 10px 0 0;
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
padding: 10px 15px;
background: #fff;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
background: transparent !important;
padding: 6px 0;
}
.navbar-nav > .user-menu > .dropdown-menu {
width: 240px;
border: none;
overflow: hidden;
padding: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
margin: 1px;
}
.dropdown-menu > li > a {
color: inherit;
}
.user-menu hr {
margin: 5px 0;
opacity: 0.5;
}
#apiTokenIframe {
style/themes/default-dark.css
+26 -7
View File
@@ -123,6 +123,13 @@ h4 {
.treeview-menu > li > a:focus {
color: #fff;
}
/* "Donate" sidebar button */
.sidebar-menu > li.menu-donate:hover > a,
.sidebar-menu > li.menu-donate > a:focus {
background-color: #3c8dbc;
border-left-color: #fff;
}
.sidebar-form {
border-radius: 3px;
border: 1px solid #3e464c;
@@ -503,16 +510,33 @@ fieldset[disabled] .form-control {
background-color: #353c42;
opacity: 1;
}
.dropdown-menu {
background-color: #22282d;
color: #bec5cb;
border: 1px solid #4c5761;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
background-color: #4c5761;
color: #bec5cb;
background-color: #30383f;
border: 1px solid #171c20;
box-shadow: none;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
border-color: #bec5cb;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
background-color: #272c30;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
color: #bec5cb !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
color: #fff !important;
}
.user-menu hr {
border-color: #bec5cb;
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: #2d343a;
}
@@ -577,11 +601,6 @@ input[type="password"]::-webkit-caps-lock-indicator {
color: #bec5cb !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
background-color: #353c42bb;
padding: 10px;
}
.modal-content {
background: #272c30;
}
style/themes/default-darker.css
+24 -13
View File
@@ -2710,8 +2710,7 @@ a:focus {
color: rgba(232, 230, 227, 0.8);
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
border-bottom-color: rgb(51, 55, 57);
border-top-color: rgb(58, 62, 65);
border-color: #1b2428;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
color: rgb(189, 183, 175) !important;
@@ -2724,23 +2723,31 @@ a:focus {
}
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
background-color: rgb(27, 30, 31);
background-color: #1b2428;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
color: rgb(168, 160, 149);
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
color: rgb(194, 189, 181) !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
color: rgb(232, 230, 227) !important;
}
@media (max-width: 991px) {
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
background-color: rgb(27, 30, 31);
background-color: #1b2428;
}
}
@media (max-width: 991px) {
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
border-color: rgb(58, 62, 65);
background-color: rgb(24, 26, 27);
background-image: none;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
background-color: #283038;
border: 1px solid #283038;
background-image: none;
}
.user-menu hr {
border-color: #bec5cb;
}
.form-group.has-success label {
color: rgb(88, 255, 178);
}
@@ -5494,12 +5501,10 @@ link-muted {
.main-header .logo:hover {
background-color: rgb(42, 99, 132);
}
.main-header li.user-header {
background-color: rgb(48, 113, 150);
}
.content-header {
background-color: transparent;
}
.wrapper,
.main-sidebar,
.left-side {
@@ -5540,6 +5545,12 @@ link-muted {
.treeview-menu > li > a:focus {
color: rgb(232, 230, 227);
}
/* "Donate" sidebar button */
.sidebar-menu > li.menu-donate:hover > a,
.sidebar-menu > li.menu-donate > a:focus {
background-color: #2b6687;
border-left-color: rgb(232, 230, 227);
}
.sidebar-form {
border-color: rgb(118, 109, 97);
style/themes/default-light.css
+13 -3
View File
@@ -33,9 +33,6 @@
.main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255, 255, 255, 0.1);
}
.main-header .navbar .dropdown-menu li a {
color: #fff;
}
.main-header .navbar .dropdown-menu li a:hover {
background-color: #367fa9;
}
@@ -54,6 +51,13 @@
.content-header {
background-color: transparent;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
background: #e4e8f0;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer a:hover {
color: #367fa9 !important;
}
.wrapper,
.main-sidebar,
.left-side {
@@ -87,6 +91,12 @@
.sidebar a:hover {
text-decoration: none;
}
/* "Donate" sidebar button */
.sidebar-menu > li.menu-donate:hover > a,
.sidebar-menu > li.menu-donate > a:focus {
background-color: #367fa9;
border-left-color: #fff;
}
.treeview-menu > li > a {
color: #8aa4af;
}
style/themes/lcars.css
+56 -34
View File
@@ -473,6 +473,9 @@ p.login-box-msg,
.main-header .navbar {
background-image: linear-gradient(#000 36px, transparent 36px);
}
.sidebar-mini.sidebar-collapse .main-header .navbar {
margin-left: 50px;
}
.main-header .navbar::after {
content: "";
@@ -491,20 +494,20 @@ p.login-box-msg,
padding: 0;
overflow: hidden;
color: #000;
background: #9ab;
border: 3px solid #fff;
background: #9ab !important;
border: 3px solid #fff !important;
border-radius: 8px;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
box-shadow: 0 0 0 2000vmax rgba(0, 0, 0, 0.6);
}
.dropdown-menu > li > a:hover {
color: #06c;
}
.dropdown-toggle {
z-index: 2000;
}
.dropdown-menu > li > a {
color: inherit;
}
.main-header li.user-header {
background-color: #000;
}
@@ -515,9 +518,10 @@ p.login-box-msg,
.navbar .nav > li > a,
.navbar .nav > li > .navbar-text {
color: #000;
padding: 0;
margin: 0;
width: 100%;
color: #000;
line-height: 1.2;
font-size: 1em;
text-align: center;
@@ -537,10 +541,11 @@ p.login-box-msg,
top: 0;
bottom: -6px;
background: #48f;
padding: 0 20px;
}
.navbar-custom-menu > .navbar-nav > li {
padding: 0 4px;
flex: 1 1 auto;
}
#pihole-diagnosis {
@@ -573,7 +578,12 @@ p.login-box-msg,
}
.dropdown.user.user-menu {
min-width: 84px;
margin-left: 20px;
width: 1.6em;
flex: 0 1 auto;
padding: 0 5px 5px;
border-radius: 4px;
background: none;
}
.navbar-text code {
@@ -741,17 +751,10 @@ p.login-box-msg,
}
.sidebar-menu > li.header {
margin: 4px 0 0;
padding: 0.5em 1em;
text-align: left;
color: #000;
background: #cce6ff;
font-size: 11px;
}
/* Hide menu headers if not logged in */
body:not(.logged-in) .sidebar-menu > li.header {
display: none;
margin: 0;
padding: 0;
color: transparent;
font-size: 0;
}
.sidebar-menu > li > a {
@@ -763,7 +766,6 @@ body:not(.logged-in) .sidebar-menu > li.header {
.sidebar-menu > li.active > a {
background-color: #eda;
box-shadow: inset 0 0 18px #ba7;
}
.sidebar-menu > li > a.menu-support {
@@ -772,8 +774,7 @@ body:not(.logged-in) .sidebar-menu > li.header {
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:focus {
background-color: #48f;
box-shadow: none;
background-color: #cce6ff;
}
.sidebar-menu > li > .treeview-menu {
@@ -790,6 +791,33 @@ body:not(.logged-in) .sidebar-menu > li.header {
transform: scaleX(-1);
}
.sidebar-menu > .menu-main a,
.sidebar-menu > .menu-system a {
background-color: #8bf;
}
.sidebar-menu > .menu-analysis a {
background-color: #48f;
}
.sidebar-menu > .menu-group a {
background-color: #aaf;
}
.sidebar-menu > .menu-dns a {
background-color: #26f;
}
/* Donate sidebar button */
.sidebar-menu > li.menu-donate a {
background: #c78;
}
.sidebar-menu > li.menu-donate:hover a,
.sidebar-menu > li.menu-donate a:focus {
background: #e9a;
box-shadow: inset 0 0 18px #c78;
}
.treeview-menu > li > a {
margin: 4px 0 0;
padding: 23px 38px 4px 0;
@@ -797,17 +825,17 @@ body:not(.logged-in) .sidebar-menu > li.header {
overflow: hidden;
color: #000;
background: #8bf;
background-image: linear-gradient(to right, #48f 36px, #000 36px, #000 40px, transparent 40px);
background-image: linear-gradient(to right, #cce6ff 36px, #000 36px, #000 40px, transparent 40px);
border-radius: 22px;
}
.treeview-menu > li.active > a {
background-color: #48f;
background-color: #cce6ff;
}
.treeview-menu > li > a:hover {
background-color: #aad0ff;
background-image: linear-gradient(to right, #48f 36px, #000 36px, #000 40px, transparent 40px);
background-color: #cce6ff;
background-image: linear-gradient(to right, #cce6ff 36px, #000 36px, #000 40px, #cce6ff 40px);
box-shadow: inset 0 0 18px rgba(68, 136, 255, 0.4);
}
@@ -1566,9 +1594,6 @@ table.dataTable {
.main-header .navbar .dropdown-menu li.divider {
background-color: rgba(255, 255, 255, 0.1);
}
.main-header .navbar .dropdown-menu li a {
color: #fff;
}
.main-header .logo {
width: 150px;
float: left;
@@ -1609,9 +1634,6 @@ table.dataTable {
.nav > li > a {
padding: 6px 10px;
}
.dropdown.user.user-menu {
min-width: 40px;
}
.user-panel {
border-radius: 0;
}