mirror of
https://github.com/pi-hole/web.git
synced 2026-08-23 06:39:09 +01:00
- 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>
1 line
6.5 KiB
Plaintext
1 line
6.5 KiB
Plaintext
{"version":3,"sources":["../src/main/css/bootstrap5-toggle.css"],"names":[],"mappings":"AAIA,2BAEE,2BAAsC,CACtC,iBAAmB,CACnB,cAAgB,CAChB,mBACF,CAEA,iDAEE,oBAAqB,CACrB,mBACF,CAEA,QACE,iBAAkB,CAClB,eACF,CACA,kEAEE,+BAAgC,CAChC,uCAAwC,CACxC,6CACF,CACA,sFAEE,gCAAiC,CACjC,UACF,CACA,6BACE,YACF,CACA,sBACE,iBAAkB,CAClB,UAAW,CACX,KAAM,CACN,QAAS,CACT,MAAO,CACP,oBAAsB,CACtB,4BAA8B,CAC9B,gBAAiB,CACjB,qBAAsB,CACtB,wBACF,CACA,2BACE,cACF,CACA,0BACE,UACF,CACA,oCACE,SACF,CACA,iCACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,MAAO,CACP,SAAU,CACV,QAAS,CACT,QAAS,CACT,eACF,CACA,kCACE,iBAAkB,CAClB,KAAM,CACN,QAAS,CACT,QAAS,CACT,OAAQ,CACR,QAAS,CACT,QAAS,CACT,eAAgB,CAChB,eACF,CACA,qCACE,iBAAkB,CAClB,aAAc,CACd,aAAgB,CAChB,gBAAmB,CACnB,WAAY,CACZ,OAAU,CACV,kBAAmB,CACnB,gCAAiC,CACjC,4BACF,CAMA,6FAEE,iBACF,CAEA,iFAGE,kCAAmC,CACnC,8BACF,CACA,mFAGE,oCAAqC,CACrC,gCACF,CACA,iFAGE,kCAAmC,CACnC,8BACF,CACA,gFAGE,iCAAkC,CAClC,6BACF,CACA,iFAGE,kCAAmC,CACnC,8BACF,CACA,8EAGE,+BAAgC,CAChC,2BACF,CACA,+EAGE,gCAAiC,CACjC,4BACF,CACA,8EAGE,+BAAgC,CAChC,2BACF,CAIA,YACE,gBAAiB,CACjB,kBACF,CACA,qCACE,oBACF,CACA,sCACE,mBACF,CAGA,eACE,cAAe,CACf,mBACF,CACA,wCACE,kBACF,CACA,yCACE,iBACF,CACA,4CACE,YACF,CAGA,eACE,kBAAmB,CACnB,mBACF,CACA,wCACE,kBACF,CACA,yCACE,iBACF,CAGA,eACE,iBAAkB,CAClB,mBACF,CACA,wCACE,mBACF,CACA,yCACE,kBACF","file":"bootstrap5-toggle.min.css","sourcesContent":["/*\r\n* @added 3.0.0: Return support for \"*-xs\" removed in Bootstrap-4\r\n* @see: [Comment](https://github.com/twbs/bootstrap/issues/21881#issuecomment-341972830)\r\n*/\r\n.btn-group-xs > .btn,\r\n.btn-xs {\r\n padding: 0.35rem 0.4rem 0.25rem 0.4rem;\r\n font-size: 0.875rem;\r\n line-height: 0.5;\r\n border-radius: 0.2rem;\r\n}\r\n\r\n.checkbox label .toggle,\r\n.checkbox-inline .toggle {\r\n margin-left: -1.25rem;\r\n margin-right: 0.35rem;\r\n}\r\n\r\n.toggle {\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.toggle:focus > .toggle-group > .btn,\r\n.toggle:hover > .toggle-group > .btn {\r\n color: var(--bs-btn-hover-color);\r\n background-color: var(--bs-btn-hover-bg);\r\n border-color: var(--bs-btn-hover-border-color);\r\n}\r\n.toggle:hover > .toggle-group > .toggle-handle,\r\n.toggle:focus > .toggle-group > .toggle-handle {\r\n background-color: var(--bs-light);\r\n opacity: 0.5;\r\n}\r\n.toggle > input[type=\"checkbox\"] {\r\n display: none;\r\n}\r\n.toggle > .toggle-group {\r\n position: absolute;\r\n width: 200%;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n transition: left 0.35s;\r\n -webkit-transition: left 0.35s;\r\n user-select: none;\r\n -moz-user-select: none;\r\n -webkit-user-select: none;\r\n}\r\n.toggle > .toggle-group > span {\r\n cursor: pointer;\r\n}\r\n.toggle.off > .toggle-group {\r\n left: -100%;\r\n}\r\n.toggle.indeterminate > .toggle-group {\r\n left: -50%;\r\n}\r\n.toggle > .toggle-group > .toggle-on {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 50%;\r\n margin: 0;\r\n border: 0;\r\n border-radius: 0;\r\n}\r\n.toggle > .toggle-group > .toggle-off {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n right: 0;\r\n margin: 0;\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: none; /* Bootstrap 4.0 Support via (Issue #186)[https://github.com/minhur/bootstrap-toggle/issues/186]) */\r\n}\r\n.toggle > .toggle-group > .toggle-handle {\r\n position: relative;\r\n margin: 0 auto;\r\n padding-top: 0px;\r\n padding-bottom: 0px;\r\n height: 100%;\r\n width: 0px;\r\n border-width: 0 1px;\r\n background-color: var(--bs-light);\r\n border-color: var(--bs-light);\r\n}\r\n\r\n/** Support for input-group\r\n * @author (bryan-brancotte)[https://github.com/bryan-brancotte]\r\n * @see https://github.com/gitbrent/bootstrap4-toggle/issues/32#issuecomment-616974580\r\n */\r\n.input-group .toggle > .toggle-group > .toggle-on,\r\n.input-group .toggle > .toggle-group > .toggle-off {\r\n position: absolute;\r\n}\r\n\r\n.toggle:not(:hover):not(:focus).btn-outline-primary\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-primary);\r\n border-color: var(--bs-primary);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-secondary\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-secondary);\r\n border-color: var(--bs-secondary);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-success\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-success);\r\n border-color: var(--bs-success);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-danger\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-danger);\r\n border-color: var(--bs-danger);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-warning\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-warning);\r\n border-color: var(--bs-warning);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-info\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-info);\r\n border-color: var(--bs-info);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-light\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-light);\r\n border-color: var(--bs-light);\r\n}\r\n.toggle:not(:hover):not(:focus).btn-outline-dark\r\n > .toggle-group\r\n > .toggle-handle {\r\n background-color: var(--bs-dark);\r\n border-color: var(--bs-dark);\r\n}\r\n\r\n/* NOTE: Must come first, so classes below override as needed */\r\n/* [default] (bootstrap-4.1.3 - .btn - h:38px) */\r\n.toggle.btn {\r\n min-width: 3.7rem;\r\n min-height: 2.15rem;\r\n}\r\n.toggle > .toggle-group > .toggle-on.btn {\r\n padding-right: 1.5rem;\r\n}\r\n.toggle > .toggle-group > .toggle-off.btn {\r\n padding-left: 1.5rem;\r\n}\r\n\r\n/* `lg` (bootstrap-4.1.3 - .btn - h:48px) */\r\n.toggle.btn-lg {\r\n min-width: 5rem;\r\n min-height: 2.815rem;\r\n}\r\n.toggle > .toggle-group > .toggle-on.btn-lg {\r\n padding-right: 2rem;\r\n}\r\n.toggle > .toggle-group > .toggle-off.btn-lg {\r\n padding-left: 2rem;\r\n}\r\n.toggle > .toggle-group > .toggle-handle.btn-lg {\r\n width: 2.5rem;\r\n}\r\n\r\n/* `sm` (bootstrap-4.1.3 - .btn - h:31px) */\r\n.toggle.btn-sm {\r\n min-width: 3.125rem;\r\n min-height: 1.938rem;\r\n}\r\n.toggle > .toggle-group > .toggle-on.btn-sm {\r\n padding-right: 1rem;\r\n}\r\n.toggle > .toggle-group > .toggle-off.btn-sm {\r\n padding-left: 1rem;\r\n}\r\n\r\n/* `xs` (bootstrap-3.3 - .btn - h:22px) */\r\n.toggle.btn-xs {\r\n min-width: 2.19rem;\r\n min-height: 1.375rem;\r\n}\r\n.toggle > .toggle-group > .toggle-on.btn-xs {\r\n padding-right: 0.8rem;\r\n}\r\n.toggle > .toggle-group > .toggle-off.btn-xs {\r\n padding-left: 0.8rem;\r\n}\r\n"]} |