- 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>
Reviewed and built on top of a round of fixes already applied to the
working tree (boxed layout, badge alignment, sidebar treeview links,
bootstrap5-toggle's on/off->onlabel/offlabel rename, and forcing
data-bs-theme explicitly instead of leaving Bootstrap 5 to fall back to
the OS's prefers-color-scheme, plus the new scripts/js/theme.js that
locks the resolved theme so AdminLTE's own color-mode logic can't
silently override Pi-hole's own theme selection). On top of that:
- Fixed the "day theme still shows dark" gap: the anti-FOUC inline
background style in header.lp only covered the case where the theme
is unconditionally dark, never the "auto" theme (whose Lua-side flag
is literally the string "auto", not "dark") - added a
prefers-color-scheme media query fallback so the auto theme also
avoids a white flash without needing to wait for theme.js/CSS to load.
- Fixed a strict Content-Security-Policy (img-src 'self', set by FTL's
webserver) blocking every checkbox/radio checkmark, the modal close
button, and the select2 dropdown arrow/clear icon: Bootstrap 5 and its
plugins ship these as inline data: URI SVGs, which the CSP rejects
outright. Re-hosted the exact same icons as local files under
style/icons/ and pointed the same CSS custom properties at them.
Learned the hard way that a url() stored in a custom property
resolves relative to the stylesheet that *consumes* it via var(), not
the one that declares it - the consumer here is always
vendor/adminLTE/adminlte.min.css, so the override paths needed to
account for that rather than being relative to pi-hole.css itself.
- Found and fixed three more leftover .box-* selectors in pi-hole.css
that never got updated to .card-* during the earlier card-conversion
phase: the query-types/forward-destinations pie chart flex layout,
the domains-list filter row header, and the dynamically-generated
settings cards' sizing/hidden-state selectors - all on pages that
render in normal use, unlike the handful of genuinely-unreachable
.box-solid/.box-comment selectors left alone in the theme files
(those modifier classes are never applied by any current markup).
Verified against a live container: boxed layout now visibly constrains
and centers the page, day theme renders light content with checkmarks/
close icons/dropdown arrows all visible with zero console errors,
clicking Settings/Tools now expands the submenu instead of navigating
to the dashboard, and sidebar badges are aligned to a consistent right
edge.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Bump @fortawesome/fontawesome-free 6.7.2 -> 7.3.0 (the only remaining
outdated dependency; everything else was already at latest). Drop the
now-unused .ttf webfonts - FA7's dist CSS only references .woff2.
Rename the same AdminLTE2/Bootstrap3 selectors across all 6 theme files
under style/themes/ that were already renamed everywhere else in this
migration: .main-header/.main-sidebar/.main-footer -> .app-header/
.app-sidebar/.app-footer, .wrapper -> .app-wrapper, .content-wrapper ->
.app-main (this one predates AdminLTE 4 entirely and no longer exists
anywhere - confirmed dead in the current markup), .treeview-menu ->
.nav-treeview, sidebar .header list items -> .nav-header, and the full
box/panel -> card component family (including collapsed-box -> collapsed-
card and the color/state variants). Also removed now-dead bootstrap-select/
icheck-bootstrap selectors that can never match anything anymore.
All 7 theme options (default-auto/-light/-dark/-darker, high-contrast,
high-contrast-dark, lcars) are genuinely selectable in Settings -> Web
interface/API, confirmed via the live theme dropdown - none of these
files were dead code, despite "default-darker" not being referenced by
name anywhere else in this repo (themes are loaded via string
concatenation of a backend-supplied name).
Removed pi-hole.css's ~210-line hand-rolled polyfill of Bootstrap 4/5's
margin/padding/display utility classes (.m-0.../.py-3/.d-none) - these
exist natively in Bootstrap 5 now (confirmed present with identical
values in the vendored adminlte.min.css), so the polyfill was pure dead
weight.
Verified against a live container: switched the active theme through
default-darker, lcars, and high-contrast and reloaded the dashboard for
each - all three render correctly (LCARS's very custom skin in
particular came through intact) with zero console errors. FA7 icons
render correctly across the sidebar and dashboard.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
- 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 all 35 static checkbox/radio inputs across 9 templates (queries,
search, settings-api, settings-dhcp, groups-domains, settings-dns,
settings-privacy, settings-teleporter) plus the dynamically-generated
ones (settings-advanced.js's per-setting boolean/enum controls,
settings-dns.js's DNS-upstream picker) from icheck-bootstrap's
JS-post-processed styling to Bootstrap 5's native .form-check/
.form-check-input/.form-check-label markup, which needs no JS at all.
Remove footer.js's applyCheckboxRadioStyle() (and its call sites in
settings-advanced.js/settings-dns.js) entirely - it used to strip and
re-add classes on every checkbox/radio's parent after page load, which
would have destroyed the new static .form-check classes at runtime.
Drop the icheck-bootstrap dependency, its vendor CSS and the <link> in
header.lp, and replace its now-dead pseudo-element checkbox styling in
pi-hole.css with a couple of plain .form-check-input/.form-check-label
rules for the one spot that needs a smaller checkbox size (the domain
list's filter-by-type row).
Two "no-icheck"-excluded checkboxes (a table-header select-all in both
settings-dns.lp and settings-dns.js) are left as bare native checkboxes,
matching their original deliberate exclusion.
Also confirmed pi-hole's own text-red/text-green/bg-*/etc. color utility
classes are unaffected by the AdminLTE core removal - each theme file
already defines them fully rather than only overriding an AdminLTE base,
so no fix was needed there.
Verified against a live container: settings/dns (checkbox/radio styling,
custom-servers card-collapse toggle) and settings/privacy (privacy-level
radios) render correctly with zero console errors.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Swap vendored AdminLTE 2.4.18 + Bootstrap 3.4.1 for AdminLTE 4.1.0 +
Bootstrap 5.3.8 (AdminLTE's dist CSS now bundles Bootstrap, so the
separate Bootstrap stylesheet is dropped; only its JS bundle remains).
Rewrite the page shell (header, header_authenticated, sidebar, footer)
to AdminLTE 4's app-wrapper/app-header/app-sidebar/app-main/app-content
structure and nav-sidebar/nav-treeview markup, and convert the dashboard
(index.lp) box/small-box markup to Bootstrap 5 cards as the first fully
migrated page.
Verified against a live container: fixed a chart.js tooltip lookup that
still targeted the old .box selector, restored the header logo mini/full
swap and sidebar user-panel collapse behavior that AdminLTE 2 used to
provide for free, and resolved a duplicate id="navigation" collision
with AdminLTE 4's own accessibility skip-link script.
Every other page still uses the old box/Bootstrap-3-grid/BS3-plugin
markup and will render incorrectly until the remaining migration phases
land.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
yubiuser
RD WebDesign
DL6ERandAdam Warner
DominikandGitHub
