From 938c6ef383a19ec65557399d80b311b8ee02ce9a Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Mon, 12 Feb 2024 12:34:40 +0100
Subject: [PATCH 1/3] Redesign search input field to solve #2701

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/search.js | 16 ++++++----------
 search.lp                    | 21 +++++++++++++++------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/scripts/pi-hole/js/search.js b/scripts/pi-hole/js/search.js
index dae432ec8..9cef84d39 100644
--- a/scripts/pi-hole/js/search.js
+++ b/scripts/pi-hole/js/search.js
@@ -19,11 +19,13 @@ $(function () {
   }
 });
 
-function eventsource(partial) {
+function doSearch() {
   const ta = $("#output");
   // process with the current visible domain input field
   const q = $("input[id^='domain']:visible").val().trim().toLowerCase();
   const N = $("#number").val();
+  // Partial matching?
+  const partial = $("#partialMatch").is(":checked");
 
   if (q.length === 0) {
     return;
@@ -197,17 +199,11 @@ function eventsource(partial) {
 $("#domain").on("keypress", function (e) {
   if (e.which === 13) {
     // Enter was pressed, and the input has focus
-    eventsource(false);
+    doSearch();
   }
 });
 
 // Handle search buttons
-$("button[id^='btnSearch']").on("click", function () {
-  var partial = false;
-
-  if (!this.id.match("^btnSearchExact")) {
-    partial = true;
-  }
-
-  eventsource(partial);
+$("button[id='btnSearch']").on("click", function () {
+  doSearch();
 });
diff --git a/search.lp b/search.lp
index cf89465bc..c5511301c 100644
--- a/search.lp
+++ b/search.lp
@@ -22,16 +22,25 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
                     <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>
+                        <button type="button" id="btnSearch" class="btn btn-default">Search</button>
                     </span>
                 </div>
             </div>
             <div class="box-body">
-                <!-- /domain-search-block -->
-                <div id="limitbox-block" class="form-inline">
-                    <input class="form-control input-sm" type="number" min="0" value="20" id="number">
-                    <label for="number">Maximum of results to be returned</label>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div>
+                            <input type="checkbox" id="partialMatch" data-key="partialMatch">
+                            <label for="partialMatch"><strong>Use partial matching</strong></label>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <!-- /domain-search-block -->
+                        <div id="limitbox-block" class="form-inline">
+                            <input class="form-control input-sm" type="number" min="0" value="20" id="number">
+                            <label for="number">Maximum number of results to be returned</label>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

From 4fba41bca1921795c283ee458e4cdb0c76501723 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Tue, 13 Feb 2024 13:34:23 -0300
Subject: [PATCH 2/3] Remove unused CSS rules

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 4be5c580d..d15e9e48e 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -562,19 +562,6 @@ td.details-control {
 }
 
 @media screen and (max-width: 991px) {
-  #domain-search-block {
-    display: block;
-  }
-  #domain {
-    margin: 5px 0;
-  }
-  #domain-search-block .input-group-btn {
-    display: inline-block;
-  }
-  #domain-search-block .input-group-btn button {
-    margin: 0 5px 0 0;
-    border-radius: 3px;
-  }
   .settings-container {
     --number-of-columns: 1;
   }

From 0854c2afef68575b3b6313b7b7e3d95c99744609 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Tue, 13 Feb 2024 15:22:32 -0300
Subject: [PATCH 3/3] Better text and controls layout

- use 4-8 columns instead of 6-6;
- use label before the number control (this will show the label on the previous line, when there is a line break);
- right-align second column in larger screens and add small margin;
- remove old HTML comments.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 search.lp         | 11 +++++------
 style/pi-hole.css | 11 +++++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/search.lp b/search.lp
index c5511301c..7b5a0892e 100644
--- a/search.lp
+++ b/search.lp
@@ -17,7 +17,6 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
     <div class="col-md-12">
         <div class="box">
             <div class="box-header">
-                <!-- 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">
@@ -28,17 +27,17 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="col-md-4">
                         <div>
                             <input type="checkbox" id="partialMatch" data-key="partialMatch">
                             <label for="partialMatch"><strong>Use partial matching</strong></label>
                         </div>
                     </div>
-                    <div class="col-md-6">
-                        <!-- /domain-search-block -->
-                        <div id="limitbox-block" class="form-inline">
+                    <br class="hidden-md hidden-lg">
+                    <div class="col-md-8">
+                        <div id="domain-limitbox-block" class="form-inline">
+                            <label for="number">Maximum number of results to be returned:&nbsp;</label>
                             <input class="form-control input-sm" type="number" min="0" value="20" id="number">
-                            <label for="number">Maximum number of results to be returned</label>
                         </div>
                     </div>
                 </div>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index d15e9e48e..2cf782add 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1465,3 +1465,14 @@ table.dataTable tbody > tr > .selected {
   overflow-wrap: break-word;
   inline-size: auto;
 }
+
+/* Search page options */
+#domain-limitbox-block {
+  /* Add margin to match the other component (icheck) height */
+  margin: 3px 0;
+}
+@media (min-width: 992px) {
+  #domain-limitbox-block {
+    text-align: right;
+  }
+}