- Replace the old `.hidden-*` classes and use the new `.d-*-none`. This
classes apply `display: none` to the elements matching the size or above
- remove unused/unnecessary classes from pi-hole.css
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- 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>
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>
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>
- use 4-8 columns instead of 6-6;
- use label before the number control (this will show the label on the previous line, when there is a line break);
- right-align second column in larger screens and add small margin;
- remove old HTML comments.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
RD WebDesign
Dominik
XhmikosR
yubiuser
Christian König