- 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>
- put nav-tabs inside a card;
- the tabs (<ul> element) should be inside card-header;
- the tab-content should be inside card-body;
- adjust the margins of the nav-tab and remove the rounded corners
TODO:
in some themes, the the selected tab background color and the tab-pane
background are not matching. Also, all themes are showing different
colors than we had before the migration. This is just a cosmetic issue
and it will be adjusted later.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
The new theme doesn't use background colors for striped tables and to show
selected rows. Instead, it adds box-shadow to table cells to simulate
background colors. The original theme uses a opaque color and white text,
breaking the Pi-hle themes.
The fix replaces the original box-shadow with a semi-transparent shadow
and uses the theme text color.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- 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>
- 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>
- 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>
- 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>
- DataTables no longer right-aligns its Bootstrap pager, so it drifted to the
middle of its column; restore the conventional right-aligned position.
- AdminLTE 4's 1.1rem card title looked oversized for the longer settings-page
headings; nudge it to 1rem.
- The Bootstrap 5 DataTables Select build stopped drawing the checkbox box, so
the group tables' bulk-select column looked empty. Draw the box and checkmark
ourselves so the selection control (and its select-all/delete-selected
buttons) are visible again.
Signed-off-by: DL6ER <dl6er@dl6er.de>
- `.app-content` had no top padding, so every page's content sat flush against
the header. Add consistent top spacing.
- The sidebar status panel gave the logo a growing flex basis, squeezing the
status text into a narrow column where "Memory usage: .. %" wrapped. Let the
logo take only its natural width so the metrics fit on one line each.
- Apply the same card-header/pagination recolouring to the deep-midnight
(`default-darker`) theme, whose Bootstrap 3 pagination and card rules no
longer matched Bootstrap 5's `.page-item`/`--lte-card-variant-*`.
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>
Follows up on rdwebdesign's comment about themes needing a rewrite to use v4's CSS custom properties instead of piles of one-off rules.
Verified against the live DOM in a Docker container that these selectors no longer match anything: they targeted AdminLTE2/Bootstrap 3 markup (.sidebar-form, .nav-stacked, .left-side/.right-side, box-solid, box-comment...) or old DataTables classnames replaced by the dt-* build in this PR (dataTables_wrapper, dataTables_paginate). Bootstrap 5's native [data-bs-theme=dark] cascade already covers the pagination/search styling those rules used to provide.
Also pulled the two most-repeated literal colours (#bec5cb text, #353c42 background, appearing 34/35 times each) out into --theme-text/--theme-bg custom properties.
default-darker.css is a separate, much larger (5600+ line) machine-generated Darkreader dump and needs its own dedicated pass, not attempted here.
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <github@promofaux.dev>
rdwebdesign clarified that the second .card rule merged into this
selector in 19f900c8 wasn't the box-to-card conversion at all - it was
a rule they'd added for their own new class shortly before the
box/card renaming landed, using the name "card" because AdminLTE
didn't use it yet. Now that .card is a real global Bootstrap 5
component class, that rule's margin/padding/border no longer belong on
every card in the app. Drop them and keep only the original
border-radius/overflow pair from the box-to-card conversion.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Bootstrap 3 had two separate legacy container concepts - .box and
.panel - that both map onto Bootstrap 5's single .card. The box/panel
to card conversion renamed each occurrence independently, so wherever
a theme file already styled one of them under the other's name (or a
pre-existing .card rule for the advanced-settings cards collided with
a freshly renamed .box/.panel), the result was two separate rule
blocks for the same selector - flagged by CodeFactor's
no-duplicate-selectors check.
Merged each pair into a single rule, keeping whichever value wins the
cascade in the current (duplicated) state so the resolved styles are
unchanged.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
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>
AdminLTE4's bundled Bootstrap 5 CSS sets --bs-form-select-bg-img (the
chevron background image on .form-select) to an inline data: URI SVG,
which FTL's img-src 'self' CSP silently blocks. DataTables' Bootstrap 5
integration adds .form-select to its own "entries per page" <select>
on every table it builds, so this hit every DataTables-driven page
(query log, DHCP leases, DNS/CNAME record tables, group tables, etc.)
even though no template in this repo uses .form-select directly.
Re-host the light- and dark-theme arrow icons as local files and point
the custom property at them, same approach as the existing checkbox/
radio/close-button fixes.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
bootstrap5-toggle defers building the switch until a ResizeObserver
sees the source checkbox's parent report non-zero dimensions. The
pre-hide rule that kept #expert-settings/#only-changed as raw
display:none checkboxes (to avoid a flash of unstyled input) collapsed
that parent to 0x0, so the observer's condition could never be met and
the toggle silently never rendered on any settings page. The vendor
CSS already hides the checkbox once it's wrapped (.toggle > input),
so the extra pre-hide rule is no longer needed.
Also restore the old tab bar's full-width, gapless layout on the All
Settings page: the tab links only had .btn (inline-block, sized to
content), so a lone item wrapped onto its own row sat as a small
centered pill instead of filling the row like Bootstrap 3's implicit
`.nav > li > a { display: block }` used to.
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>
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>
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>
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>
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>
- add a placeholder using CSS
- use a javascript to trim undesired spaces. This command also removes the
"hidden" line break automatically added by browsers when the content of
an editable element is cleared/deleted.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- 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>
- move the "Click on the icon" hint to the bottom
- add a legend explaining the meaning of all icons used in lists
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Remove the javascript code used to add and remove "hints" and replace it
with a single CSS pseudo-element after the table, instead of one message
per line. Also, adjust LCARS message position.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- move and group some CSS selectors in the file, to make editing easier
- use semi-transparent background color for .table-danger
- reduce specificity for StaticDHCPTable cells and .line-numbers
- remove unused and duplicated selectors
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- replace DOMContentLoaded listener with a function and call it when needed
- use javascript to update the CSS variable `--num-lines`
- use CSS to calculate the elements height
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- only show save button when needed
- use fixed size and right aligned text for button column
- highlight cells only on error and remove the highlight when is fixed
- replace a few inline CSS styles with proper HTML tags
- adjust CSS on specific themes
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
RD WebDesign
DL6ERandAdam Warner
