From 38e7cb8e737d8d9b31e45ccb16a6545604259dd0 Mon Sep 17 00:00:00 2001
From: Th3M3 <the_me@outlook.de>
Date: Wed, 13 May 2020 13:07:45 +0200
Subject: [PATCH] Use two different divs for mobile and desktop instead of a JS
 solution

Signed-off-by: Th3M3 <the_me@outlook.de>
Co-Authored-By: XhmikosR <xhmikosr@gmail.com>
---
 queryads.php                   | 27 +++++++++++++-------
 scripts/pi-hole/js/queryads.js | 46 +++++++++++-----------------------
 2 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/queryads.php b/queryads.php
index aabff57e..0367d129 100644
--- a/queryads.php
+++ b/queryads.php
@@ -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>
diff --git a/scripts/pi-hole/js/queryads.js b/scripts/pi-hole/js/queryads.js
index 28556023..8916fa64 100644
--- a/scripts/pi-hole/js/queryads.js
+++ b/scripts/pi-hole/js/queryads.js
@@ -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();
 });