Settings Page - Apply small adjustments

- consistent indentation and widths for fields and labels
- use class `form-control` to format every form field
- add some line breaks to improve readability

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
This commit is contained in:
RD WebDesign
2024-04-02 16:59:57 -03:00
parent a8098e8069
commit 6f65368759
6 changed files with 50 additions and 37 deletions

View File

@@ -36,7 +36,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
<div class="row">
<div class="col-md-12">
<p><strong>Important:</strong> Those input fields accept regex entries only. Please refer to <a href="https://docs.pi-hole.net/regex/tutorial/" rel="noopener" target="_blank">our guide</a> how to construct valid regex entries.
<p><strong>Important</strong>:<br>Those input fields accept regex entries only.<br>Please refer to <a href="https://docs.pi-hole.net/regex/tutorial/" rel="noopener" target="_blank">our guide</a> how to construct valid regex entries.
</div>
</div>
</div>
@@ -50,7 +50,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="box-body">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="row form-group">
<div class="col-lg-3">
<label for="webserver.interface.theme">Used theme:</label>
</div>
@@ -123,19 +123,19 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<div class="col-sm-6">
<label for="webserver.api.temp.limit"><strong>Temperature limit for "hot":</strong></label>
</div>
<div class="col-md-6">
<input type="number" data-type="integer" id="webserver.api.temp.limit" data-key="webserver.api.temp.limit">
<div class="col-sm-6">
<input class="form-control" type="number" data-type="integer" id="webserver.api.temp.limit" data-key="webserver.api.temp.limit">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="row form-group">
<div class="col-sm-6">
<label for="webserver.api.temp.unit">Temperature unit:</label>
</div>
<div class="col-md-6">
<div class="col-sm-6">
<select id="webserver.api.temp.unit" data-key="webserver.api.temp.unit" class="form-control" placeholder="">
<option disabled selected>Loading...</option>
</select>

View File

@@ -23,8 +23,10 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="box-body">
<div class="row">
<div class="col-md-12">
<div><input type="checkbox" id="dhcp.active" data-key="dhcp.active"><label for="dhcp.active"><strong>DHCP server enabled</strong></label></div>
<p id="dhcpnotice" lookatme-text="Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!">Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!</p>
<div>
<input type="checkbox" id="dhcp.active" data-key="dhcp.active"><label for="dhcp.active"><strong>DHCP server enabled</strong></label>
<p class="help-block" id="dhcpnotice" lookatme-text="Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!">Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!</p>
</div>
</div>
<div class="col-xs-12">
<label style="margin-top: 10px">Range of IP addresses to hand out</label>
@@ -75,8 +77,10 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<p>Leave the netmask field empty to have Pi-hole infer it from the configured IP address of your device. If you want to specify a netmask, you can use the format <code>255.255.255.0</code>.</p>
</div>
<div class="col-md-12">
<div><input type="checkbox" id="dhcp.ipv6" data-key="dhcp.ipv6" class="DHCPgroup">&nbsp;<label for="dhcp.ipv6"><strong>Enable additional IPv6 support (SLAAC + RA)</strong></label></div>
<p>Enable this option to enable IPv6 support for the Pi-hole DHCP server. This will allow the Pi-hole to hand out IPv6 addresses to clients and also provide IPv6 router advertisements (RA) to clients. This option is only useful if the Pi-hole is configured with an IPv6 address.</p>
<div>
<input type="checkbox" id="dhcp.ipv6" data-key="dhcp.ipv6" class="DHCPgroup">&nbsp;<label for="dhcp.ipv6"><strong>Enable additional IPv6 support (SLAAC + RA)</strong></label>
<p class="help-block">Enable this option to enable IPv6 support for the Pi-hole DHCP server. This will allow the Pi-hole to hand out IPv6 addresses to clients and also provide IPv6 router advertisements (RA) to clients. This option is only useful if the Pi-hole is configured with an IPv6 address.</p>
</div>
</div>
</div>
</div>
@@ -103,13 +107,17 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
<div class="row">
<div class="col-md-6">
<div><input type="checkbox" id="dhcp.rapidCommit" data-key="dhcp.rapidCommit" class="DHCPgroup">&nbsp;<label for="dhcp.rapidCommit"><strong>Enable DHCPv4 rapid commit (fast address assignment)</strong></label></div>
<p>The DHCPv4 rapid commit option allows the Pi-hole DHCP server to assign an IP address to a client right away. This can notably speed up the address assignment process and you will notice, e.g., faster WiFi joins in your network. This option should only be enabled if the Pi-hole DHCP server is the only DHCP server in your network.</p>
<div class="col-sm-12">
<div>
<input type="checkbox" id="dhcp.rapidCommit" data-key="dhcp.rapidCommit" class="DHCPgroup">&nbsp;<label for="dhcp.rapidCommit"><strong>Enable DHCPv4 rapid commit (fast address assignment)</strong></label>
<p class="help-block">The DHCPv4 rapid commit option allows the Pi-hole DHCP server to assign an IP address to a client right away. This can notably speed up the address assignment process and you will notice, e.g., faster WiFi joins in your network. This option should only be enabled if the Pi-hole DHCP server is the only DHCP server in your network.</p>
</div>
</div>
<div class="col-md-6">
<div><input type="checkbox" id="dhcp.multiDNS" data-key="dhcp.multiDNS" class="DHCPgroup">&nbsp;<label for="dhcp.multiDNS"><strong>Advertise DNS server multiple times</strong></label></div>
<p>Advertise DNS server multiple times to clients. Some devices will add their own proprietary DNS servers to the list of DNS servers, which can cause issues with Pi-hole. This option will advertise the Pi-hole DNS server multiple times to clients, which should prevent this from happening.</p>
<div class="col-sm-12">
<div>
<input type="checkbox" id="dhcp.multiDNS" data-key="dhcp.multiDNS" class="DHCPgroup">&nbsp;<label for="dhcp.multiDNS"><strong>Advertise DNS server multiple times</strong></label>
<p class="help-block">Advertise DNS server multiple times to clients. Some devices will add their own proprietary DNS servers to the list of DNS servers, which can cause issues with Pi-hole. This option will advertise the Pi-hole DNS server multiple times to clients, which should prevent this from happening.</p>
</div>
</div>
</div>
</div>

