- 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>
- 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>
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>
FTL's DoT/DoH client work (pi-hole/FTL#2940) pins tls:// and https://
URIs onto the well-known resolver list, but the picker only rendered
checkboxes for the plain addresses.
- Plain / DoT / DoH tabs, one checkbox per address family per tab
- DoT/DoH tabs omit vendors with no pinned URI for that protocol,
instead of showing empty rows
- keeps the table narrow as more protocols (DoQ, DoH3, ...) get added
- each tab shows a label with how many upstreams are selected there,
positioned top-right with a tooltip, per rdwebdesign's review
comments
Co-authored-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: Adam Warner <github@promofaux.dev>
- remove `<input>` tags and add contenteditable attribute to all
editable cells
- rows are always enabled now (no "edit" button to enable them)
- Simplify javascript code:
- use classNames to simplify column selection, instead of unique ids
- use datatables "columnDefs" and "createdCell" to add attributes
- use CSS class "editing" and CSS rules to handle buttons
- remove unused and unnecessary attributes from elements
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add functions and buttons to add, modify, undo changes and delete lines
- generate the table using data already on the textarea
- add functions to read textarea contents and parse then into an array
- add functions to update the textarea contents from the table
- hide the textarea. Only the table will be visible
- make sure the table is not shown when the option was set by ENV VARS
- move some help paragraphs to the table legend
- remove usused original help text for the textarea
- use fixed size for all action buttons
- don't use "icheck" styling on the checkboxes in the table
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
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>
- Fix buttons in high contrast themes
- consistent indentation and widths for fields and labels
- use class `form-control` to format every form field
- add some line breaks to improve readability
- use colors in "Currently active sessions" table
- consistent indentation and widths for fields and labels
- use class `form-control` to format every form field
- add some line breaks to improve readability
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
RD WebDesignandGitHub
yubiuser
XhmikosR
casperklein
DL6ER
DominikandGitHub