Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-19 18:28:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small desing adjustment and simplify selector

Browse Source 
- use class to style buttons and info icons (move style to pi-hole.css)
- add negative margin to avoid small jump when the button is shown
- use the new classes to simplify jquery selectors
This commit is contained in:
RD WebDesign
2023-11-08 16:52:21 -03:00
parent e71557a60f
commit b44a07446d
3 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.lp
View File

@@ -83,8 +83,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
<div class="box" id="queries-over-time">
<div class="box-header with-border">
<h3 class="box-title">Total queries over last 24 hours</h3>
<button class="btn btn-xs btn-default pull-right" data-sel="zoom-reset-history" style="display:none;"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right" data-sel="zoom-info" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
<button class="btn btn-xs btn-default pull-right zoom-reset" data-sel="reset-history"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right zoom-info" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
</div>
<div class="box-body">
<div class="chart" style="width: 100%; height: 180px">
@@ -103,8 +103,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
<div class="box" id="clients">
<div class="box-header with-border">
<h3 class="box-title">Client activity over last 24 hours</h3>
<button class="btn btn-xs btn-default pull-right" data-sel="zoom-reset-clients" style="display:none;"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right" data-sel="zoom-info" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
<button class="btn btn-xs btn-default pull-right zoom-reset" data-sel="reset-clients"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right zoom-info" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
</div>
<div class="box-body">
<div class="chart" style="width: 100%; height: 180px">

14
scripts/pi-hole/js/index.js
View File

@@ -428,12 +428,12 @@ $(function () {
updateSummaryData();
// On click of the "Reset zoom" buttons, the closest chart to the button is reset
$("[data-sel^='zoom-reset']").on("click", function () {
if ($(this).data("sel") === "zoom-reset-clients") clientsChart.resetZoom();
$(".zoom-reset").on("click", function () {
if ($(this).data("sel") === "reset-clients") clientsChart.resetZoom();
else timeLineChart.resetZoom();
// Show the closest info icon to the current chart
$(this).parent().find("[data-sel='zoom-info']").show();
$(this).parent().find(".zoom-info").show();
// Hide the reset zoom button
$(this).hide();
});
@@ -465,14 +465,14 @@ $(function () {
// current zoom level
if (chart.getZoomLevel() === 1) {
// Show the closest info icon to the current chart
$(chart.canvas).parent().parent().parent().find("[data-sel='zoom-info']").show();
$(chart.canvas).parent().parent().parent().find(".zoom-info").show();
// Hide the reset zoom button
$(chart.canvas).parent().parent().parent().find("[data-sel^='zoom-reset']").hide();
$(chart.canvas).parent().parent().parent().find(".zoom-reset").hide();
} else {
// Hide the closest info icon to the current chart
$(chart.canvas).parent().parent().parent().find("[data-sel='zoom-info']").hide();
$(chart.canvas).parent().parent().parent().find(".zoom-info").hide();
// Show the reset zoom button
$(chart.canvas).parent().parent().parent().find("[data-sel^='zoom-reset']").show();
$(chart.canvas).parent().parent().parent().find(".zoom-reset").show();
}
},
},

6
style/pi-hole.css
View File

@@ -1398,3 +1398,9 @@ table.dataTable tbody > tr > .selected {
white 4%
);
}
/* Dashboard graphics: reset zoom button and info tooltip */
.zoom-reset {
display: none;
margin-top: -1px;
}