mirror of
https://github.com/pi-hole/web.git
synced 2026-08-23 14:51:12 +01:00
3149820eb4
Convert the remaining 20 .lp templates from AdminLTE 2's .box/.panel
component family to Bootstrap 5 .card markup, matching the pattern
established in index.lp/queries.lp during the layout migration:
box/box-header/box-title/box-body/box-footer -> card equivalents,
box-info/-danger/-warning etc. -> card-info/-danger/-warning +
card-outline for the non-solid variant, collapsed-box + data-widget
-> collapsed-card + data-lte-toggle="card-collapse" with the dual
expand/collapse icon AdminLTE 4 expects. Also renames the accompanying
Bootstrap-3-isms throughout (col-xs-*, pull-left/right, input-group-addon,
data-toggle/-dismiss/-backdrop/-keyboard, label -> badge, btn-default,
BS3 modal close-button markup).
Fix the JS-side selectors that referenced the old markup and would have
silently broken once the classes changed: charts.js's tooltip anchor
lookup, footer.js's "no visible cards" redirect check, login.js's
2FA/forgot-password card color swap (plus made both boxes consistently
non-solid so the swap doesn't need to touch card-outline), and
settings-advanced.js's dynamically generated settings cards and its
manual Bootstrap 3 "in"/"active" tab-pane class toggling (Bootstrap 5
renamed .in to .show). Rewrite settings-dhcp.js's jQuery-plugin tooltip
delegation (`$("body").tooltip(...)`, `.tooltip("hide")`) as a small
lazily-instantiating delegated listener plus direct bootstrap.Tooltip
calls, since Bootstrap 5 dropped jQuery integration entirely and the
DHCP lease action buttons are added to the DOM dynamically. Restore
Bootstrap 3's .has-error/.has-warning/.has-success form-validation
color feedback in pi-hole.css, since Bootstrap 5 dropped those classes
in favor of .is-invalid/.is-valid and a couple of pages still toggle
the old class names for simple color-coded feedback.
Refresh package-lock.json for the admin-lte/bootstrap version bump from
the previous commit.
Verified against a live container: dashboard, query log (incl. the
collapsible advanced-filter card and populated DataTable), groups/lists,
groups/domains, and settings/dns all render correctly with zero console
errors; card-collapse toggling confirmed working on the query log's
filter card. Plugin-styled elements (select2/bootstrap-select dropdowns,
DataTables chrome, icheck checkboxes, bootstrap-toggle switches, nav-tabs)
still look wrong until the JS-plugin-swap phase lands, as expected.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
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-striped 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')?>
|