Files
web/groups.lp
RD WebDesign 8c49b049a2 Many small adjustments
Login page:
- use proper BS5 classes to set margins, padding and text styles;
- use "card card-danger" consistently, for all error messages;
- remove old class and change "show password" button style;
- adjust the footer buttons.

Warning count badge (top bar and sidebar):
- Use the new HTML structure to show sidebar badge
- Use BS5 classes for colors

Dashboard:
- Fix progress bars alignment

Query Log:
- Use the default padding for Advanced filtering card header
- Apply BS5 styles to search fields (table footer)

Domains and Lists (group management):
- Add small gap between buttons

DNS Settings:
- Replace old custom classes with BS5 callout and border-* classes
- Settings DNS interface card

Webserver/API Settings:
- Remove old commented code (leftover from v5)

Local DNS Records Settings:
- Remove double title from both cards

Privacy Settings:
- Fix "Privacy-related database settings" card layout

Gravity page:
- Simplify output element classes

Search Lists:
- Remove unnecessary input-group-btn class

General changes:
- Replace old .form-group class with BS5 .mb-3

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
2026-09-27 22:30:54 -03:00

98 lines
4.0 KiB
Lua

<? --[[
* Pi-hole: A black hole for Internet advertisements
* (c) 2019 Pi-hole, LLC (https://pi-hole.net)
* Network-wide ad blocking via your own hardware.
*
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license.
--]]
mg.include('scripts/lua/header_authenticated.lp','r')
?>
<!-- Title/Header -->
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="mb-0">Group management</h1>
</div>
</div>
</div>
</div>
<div class="app-content">
<div class="container-fluid">
<!-- Group Input -->
<div class="row">
<div class="col-md-12">
<div class="card" id="add-group">
<!-- /.card-header -->
<div class="card-header">
<h3 class="card-title">
Add a new group
</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="mb-3 col-md-6">
<label for="new_name">Name:</label>
<input id="new_name" type="text" class="form-control" placeholder="Group name">
</div>
<div class="mb-3 col-md-6">
<label for="new_comment">Comment:</label>
<input id="new_comment" type="text" class="form-control" placeholder="Group comment (optional)">
</div>
</div>
</div>
<div class="card-footer">
<strong>Hints:</strong>
<ol>
<li>Multiple groups can be added by separating each group name with a space or comma</li>
<li>Group names can have spaces if entered in quotes. e.g "My New Group"</li>
</ol>
<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="card" id="groups-list">
<div class="card-header">
<h3 class="card-title">
List of groups
</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="groupsTable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>ID</th>
<th></th>
<th>Name</th>
<th>Status</th>
<th>Comment</th>
<th>&nbsp;</th>
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-secondary btn-sm text-red hidden">Reset sorting</button>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div><!-- /.container-fluid -->
</div><!-- /.app-content -->
<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.js')?>"></script>
<? mg.include('scripts/lua/footer.lp','r')?>