From 065d5873f0eea44771083ccac2247d278bd99981 Mon Sep 17 00:00:00 2001
From: rdwebdesign <github@rdwebdesign.com.br>
Date: Fri, 29 Oct 2021 02:02:23 -0300
Subject: [PATCH] queryads: Replace double DIV solution with single DIV and
 responsive CSS

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>
---
 queryads.php                   | 29 +++++++++--------------------
 scripts/pi-hole/js/queryads.js |  2 +-
 style/pi-hole.css              | 17 +++++++++++++++++
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/queryads.php b/queryads.php
index 190a2eaa..1eb1fe5d 100644
--- a/queryads.php
+++ b/queryads.php
@@ -15,27 +15,16 @@
   <div class="col-md-12">
     <div class="box">
       <div class="box-body">
-        <!-- 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>
+        <!-- domain-search-block - Single search field mobile/desktop -->
+        <div id="domain-search-block" class="input-group">
+          <input id="domain" type="url" class="form-control" placeholder="Domain to look for (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+          <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>
         </div>
+        <!-- /domain-search-block -->
       </div>
     </div>
   </div>
diff --git a/scripts/pi-hole/js/queryads.js b/scripts/pi-hole/js/queryads.js
index e97578e7..a97eadd9 100644
--- a/scripts/pi-hole/js/queryads.js
+++ b/scripts/pi-hole/js/queryads.js
@@ -88,7 +88,7 @@ function eventsource() {
 }
 
 // Handle enter key
-$("#domain_1, #domain_2").keypress(function (e) {
+$("#domain").keypress(function (e) {
   if (e.which === 13) {
     // Enter was pressed, and the input has focus
     exact = "";
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 1859c6e8..5de548a3 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -377,3 +377,20 @@ td.details-control {
 .allowed-row td {
   background-color: rgb(70, 149, 74, 0.1);
 }
+
+@media screen and (max-width: 991px) {
+  #domain-search-block {
+    display: block;
+  }
+  #domain {
+    margin: 5px 0;
+  }
+  #domain-search-block .input-group-btn {
+    margin: 5px 0;
+    text-align: center;
+  }
+  #domain-search-block .input-group-btn button {
+    margin: 0 2px;
+    border-radius: 3px;
+  }
+}