Skip to content

Migrate to AdminLTE 4 / Bootstrap 5 #3809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
PromoFaux wants to merge 12 commits into
base: development
Choose a base branch
from
+2,446 −4,593
Draft

Migrate to AdminLTE 4 / Bootstrap 5 #3809

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
49f6bd0
Migrate layout shell to AdminLTE 4 / Bootstrap 5
PromoFaux Jul 6, 2026
b0d95fc
Convert box/panel markup to Bootstrap 5 cards across all pages
PromoFaux Jul 6, 2026
6657d28
Replace icheck-bootstrap checkboxes/radios with native Bootstrap 5 fo…
PromoFaux Jul 6, 2026
6deb2e7
Swap remaining jQuery plugins for Bootstrap 5-compatible versions
PromoFaux Jul 6, 2026
4264649
Bump Font Awesome to v7, rename theme CSS to match new layout classes
PromoFaux Jul 6, 2026
b049ef9
Fix Bootstrap 5 tab-switching: active state must live on the link itself
PromoFaux Jul 6, 2026
9f1d215
Fix theme/layout regressions and CSP-blocked icons found in manual te…
PromoFaux Jul 6, 2026
afd6937
Fix settings-level toggle deadlock and All Settings tab layout
PromoFaux Jul 6, 2026
075921f
Fix CSP-blocked select dropdown arrow icon
PromoFaux Jul 6, 2026
37e3813
Fix CI: editorconfig indentation and a codespell false-hit
PromoFaux Jul 6, 2026
19f900c
Fix CI: merge duplicate .card selectors left by box/panel conversion
PromoFaux Jul 6, 2026
f5eec73
Drop colliding .card rule per maintainer review
PromoFaux Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion error403.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ mg.include('scripts/lua/header.lp','r')
?>
</head>
<body class="hold-transition layout-boxed login-page page-<?=pihole.format_path(scriptname)?>">
<div class="box login-box">
<div class="card login-box">
<section style="padding: 15px;">
<h2 class="error-headline text-danger">403</h2>
<div class="error-content">
Expand Down
2 changes: 1 addition & 1 deletion error404.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ mg.include('scripts/lua/header.lp','r')
?>
</head>
<body class="hold-transition layout-boxed login-page page-<?=pihole.format_path(scriptname)?>">
<div class="box login-box">
<div class="card login-box">
<section style="padding: 15px;">
<h2 class="error-headline text-yellow">404</h2>
<div class="error-content">
Expand Down
4 changes: 2 additions & 2 deletions gravity.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ mg.include('scripts/lua/header_authenticated.lp','r')

<!-- Alerts -->
<div id="alertInfo" class="alert alert-info alert-dismissible fade in" role="alert" hidden>
<button type="button" class="close" data-hide="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="btn-close" data-hide="alert" aria-label="Close"></button>
Updating... this may take a while. <strong>Please do not navigate away from or close this page.</strong>
</div>
<div id="alertSuccess" class="alert alert-success alert-dismissible fade in" role="alert" hidden>
<button type="button" class="close" data-hide="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="btn-close" data-hide="alert" aria-label="Close"></button>
Success!
</div>

Expand Down
38 changes: 19 additions & 19 deletions groups-clients.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ mg.include('scripts/lua/header_authenticated.lp','r')
<!-- Domain Input -->
<div class="row">
<div class="col-md-12">
<div class="box" id="add-client">
<!-- /.box-header -->
<div class="box-header with-border">
<h3 class="box-title">
<div class="card" id="add-client">
<!-- /.card-header -->
<div class="card-header">
<h3 class="card-title">
Add a new client
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="form-group col-md-6">
<label for="select">Known clients:</label>
Expand All @@ -40,7 +40,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="new_group">Group assignment:</label>
<div><select class="selectpicker form-control" id="new_group" multiple></select></div>
<div><select class="group-select" id="new_group" multiple></select></div>
</div>
</div>
<div class="row">
Expand All @@ -59,22 +59,22 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" id="btnAdd" class="btn btn-primary pull-right">Add</button>
<div class="card-footer">
<button type="button" id="btnAdd" class="btn btn-primary float-end">Add</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box" id="clients-list">
<div class="box-header with-border">
<h3 class="box-title">
<div class="card" id="clients-list">
<div class="card-header">
<h3 class="card-title">
List of configured clients
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
<table id="clientsTable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
Expand All @@ -87,16 +87,16 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
<button type="button" id="resetButton" class="btn btn-secondary btn-sm text-red hidden">Reset sorting</button>
</div>
<!-- /.box-body -->
<!-- /.card-body -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
</div>