View File

@@ -37,7 +37,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
<div class="col-sm-12">
<div class="box collapsed-box">
<div class="box-header with-border pointer no-user-select" data-widget="collapse">
<div class="box-header with-border pointer" data-widget="collapse">
<h3 class="box-title">Custom DNS servers <span id="custom-servers-title"></span></h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool">
@@ -75,7 +75,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div>
<input type="checkbox" id="dns.expandHosts" data-key="dns.expandHosts" title="domain-needed">
<label for="dns.expandHosts"><strong>Expand hostnames</strong></label>
<p>If set, the domain is added to simple names (without a period) in /etc/hosts in the same way as for DHCP-derived names.</p>
<p class="help-block">If set, the domain is added to simple names (without a period) in /etc/hosts in the same way as for DHCP-derived names.</p>
</div>
</div>
</div>
@@ -119,7 +119,8 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<h4>Recommended setting</h4>
<div>
<input type="radio" name="DNSinterface" id="dns.listeningMode-LOCAL" data-key="dns.listeningMode" value="local">
<label for="dns.listeningMode-LOCAL"><strong>Allow only local requests</strong><br>Allows only queries from devices that are at most one hop away (local devices)</label>
<label for="dns.listeningMode-LOCAL"><strong>Allow only local requests</strong>
<p class="help-block">Allows only queries from devices that are at most one hop away (local devices)</p>
</div>
</div>
<div class="danger-area">
@@ -136,7 +137,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<input type="radio" name="DNSinterface" id="dns.listeningMode-ALL" data-key="dns.listeningMode" value="all">
<label for="dns.listeningMode-ALL"><strong>Permit all origins</strong></label>
</div>
<p>These options are dangerous on devices
<p class="help-block">These options are dangerous on devices
directly connected to the Internet such as cloud instances and are only safe if your
Pi-hole is properly firewalled. In a typical at-home setup where your Pi-hole is
located within your local network (and you have <strong>not</strong> forwarded port 53
@@ -158,7 +159,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div>
<input type="checkbox" id="dns.domainNeeded" data-key="dns.domainNeeded" title="domain-needed">
<label for="dns.domainNeeded"><strong>Never forward non-FQDN <code>A</code> and <code>AAAA</code> queries</strong></label>
<p>Tells Pi-hole to never forward A or AAAA queries for plain
<p class="help-block">Tells Pi-hole to never forward A or AAAA queries for plain
names, without dots or domain parts, to upstream nameservers. If
the name is not known from <code>/etc/hosts</code> or DHCP then a "not found"
answer is returned.<br>
@@ -169,18 +170,18 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div>
<input type="checkbox" id="dns.bogusPriv" data-key="dns.bogusPriv" title="bogus-priv">
<label for="dns.bogusPriv"><strong>Never forward reverse lookups for private IP ranges</strong></label>
<p>All reverse lookups for private IP ranges (i.e., <code>192.168.0.x/24</code>, etc.)
<p class="help-block">All reverse lookups for private IP ranges (i.e., <code>192.168.0.x/24</code>, etc.)
which are not found in <code>/etc/hosts</code> or the DHCP leases are answered
with "no such domain" rather than being forwarded upstream. The set
of prefixes affected is the list given in <a href="https://tools.ietf.org/html/rfc6303">RFC6303</a>.</p>
<p><strong>Important</strong>: Enabling these two options may increase your privacy,
<p><strong>Important:</strong><br>Enabling these two options may increase your privacy,
but may also prevent you from being able to access. Make sure you have set up conditional forwarding in this case.</p>
</div>
<br>
<div>
<input type="checkbox" id="dns.dnssec" data-key="dns.dnssec">
<label for="dns.dnssec"><strong>Use DNSSEC</strong></label>
<p>Validate DNS replies and cache DNSSEC data. When forwarding DNS
<p class="help-block">Validate DNS replies and cache DNSSEC data. When forwarding DNS
queries, Pi-hole requests the DNSSEC records needed to validate
the replies. If a domain fails validation or the upstream does not
support DNSSEC, this setting can cause issues resolving domains.

View File

@@ -53,11 +53,11 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
<br>
<div class="row-flex">
<input type="number" id="database.maxDBdays" data-key="database.maxDBdays" data-type="integer" value="" min="0" step="10" style="width: 5em;">
<input class="form-control" type="number" id="database.maxDBdays" data-key="database.maxDBdays" data-type="integer" value="" min="0" step="10">
<label for="database.maxDBdays"><strong>Maximum number of days to keep queries in the database</strong></label>
</div>
<div class="row-flex">
<input type="number" id="database.network.expire" data-key="database.network.expire" data-type="integer" value="" min="0" step="10" style="width: 5em;">
<input class="form-control" type="number" id="database.network.expire" data-key="database.network.expire" data-type="integer" value="" min="0" step="10">
<label for="database.network.expire"><strong>How long should IP addresses be kept in the network_addresses table [days]?</strong></label>
</div>
<p>IP addresses (and associated host names) older than the specified number of days are removed to avoid dead entries in the network overview table.</p>
@@ -80,22 +80,22 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div>
<input type="radio" id="misc.privacylevel-0" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="0">
<label for="misc.privacylevel-0"><strong>Show everything and record everything</strong></label>
<p>Gives maximum amount of statistics</p>
<p class="help-block">Gives maximum amount of statistics</p>
</div>
<div>
<input type="radio" id="misc.privacylevel-1" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="1">
<label for="misc.privacylevel-1"><strong>Hide domains: Display and store all domains as <code>hidden</code></strong></label>
<p>This disables the Top Permitted Domains and Top Blocked Domains tables on the dashboard</p>
<p class="help-block">This disables the Top Permitted Domains and Top Blocked Domains tables on the dashboard</p>
</div>
<div>
<input type="radio" id="misc.privacylevel-2" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="2">
<label for="misc.privacylevel-2"><strong> Hide domains and clients: Display and store all domains as <code>hidden</code> and all clients as <code>0.0.0.0</code> </strong></label>
<p>This disables all tables on the dashboard</p>
<p class="help-block">This disables all tables on the dashboard</p>
</div>
<div>
<input type="radio" id="misc.privacylevel-3" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="3">
<label for="misc.privacylevel-3"><strong> Anonymous mode: This disables basically everything except the live anonymous statistics</strong></label>
<p>No history is saved at all to the database, and nothing is shown in the query log. Also, there are no top item lists. Note that this also largely disabled regex capabilities.</p>
<p class="help-block">No history is saved at all to the database, and nothing is shown in the query log. Also, there are no top item lists. Note that this also largely disabled regex capabilities.</p>
</div>
<p>The privacy level may be increased at any time without having to restart the DNS resolver. However, note that the DNS resolver needs to be restarted when lowering the privacy level. This restarting is automatically done when saving.</p>
</div>

View File

@@ -20,11 +20,11 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<h3 class="box-title">Export your Pi-hole's configuration</h3>
</div>
<div class="box-body">
<p>Warning: This archive contains sensitive information about your Pi-hole installation, e.g. your 2FA-TOTP secret (if enabled). Please be careful with this file and do not share it with anyone even if they claim to help you.</p>
<? if not is_secure then ?><p class='text-danger'>Warning: You are currently not using an end-to-end encryption. This means that secrets like your 2FA-TOTP secret will be transmitted in plain text. We recommend to use HTTPS when exporting your configuration.</p><? end ?>
<p><strong>Warning:</strong><br>This archive contains sensitive information about your Pi-hole installation, e.g. your 2FA-TOTP secret (if enabled). Please be careful with this file and do not share it with anyone even if they claim to help you.</p>
<? if not is_secure then ?><p class='text-danger'><strong>Warning:</strong><br>You are currently not using an end-to-end encryption. This means that secrets like your 2FA-TOTP secret will be transmitted in plain text. We recommend to use HTTPS when exporting your configuration.</p><? end ?>
<div class="pull-right">
<a class="btn btn-app btn-success" id="GETTeleporter" target="_blank">
<i class="fa fa-save"></i><br>Export
<i class="fa fa-save fa-xl"></i><br>Export
</a>
</div>
</div>
@@ -39,11 +39,12 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="form-group">
<label for="file">File input</label>
<input type="file" name="file" id="file" accept="application/gzip,application/zip">
<br>
<p class="help-block">When importing settings from a <em>newer</em> version of Pi-hole, not yet existing settings will be ignored. When importing from an <em>older</em> version of Pi-hole, settings for newer features will be initialized with their default values.</p>
</div>
<div class="pull-right">
<a class="btn btn-app btn-success" id="submit-import">
<i class="fa fa-upload"></i><br>Import
<i class="fa fa-upload fa-xl"></i><br>Import
</a>
</div>
</div>

View File

@@ -1444,6 +1444,9 @@ table.dataTable tbody > tr > .selected {
margin: 0.5em 0;
align-items: start;
}
.row-flex .form-control {
width: auto;
}
.log-entry {
padding-left: 0.5em;