This branch's code predates development's xo 2 -> 3 upgrade and hadn't been checked against its stricter ruleset. Fix the new violations: drop unnecessary globalThis prefixes on location/matchMedia, prefer location.assign() over href assignment, use early returns instead of wrapping onDropdownClose bodies in an if, fix a parameter shadow in getGroups, and use {capture: true} instead of a bare boolean for addEventListener.
Signed-off-by: Adam Warner <github@promofaux.dev>
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>
Widen the select column from 15px to 2rem so the checkbox is no longer cramped
against the column edges, centre it horizontally and vertically, and draw a
slightly larger, rounded box (dimmed until the row is selected) so the control
reads as a proper checkbox.
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>
Found via manual verification of every page: two places set up tabs
using the Bootstrap 3 pattern of putting the "active" state on the <li>
wrapper (and, for the domains page, only in aria-expanded) rather than
on the <a>/tab-link element itself. Bootstrap 5's Tab component tracks
the active tab exclusively via the "active" class on the link, so with
neither page marking any link "active" at load, Tab.js could never find
a previous tab to deactivate - clicking a different tab just added a
second active pane on top of the first instead of replacing it.
- groups-domains.lp: the Domain/RegEx filter tabs. Added class="active"
to the initially-selected tab's <a>, and swapped the stale Bootstrap
3/4 "in" class for "show" on its pane (harmless leftover, but dead
code once "active" is what actually matters). Also fixed
groups-domains.js's addDomain(), which was reading
aria-expanded="true" to figure out which tab is active - Bootstrap 5
never touches that attribute for plain tabs (only aria-selected/the
active class), so that lookup would have always resolved to the
Domain tab even when the RegEx tab was showing, silently misfiling
regex entries as exact-domain ones. Switched it to read the .active
class instead.
- settings-advanced.js: the All Settings page's topic pills
(DNS/DHCP/NTP/etc.). Same fix - add "active" to the first pill's <a>
in both the initial-load and "only changed settings" code paths.
Verified against a live container: groups/domains now correctly shows
only one tab's content at a time and addDomain() resolves to the right
tab; settings/all now correctly switches between topic panes instead of
stacking them, confirmed via the pane class list before/after a real
click. Zero console errors.
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 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>
WebKit-based browsers (Safari, DuckDuckGo on macOS) don't yet support
the ES2024 Unicode Sets `v` regex flag, causing a SyntaxError that
prevents all dashboard JavaScript from executing — stats show `---` and
charts spin indefinitely.
None of the affected patterns use v-exclusive features (set notation
`[A--B]`, `[A&&B]`), so downgrading to `u` is fully equivalent and
restores broad compatibility without any functional change.
Also updates xo.config.js to enforce `requireFlag: "u"` so the linter
stays consistent with the codebase.
Affected files (16 occurrences across 8 files):
- scripts/js/utils.js
- scripts/js/index.js
- scripts/js/footer.js
- scripts/js/groups-domains.js
- scripts/js/settings-teleporter.js
- scripts/js/gravity.js
- scripts/js/groups.js
- scripts/js/groups-clients.js
- scripts/js/groups-lists.js
- scripts/js/settings-dns-records.js
- scripts/js/network.js
- scripts/js/taillog.js
Signed-off-by: Austin Gilmour <gilmoursa@gmail.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
yubiuser
Adam Warner
RD WebDesignandAdam Warner
DL6ERandAdam Warner
Austin GilmourandClaude Sonnet 4.6
XhmikosR
DominikandGitHub