<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/tom-select/tom-select.complete.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap5-toggle/bootstrap5-toggle.jquery.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-clients.js')?>"></script>
Expand Down
60 changes: 30 additions & 30 deletions groups-domains.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,26 @@ mg.include('scripts/lua/header_authenticated.lp','r')
<!-- Domain Input -->
<div class="row">
<div class="col-md-12">
<div class="box" id="add-group">
<div class="box-header with-border">
<h3 class="box-title">
<div class="card" id="add-group">
<div class="card-header">
<h3 class="card-title">
Add a new domain or regex filter
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#tab_domain" aria-controls="tab_domain" aria-expanded="true" role="tab" data-toggle="tab">Domain</a>
<a href="#tab_domain" class="active" aria-controls="tab_domain" aria-expanded="true" role="tab" data-bs-toggle="tab">Domain</a>
</li>
<li role="presentation">
<a href="#tab_regex" aria-controls="tab_regex" aria-expanded="false" role="tab" data-toggle="tab">RegEx filter</a>
<a href="#tab_regex" aria-controls="tab_regex" aria-expanded="false" role="tab" data-bs-toggle="tab">RegEx filter</a>
</li>
</ul>
<div class="tab-content">
<!-- Domain tab -->
<div id="tab_domain" class="tab-pane active fade in">
<div id="tab_domain" class="tab-pane active fade show">
<div class="row">
<div class="col-md-6">
<div class="form-group">
Expand All @@ -52,14 +52,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
<div class="col-lg-3 col-md-6 form-group">
<label for="new_domain_group">Group assignment:</label>
<div><select class="selectpicker form-control" id="new_domain_group" multiple></select></div>
<div><select class="group-select" id="new_domain_group" multiple></select></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<input type="checkbox" id="wildcard_checkbox">
<label for="wildcard_checkbox"><strong>Add domain as wildcard</strong></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="wildcard_checkbox">
<label class="form-check-label" for="wildcard_checkbox"><strong>Add domain as wildcard</strong></label>
<p>Check this box if you want to involve all subdomains. The entered domain will be converted to a RegEx filter while adding.</p>
</div>
</div>
Expand All @@ -85,7 +85,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
<div class="col-lg-3 col-md-6 form-group">
<label for="new_regex_group">Group assignment:</label>
<div><select class="selectpicker form-control" id="new_regex_group" multiple></select></div>
<div><select class="group-select" id="new_regex_group" multiple></select></div>
</div>
</div>
</div>
Expand All @@ -98,7 +98,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
You can add multiple entries at once by separating them with spaces (e.g. <code>example.com example.org</code>).
</p>
</div>
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with buttons">
<div class="btn-toolbar float-end" role="toolbar" aria-label="Toolbar with buttons">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger" id="add_deny">Add to denied domains</button>
</div>
Expand All @@ -107,33 +107,33 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
</div>
</div>
<!-- /.box-body -->
<!-- /.card-body -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
</div>

