mirror of
https://github.com/pi-hole/web.git
synced 2024-12-06 19:36:21 +01:00
Local records: better layout to avoid text overlapping in smaller screens (#2864)
This commit is contained in:
RD WebDesign
GitHub
@@ -49,7 +49,7 @@ function populateDataTable(endpoint) {
|
||||
columns = [
|
||||
{ data: null, render: CNAMEdomain },
|
||||
{ data: null, render: CNAMEtarget },
|
||||
{ data: null, render: CNAMEttl },
|
||||
{ data: null, width: "40px", render: CNAMEttl },
|
||||
{ data: null, width: "22px", orderable: false },
|
||||
];
|
||||
}
|
||||
@@ -73,6 +73,7 @@ function populateDataTable(endpoint) {
|
||||
type: "GET",
|
||||
dataSrc: `config.dns.${endpoint}`,
|
||||
},
|
||||
autoWidth: false,
|
||||
columns: columns,
|
||||
columnDefs: [
|
||||
{
|
||||
@@ -99,7 +100,7 @@ function populateDataTable(endpoint) {
|
||||
$(`td:eq(${endpoint === "hosts" ? 2 : 3})`, row).html(button);
|
||||
},
|
||||
dom:
|
||||
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
|
||||
"<'row'<'col-sm-5'l><'col-sm-7'f>>" +
|
||||
"<'row'<'col-sm-12'p>>" +
|
||||
"<'row'<'col-sm-12'<'table-responsive'tr>>>" +
|
||||
"<'row'<'col-sm-12'p>>" +
|
||||
@@ -264,4 +265,7 @@ $(document).ready(function () {
|
||||
console.log(exception); // eslint-disable-line no-console
|
||||
});
|
||||
});
|
||||
|
||||
// Add a small legend below the CNAME table
|
||||
$("#cnameRecords-Table").after("<small>* <b>TTL</b> in seconds <i>(optional)</i></small>");
|
||||
});
|
||||
|
||||
+54
-83
@@ -14,125 +14,96 @@ PageTitle = "Local DNS Settings"
|
||||
mg.include('scripts/pi-hole/lua/settings_header.lp','r')
|
||||
?>
|
||||
<div class="row">
|
||||
<div class="col-md-6 settings-level-1">
|
||||
<div class="col-md-12 col-lg-6 settings-level-1">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title" id="title-hosts" data-configkeys="dns.hosts">Local DNS records</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box collapsed-box">
|
||||
<!-- /.box-header -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
Add new DNS record
|
||||
</h3>
|
||||
<div class="box-tools pull-right">
|
||||
<button type="button" class="btn btn-box-tool" data-configkeys="hosts" data-widget="collapse"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="domain">Domain:</label>
|
||||
<input id="Hdomain" type="url" class="form-control" data-configkeys="hosts" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="target">IP address:</label>
|
||||
<input id="Hip" type="text" class="form-control" data-configkeys="hosts" placeholder="Associated IP address" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer clearfix">
|
||||
<strong>Note:</strong>
|
||||
<p>Adding/removing local DNS records will flush the cache but does not require a restart of the DNS server.</p>
|
||||
<button type="button" id="btnAdd-host" class="btn btn-primary pull-right" data-configkeys="hosts">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h3 class="box-title">List of local DNS records</h3>
|
||||
<!-- /.box-header -->
|
||||
<table id="hosts-Table" class="table table-striped table-bordered" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>IP</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>IP</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot class="add-new-item">
|
||||
<tr>
|
||||
<th>
|
||||
<input id="Hdomain" type="url" class="form-control" data-configkeys="hosts" placeholder="Domain" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</th>
|
||||
<th>
|
||||
<input id="Hip" type="text" class="form-control" data-configkeys="hosts" placeholder="Associated IP" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</th>
|
||||
<th>
|
||||
<button type="button" id="btnAdd-host" class="btn btn-primary btn-xs" data-configkeys="hosts"><i class="fa fa-plus"></i></button>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Clear Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<strong>Note:</strong>
|
||||
<p>Adding/removing local DNS records will flush the cache but does not require a restart of the DNS server.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 settings-level-1">
|
||||
<div class="col-md-12 col-lg-6 settings-level-1">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title" id="title-cnameRecords" data-configkeys="dns.cnameRecords">Local CNAME records records</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box collapsed-box">
|
||||
<!-- /.box-header -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
Add new CNAME record
|
||||
</h3>
|
||||
<div class="box-tools pull-right">
|
||||
<button type="button" class="btn btn-box-tool" data-configkeys="cnameRecords" data-widget="collapse"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-5">
|
||||
<label for="domain">Domain:</label>
|
||||
<input id="Cdomain" type="url" class="form-control" data-configkeys="cnameRecords" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</div>
|
||||
<div class="form-group col-md-5">
|
||||
<label for="target">Target Domain:</label>
|
||||
<input id="Ctarget" type="url" class="form-control" data-configkeys="cnameRecords" placeholder="Associated Target Domain" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label for="target">TTL (optional):</label>
|
||||
<input id="Cttl" type="numeric" class="form-control" data-configkeys="cnameRecords" placeholder="TTL in seconds" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer clearfix">
|
||||
<strong>Note:</strong>
|
||||
<p>The target of a <code>CNAME</code> must be a domain that the Pi-hole already has in its cache or is authoritative for. This is a universal limitation of <code>CNAME</code> records.</p>
|
||||
<p>The reason for this is that Pi-hole will not send additional queries upstream when serving <code>CNAME</code> replies. As consequence, if you set a target that isn't already known, the reply to the client may be incomplete. Pi-hole just returns the information it knows at the time of the query. This results in certain limitations for <code>CNAME</code> targets,
|
||||
for instance, only <i>active</i> DHCP leases work as targets - mere DHCP <i>leases</i> aren't sufficient as they aren't (yet) valid DNS records.</p>
|
||||
<p>Additionally, you can't <code>CNAME</code> external domains (<code>bing.com</code> to <code>google.com</code>) successfully as this could result in invalid SSL certificate errors when the target server does not serve content for the requested domain.</p>
|
||||
<p>Adding/removing local CNAME records will restart the DNS server.</p>
|
||||
<button type="button" id="btnAdd-cname" class="btn btn-primary pull-right" data-configkeys="cnameRecords">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h3 class="box-title">List of local CNAME records</h3>
|
||||
<!-- /.box-header -->
|
||||
<table id="cnameRecords-Table" class="table table-striped table-bordered" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Target</th>
|
||||
<th>TTL</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Target</th>
|
||||
<th>TTL *</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot class="add-new-item">
|
||||
<tr>
|
||||
<th>
|
||||
<input id="Cdomain" type="url" class="form-control" data-configkeys="cnameRecords" placeholder="Domain" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</th>
|
||||
<th>
|
||||
<input id="Ctarget" type="url" class="form-control" data-configkeys="cnameRecords" placeholder="Target Domain" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</th>
|
||||
<th>
|
||||
<input id="Cttl" type="numeric" class="form-control" data-configkeys="cnameRecords" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
|
||||
</th>
|
||||
<th>
|
||||
<button type="button" id="btnAdd-cname" class="btn btn-primary btn-xs" data-configkeys="cnameRecords"><i class="fa fa-plus"></i></button>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<button type="button" id="resetButton" class="btn btn-default btn-sm text-red hidden">Clear Filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<strong>Note:</strong>
|
||||
<p>The target of a <code>CNAME</code> must be a domain that the Pi-hole already has in its cache or is authoritative for. This is a universal limitation of <code>CNAME</code> records.</p>
|
||||
<p>The reason for this is that Pi-hole will not send additional queries upstream when serving <code>CNAME</code> replies. As consequence, if you set a target that isn't already known, the reply to the client may be incomplete. Pi-hole just returns the information it knows at the time of the query. This results in certain limitations for <code>CNAME</code> targets,
|
||||
for instance, only <i>active</i> DHCP leases work as targets - mere DHCP <i>leases</i> aren't sufficient as they aren't (yet) valid DNS records.</p>
|
||||
<p>Additionally, you can't <code>CNAME</code> external domains (<code>bing.com</code> to <code>google.com</code>) successfully as this could result in invalid SSL certificate errors when the target server does not serve content for the requested domain.</p>
|
||||
<p>Adding/removing local CNAME records will restart the DNS server.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+7
-1
@@ -373,12 +373,18 @@ td.lookatme {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-inline .dataTables .form-control {
|
||||
.form-inline .dataTable .form-control {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Table footer row used to add new items, using inline input fields */
|
||||
tfoot.add-new-item > tr > th {
|
||||
font-weight: normal;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results > .select2-results__options {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user