- remove old `.page-title` from all pages;
- add the the new header structure and place the title inside the new
`.app-content-header` element;
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
This class job was basically make the element 100% wide.
We can replace it with the Bootstrap class: `w-100`, or (if the element
already has its own class) we add `width: 100%`.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- DataTables: replace the combined BS3 download-builder bundles with
the official core + Bootstrap 5 styling-adapter package pairs
(datatables.net(-buttons/-select) + datatables.net-bs5/-buttons-bs5/
-select-bs5), loaded core-then-adapter.
- bootstrap-select -> Tom Select: bootstrap-select has no Bootstrap 5
build. Add utils.createGroupSelect(), a small wrapper around Tom
Select that recreates bootstrap-select's actionsBox (Select all/
Select none) via a couple of buttons injected into the dropdown, and
use it for all four "assign to group(s)" multi-selects (groups,
groups/clients, groups/domains, groups/lists). Two behavioral fixes
were needed to match the old widget: `hideSelected: false` (Tom
Select refuses to open its dropdown once every option is already
selected, which made the actions box unreachable) and
`dropdownParent: "body"` (otherwise the dropdown is clipped by the
surrounding .table-responsive/.card ancestors' overflow, same reason
bootstrap-select was configured with container: "body").
- bootstrap-toggle -> bootstrap5-toggle: drop-in replacement, same
$.fn.bootstrapToggle() API and onstyle/offstyle option names (all
call sites already used Bootstrap 5-valid color names).
- select2: bump to 4.1.0 and add the select2-bootstrap-5-theme package
for correct Bootstrap 5 styling; wire theme: "bootstrap-5" into both
call sites.
- Remove now-dead bootstrap-select cleanup code (the
"$('body > .bootstrap-select.dropdown').remove()" DataTables
drawCallback lines across 8 files) and dead icheck/bootstrap-select
CSS in pi-hole.css.
Also fixed a Phase 1 regression surfaced by this pass: utils.js's
loadingOverlay() still targeted the old ".wrapper" class instead of
".app-wrapper", throwing whenever a settings page triggered the
Save & Apply overlay.
Verified against a live container: groups/clients' per-row Tom Select
multiselect (open dropdown, Select all/none, Apply, restore-on-cancel),
bootstrap5-toggle switches on groups, select2 filters on the query log,
and DataTables' select/export button row on groups/lists all work with
zero console errors. Settings pages' Save & Apply overlay confirmed
fixed and no longer throwing.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
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>
There are still cases we are getting TypeErrors. We should try again after grouping our assets together in all pages.
Signed-off-by: XhmikosR <xhmikosr@gmail.com>
* move fonts first
* move CSS and JS along with the rest
* move default auto theme media checks to the HEAD instead of imports
Also, use `script defer`. This makes the JS files non-blocking.
Signed-off-by: XhmikosR <xhmikosr@gmail.com>
RD WebDesignandAdam Warner
casperklein
XhmikosR
DL6ER
Christian König
