mirror of
https://github.com/pi-hole/web.git
synced 2026-09-03 11:40:25 +01:00
DL6ER
63d576b036
- The vendored bstreeview still emitted Bootstrap 3 collapse attributes (`data-toggle`/`data-target`), which Bootstrap 5 ignores, so expanding an interface only rotated the caret without revealing its details. Emit the `data-bs-*` attributes instead. - The network overview colours each row by device activity, but Bootstrap 5 paints the cell background over the row's `background-color`. Drop the now-conflicting `table-striped` and colour the row through the `--bs-table-bg` variable so the status colours (and the legend) apply again. - Chart tooltips are positioned relative to their card's parent, but that element was not the tooltip's offset parent in the boxed layout, so tooltips were shifted far to the side. Make the ancestor `position: relative`. - Keep the horizontal scrollbar visible on wide `.table-responsive` tables so it is clear the content scrolls rather than being cut off. Signed-off-by: DL6ER <dl6er@dl6er.de>
71 lines
2.8 KiB
Lua
71 lines
2.8 KiB
Lua
<? --[[
|
|
* Pi-hole: A black hole for Internet advertisements
|
|
* (c) 2017 Pi-hole, LLC (https://pi-hole.net)
|
|
* Network-wide ad blocking via your own hardware.
|
|
*
|
|
* This file is copyright under the latest version of the EUPL.
|
|
* Please see LICENSE file for your rights under this license.
|
|
--]]
|
|
|
|
mg.include('scripts/lua/header_authenticated.lp','r')
|
|
?>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card" id="network-details">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Network overview</h3>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<table id="network-entries" class="table table-bordered" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>IP address (hostname)</th>
|
|
<th>Hardware address</th>
|
|
<th>Interface</th>
|
|
<th>First seen</th>
|
|
<th>Last Query</th>
|
|
<th>Number of queries</th>
|
|
<th>Uses Pi-hole</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>IP address (hostname)</th>
|
|
<th>Hardware address</th>
|
|
<th>Interface</th>
|
|
<th>First seen</th>
|
|
<th>Last Query</th>
|
|
<th>Number of queries</th>
|
|
<th>Uses Pi-hole</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<label>Background color: Last query from this device seen ...</label>
|
|
<table width="100%">
|
|
<tr class="text-center">
|
|
<td class="network-recent" width="15%">just now</td>
|
|
<td class="network-gradient" width="30%">... to ...</td>
|
|
<td class="network-old" width="15%">24 hours ago</td>
|
|
<td class="network-older" width="20%">> 24 hours ago</td>
|
|
<td class="network-never" width="20%">Device does not use Pi-hole</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
|
|
<script src="<?=pihole.fileversion('scripts/js/network.js')?>"></script>
|
|
|
|
<? mg.include('scripts/lua/footer.lp','r')?>
|