- remove from the table footer some elements created by datatables.
These elements are automatically created to allow table sorting, but the
footer here is used as an interface to add new reverser servers. We
don't need them. Also, the elements will interfere with the placeholder
text (added using CSS, but only to completely empty cells).
- adjust CSS `.actions` class to force right aligned text on the footer.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
The functions should only accept IPs with an optional port:
- IPs are valid: "a.b.c.d"
- IPs with port ("a.b.c.d#p") are allowed if the port is valid
- network ranges (CIDR) should be rejected
- empty ports ("a.b.c.d#") should be rejected
- all other strings should be rejected
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Adding a domain from the query log opens a modal that, on any HTTP
error, showed a fixed "Timeout or Network Connection Error!" text. The
most common case - the domain is already on the list - is returned by
FTL as HTTP 400 with `{"error":{"hint":"The item is already present"}}`,
so it surfaced as a misleading network error.
We now read the JSON error body and show its hint (or message), falling
back to the network-error text only when there genuinely is no response
body.
Signed-off-by: DL6ER <dl6er@dl6er.de>
- 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>
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>
- simplify function to avoid code duplication;
- remove unnecessary CSS classes from the buttons;
- set button colors using CSS variables;
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>
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>
- use "btn-primary" buttons (TODO: set primary color as the theme color);
- adjust font-sizes, colors, margins and paddings;
- clean up old/unnecessary CSS rules
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add `.list-inline-item` class to the versions;
- remove unused/invalid classes;
- use bootstrap 5 classes to adjust the layout;
- only add class `w-100` when there is content.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
The new theme (AdminLTE 4 + Bootstrap 5) uses different z-index for some
elements. The `nav#navigation` element uses z-index=1034, which is higher
than the default inital z-index (1030) used by bootstrap-notify, resulting
in notifications partially hidden under the navigation bar.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- add `data-bs-theme` to the body, accordingly to the current theme;
- add `data-bs-theme=dark` the the top bar, because we always use some
background color with white text, on this element;
- change the default theme font-size to 15px. The previous theme used 14px
(too small) and the original AdminLTE uses 16px (maybe too big);
- use `bg-body-secondary` class on the body to match the previous gray
background color on the content area;
- use `bg-body-tertiary` class on the sidebar. It is still a dark color,
but it will be changed according to the selected themes (when all themes
are implemented);
- adjust the top bar text color and border color to match the previous
theme look;
- adjust (or remove) the height on some elements on the top bar, to avoid
breaking the layout;
- move the old "logo" element to the sidebar (`.sidebar-brand` element);
- use CSS to show a smaller "Pi-hole" text logo in the collapse sidebar;
- adjust the collapsed sidebar layout, adding `.nav-badge` class to the
every badge on the sidebar;
- remove the outdated `pull-left` class;
- remove other outdated CSS rules;
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- The multi-line comments added in the previous UI-fix commits aligned their
continuation lines with an odd number of leading spaces, which the
editorconfig check rejects (it wants multiples of two). Re-indent them.
- Equalise the two single-icon columns (list status and list type) on the
subscribed-lists table so the type column is no longer noticeably wider than
the status one, and centre their icons.
Signed-off-by: DL6ER <dl6er@dl6er.de>
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>
The subscribed-lists table rendered each status icon without the coloured
`list-status-N` class the legend uses, so they showed in the default text
colour instead of green/orange/red. Add the matching class so the table icons
convey the same status colours as the legend.
Signed-off-by: DL6ER <dl6er@dl6er.de>
- 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>
- Bootstrap 5 also removed `.form-group` (row bottom margin) and `.help-block`
(muted helper text); both are used across the settings and query-log forms,
so restore them. This recovers the vertical spacing that was missing between
form rows throughout the interface.
- Dark theme: mute the active pagination link and the filled `.card-info` /
`.card-primary` card headers (e.g. the query-log "Advanced filtering" box),
which used Bootstrap's over-bright `#0d6efd`/`#0dcaf0` on the dark background.
The headers are recoloured via AdminLTE 4's `--lte-card-variant-*` variables.
- Widen the reverse-DNS servers table's "Enabled" column so its header no
longer overflows into the next column.
Signed-off-by: DL6ER <dl6er@dl6er.de>
The Bootstrap 3 -> 5 jump silently dropped several utilities and defaults the
templates still relied on, leaving elements mis-rendered:
- `.hidden` no longer exists in Bootstrap 5, so every element toggled via it
(the 2FA login field, the diagnosis `warning-count` badge, the "reset
sorting" and "enable 2FA" buttons) was permanently visible. Restore it.
- `.btn-block` was removed; restore it so the settings "Actions" and gravity
buttons fill their grid column again instead of collapsing left-aligned.
- AdminLTE 4 resets `.card` bottom margin to 0, removing the vertical rhythm
between stacked cards. Restore a consistent `margin-bottom`.
- `.btn-toolbar` no longer spaces its button groups; add a small gap.
- The header logo/wordmark is no longer swapped when the sidebar collapses, so
"Pi-hole" wrapped in the narrow header. Show the compact "Ph" mark instead.
- The domain-management tab links were missing the `nav-item`/`nav-link`
classes Bootstrap 5 requires, so they rendered as bare text.
Also tone down the over-bright `h4` heading colour (`#44def1`) in the dark
theme to the theme's own accent blue, and hide the Tom Select "none selected"
placeholder once a group is selected.
Signed-off-by: DL6ER <dl6er@dl6er.de>
editorconfig-checker requires comment continuation lines to be
indented in multiples of the file's indent size (4 for .lp, 2 for
.css) - several block comments added during the AdminLTE4 migration
used visual alignment under the opening delimiter instead, tripping
the check. Reflowed them to a flat, spec-compliant indent.
Also fix a spell-check false-negative turned real hit: codespell flags
"pre-selected" as a common misspelling of "preselected".
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
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>
yubiuser
RD WebDesign
DL6ER
Adam Warner
