pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use two different divs for mobile and desktop instead of a JS solution

Browse Source 
Signed-off-by: Th3M3 <the_me@outlook.de>
Co-Authored-By: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Th3M3
2020-05-13 13:07:45 +02:00
parent 9c6a582cb2
commit 38e7cb8e73
2 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
queryads.php
+18 -9
View File
@@ -15,18 +15,27 @@
<div class="col-md-12">
<div class="box">
<div class="box-body">
<div class="row">
<div class="form-group col-md-12">
<div class="form-group input-group">
<input id="domain" type="text" class="form-control" placeholder="Domain to look for (example.com or sub.example.com)">
<input id="quiet" type="hidden" value="no">
<span class="input-group-btn">
<button type="button" id="btnSearch" class="btn btn-default">Search partial match</button>
<button type="button" id="btnSearchExact" class="btn btn-default">Search exact match</button>
</span>
<!-- Domain Input <992px -->
<div class="visible-xs-block visible-sm-block">
<div class="input-group-block">
<input id="domain_1" type="url" class="form-control" placeholder="Domain to look for (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off" style="margin-bottom: 5px">
<input id="quiet" type="hidden" value="no">
<div class="text-center" style="display: block; width: 100%">
<button type="button" id="btnSearch_1" class="btn btn-default">Search partial match</button>
<button type="button" id="btnSearchExact_1" class="btn btn-default">Search exact match</button>
</div>
</div>
</div>
<!-- Domain Input >=992px -->
<div class="visible-md-block visible-lg-block">
<div class="input-group">
<input id="domain_2" type="url" class="form-control" placeholder="Domain to look for (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
<span class="input-group-btn">
<button type="button" id="btnSearch_2" class="btn btn-default">Search partial match</button>
<button type="button" id="btnSearchExact_2" class="btn btn-default">Search exact match</button>
</span>
</div>
</div>
</div>
</div>
</div>
scripts/pi-hole/js/queryads.js
+14 -32
View File
@@ -50,7 +50,8 @@ function httpGet(ta, quiet, theUrl) {
function eventsource() {
var ta = $("#output");
var domain = $("#domain").val().trim();
// process with the current visible domain input field
var domain = $("input[id^='domain']:visible").val().trim();
var q = $("#quiet");
if (domain.length === 0) {
@@ -68,7 +69,7 @@ function eventsource() {
httpGet(
ta,
quiet,
"scripts/pi-hole/php/queryads.php?domain=" + domain.toLowerCase() + exact + "&IE"
"scripts/pi-hole/php/queryads.php?domain=" + domain.toLowerCase() + "&" + exact + "&IE"
);
return;
}
@@ -106,41 +107,22 @@ function eventsource() {
exact = "";
}
// Handle enter button
$(document).keypress(function (e) {
if (e.which === 13 && $("#domain").is(":focus")) {
// Handle enter key
$("#domain_1, #domain_2").keypress(function (e) {
if (e.which === 13) {
// Enter was pressed, and the input has focus
exact = "";
eventsource();
}
});
// Handle button
$("#btnSearch").on("click", function () {
exact = "";
eventsource();
});
// Handle exact button
$("#btnSearchExact").on("click", function () {
exact = "exact";
eventsource();
});
// Wrap form-group's buttons to next line when viewed on a small screen
$(window).on("resize", function () {
if ($(window).width() < 991) {
$(".form-group.input-group").removeClass("input-group").addClass("input-group-block");
$(".form-group.input-group-block > input").css("margin-bottom", "5px");
$(".form-group.input-group-block > .input-group-btn")
.removeClass("input-group-btn")
.addClass("btn-block text-center");
} else {
$(".form-group.input-group-block").removeClass("input-group-block").addClass("input-group");
$(".form-group.input-group > input").css("margin-bottom", "");
$(".form-group.input-group > .btn-block.text-center")
.removeClass("btn-block text-center")
.addClass("input-group-btn");
// Handle search buttons
$("button[id^='btnSearch']").on("click", function () {
exact = "";
if (this.id.match("^btnSearchExact")) {
exact = "exact";
}
});
$(document).ready(function () {
$(window).trigger("resize");
eventsource();
});