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

Remove top navbar menu #2292

Closed
wants to merge 6 commits into from
Closed

Remove top navbar menu #2292

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ecef0d3
Move github and pi-hole.net links to sidebar
yubiuser Aug 12, 2022
f098b2b
Remove top bar menu
yubiuser Aug 12, 2022
a7856a1
Move Logout button to top bar
yubiuser Aug 12, 2022
aa17619
Remove session timer
yubiuser Aug 12, 2022
b1d35e1
Change hamburger menu icon to angle icons
yubiuser Aug 12, 2022
a85816a
Use only css to change the direction of the arrows
yubiuser Aug 13, 2022
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
33 changes: 0 additions & 33 deletions scripts/pi-hole/js/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,39 +255,6 @@ $("#pihole-disable-custom").on("click", function (e) {
piholeChange("disable", custVal);
});

// Session timer
var sessionTimerCounter = document.getElementById("sessiontimercounter");
var sessionvalidity = parseInt(sessionTimerCounter.textContent, 10);
var start = new Date();

function updateSessionTimer() {
start = new Date();
start.setSeconds(start.getSeconds() + sessionvalidity);
}

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 {
document.getElementById("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")) {
Expand Down
9 changes: 6 additions & 3 deletions scripts/pi-hole/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -1211,3 +1209,8 @@ $(function () {
window.addEventListener("resize", function () {
$(".chartjs-tooltip").remove();
});

// change sidebar icon on collapse/expand
$(".sidebar-toggle-svg").click(function () {
$(this).find("svg").toggleClass("fa-angle-double-left fa-angle-double-right");
});
yubiuser marked this conversation as resolved.
Show resolved Hide resolved
62 changes: 13 additions & 49 deletions scripts/pi-hole/php/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ function getTemperature()
<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>
Expand All @@ -261,54 +261,18 @@ function getTemperature()
<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>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<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>
<!-- 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>
</li>
</ul>
</li>
<!-- Logout -->
<?php
// Show Logout button if $auth is set and authorization is required
if (strlen($pwhash) > 0 && $auth) {
?>
<li>
<a href="?logout">
<i class="fa fa-fw menu-icon fa-sign-out-alt"></i> <span>Logout</span>
</a>
</li>
<?php
} ?>
</ul>
</div>
</nav>
Expand Down
24 changes: 12 additions & 12 deletions scripts/pi-hole/php/sidebar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,18 +76,6 @@
<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">
<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
Expand Down Expand Up @@ -318,6 +306,12 @@
<?php } ?>

<li class="header text-uppercase">Support</li>
<!-- Website -->
<li>
<a href="https://pi-hole.net/" rel="noopener" target="_blank" class="menu-support">
<i class="fa fa-fw menu-icon fa-home"></i> <span>Pi-hole Website</span>
</a>
</li>
<!-- Docs -->
<li>
<a href="https://docs.pi-hole.net/" rel="noopener" target="_blank" class="menu-support">
Expand All @@ -330,6 +324,12 @@
<i class="fa fa-fw menu-icon fab fa-discourse"></i> <span>Pi-hole Forum</span>
</a>
</li>
<!-- Github -->
<li>
<a href="https://github.com/pi-hole/" rel="noopener" target="_blank" class="menu-support">
<i class="fa fa-fw menu-icon fab fa-github"></i> <span>Github</span>
</a>
</li>
<!-- Donate -->
<li>
<a href="https://pi-hole.net/donate/" rel="noopener" target="_blank" class="menu-support">
Expand Down
7 changes: 7 additions & 0 deletions style/pi-hole.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -697,6 +697,13 @@ li:not(.menu-open) .treeview-menu .warning-count {
}
}

/* reverse side menu collapse arrows on mobile screens */
@media (max-width: 767px) {
.sidebar-toggle-svg {
transform: scaleX(-1);
}
}

.icon-bounce {
display: inline-block;
position: relative;
Expand Down