<!-- Domain List -->
<div class="row">
<div class="col-md-12">
<div class="box" id="domains-list">
<div class="box-header with-border">
<h3 class="box-title">
<div class="card" id="domains-list">
<div class="card-header">
<h3 class="card-title">
List of domains
</h3>
<div class="filter_types">
<div class="line">
<span><input type="checkbox" name="typ" value="allow/exact" id="typ0" checked><label for="typ0">Exact allow</label></span>
<span><input type="checkbox" name="typ" value="allow/regex" id="typ2" checked><label for="typ2">Regex allow</label></span>
<span class="form-check"><input class="form-check-input" type="checkbox" name="typ" value="allow/exact" id="typ0" checked><label class="form-check-label" for="typ0">Exact allow</label></span>
<span class="form-check"><input class="form-check-input" type="checkbox" name="typ" value="allow/regex" id="typ2" checked><label class="form-check-label" for="typ2">Regex allow</label></span>
</div>
<div class="line">
<span><input type="checkbox" name="typ" value="deny/exact" id="typ1" checked><label for="typ1">Exact deny</label></span>
<span><input type="checkbox" name="typ" value="deny/regex" id="typ3" checked><label for="typ3">Regex deny</label></span>
<span class="form-check"><input class="form-check-input" type="checkbox" name="typ" value="deny/exact" id="typ1" checked><label class="form-check-label" for="typ1">Exact deny</label></span>
<span class="form-check"><input class="form-check-input" type="checkbox" name="typ" value="deny/regex" id="typ3" checked><label class="form-check-label" for="typ3">Regex deny</label></span>
</div>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
<table id="domainsTable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
Expand All @@ -148,16 +148,16 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
<button type="button" id="resetButton" class="btn btn-secondary btn-sm text-red hidden">Reset sorting</button>
</div>
<!-- /.box-body -->
<!-- /.card-body -->
</div>
<!-- /.box -->
<!-- /.card -->
</div>
</div>

<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/tom-select/tom-select.complete.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap5-toggle/bootstrap5-toggle.jquery.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-domains.js')?>"></script>

Expand Down
48 changes: 24 additions & 24 deletions groups-lists.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ mg.include('scripts/lua/header_authenticated.lp','r')
<!-- Domain Input -->
<div class="row">
<div class="col-md-12">
<div class="box" id="add-group">
<!-- /.box-header -->
<div class="box-header with-border">
<h3 class="box-title">
<div class="card" id="add-group">
<!-- /.card-header -->
<div class="card-header">
<h3 class="card-title">
Add a new subscribed list
</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="form-group col-md-6">
<label for="new_address">Address:</label>
Expand All @@ -38,22 +38,22 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="new_group">Group assignment:</label>
<div><select class="selectpicker form-control" id="new_group" multiple></select></div>
<div><select class="group-select" id="new_group" multiple></select></div>
</div>
</div>
</div>
<div class="box-footer clearfix">
<div class="card-footer">
<strong>Hints:</strong>
<ol>
<li>Please run <code>pihole -g</code> or update your gravity list <a href="<?=webhome?>gravity">online</a> after modifying your lists.</li>
<li>Multiple lists can be added by separating each <em>unique</em> URL with a space or comma</li>
</ol>
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with buttons">
<div class="btn-toolbar float-end" role="toolbar" aria-label="Toolbar with buttons">
<div class="btn-group" role="group">
<button type="button" id="btnAddBlock" class="btn btn-danger pull-right">Add blocklist</button>
<button type="button" id="btnAddBlock" class="btn btn-danger float-end">Add blocklist</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="btnAddAllow" class="btn btn-success pull-right">Add allowlist</button>
<button type="button" id="btnAddAllow" class="btn btn-success float-end">Add allowlist</button>
</div>
</div>
</div>
Expand All @@ -62,14 +62,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
<div class="row">
<div class="col-md-12">
<div class="box" id="lists-list">
<div class="box-header with-border">
<h3 class="box-title">
<div class="card" id="lists-list">
<div class="card-header">
<h3 class="card-title">
Subscribed lists
</h3>
</div><!-- /.box-header -->
</div><!-- /.card-header -->

<div class="box-body">
<div class="card-body">
<table id="listsTable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
Expand All @@ -85,12 +85,12 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Reset sorting</button>
</div><!-- /.box-body -->
<button type="button" id="resetButton" class="btn btn-secondary btn-sm text-red hidden">Reset sorting</button>
</div><!-- /.card-body -->

<div class="box-footer clearfix">
<div class="card-footer">
<div class="row">
<div class="col-xs-12">
<div class="col-12">
<p><strong>Hint:</strong> Click on the icons (first and second columns) to get additional information about your lists. The icons correspond to the health of the list.</p>
</div>
</div>
Expand All @@ -116,14 +116,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
</div>
</div>
</div>
</div><!-- /.box-footer -->
</div><!-- /.card-footer -->

</div><!-- /.box -->
</div><!-- /.card -->
</div>
</div>

<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/tom-select/tom-select.complete.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap5-toggle/bootstrap5-toggle.jquery.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-lists.js')?>"></script>

Expand Down
Loading