From 3ef30992c56c9fa6a9a75c95f464398d7dbffc09 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Tue, 6 Sep 2022 19:51:25 -0300
Subject: [PATCH] Move filter selector to header-box

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 groups-domains.php                   | 24 ++++++++++--------------
 scripts/pi-hole/js/groups-domains.js |  7 -------
 style/pi-hole.css                    | 18 +++++++++++++++---
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/groups-domains.php b/groups-domains.php
index cd536fd3..545b00e0 100644
--- a/groups-domains.php
+++ b/groups-domains.php
@@ -113,23 +113,19 @@ require 'scripts/pi-hole/php/header_authenticated.php';
                 <h3 class="box-title">
                     List of domains
                 </h3>
+                <div class="filter_types">
+                    <div class="line">
+                        <span><input type="checkbox" name="typ" value="0" id="typ0" checked><label for="typ0">Exact whitelist</label></span>
+                        <span><input type="checkbox" name="typ" value="1" id="typ1" checked><label for="typ1">Exact blacklist</label></span>
+                    </div>
+                    <div class="line">
+                        <span><input type="checkbox" name="typ" value="2" id="typ2" checked><label for="typ2">Regex whitelist</label></span>
+                        <span><input type="checkbox" name="typ" value="3" id="typ3" checked><label for="typ3">Regex blacklist</label></span>
+                    </div>
+                </div>
             </div>
             <!-- /.box-header -->
             <div class="box-body">
-                <div class="row" id="filter_types_group">
-                    <div class="col-sm-12">
-                        <div class="filter_types">
-                            <div class="line">
-                                <span><input type="checkbox" name="typ" value="0" id="typ0" checked><label for="typ0">Exact whitelist</label></span>
-                                <span><input type="checkbox" name="typ" value="1" id="typ1" checked><label for="typ1">Exact blacklist</label></span>
-                            </div>
-                            <div class="line">
-                                <span><input type="checkbox" name="typ" value="2" id="typ2" checked><label for="typ2">Regex whitelist</label></span>
-                                <span><input type="checkbox" name="typ" value="3" id="typ3" checked><label for="typ3">Regex blacklist</label></span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
                 <table id="domainsTable" class="table table-striped table-bordered" width="100%">
                     <thead>
                         <tr>
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index 29f4c0c8..7864f0b7 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/scripts/pi-hole/js/groups-domains.js
@@ -335,7 +335,6 @@ function initTable() {
     ],
     dom:
       "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
-      "<'#filter'>" +
       "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
       "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
       "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
@@ -384,12 +383,6 @@ function initTable() {
     input.setAttribute("spellcheck", false);
   }
 
-  table.on("init", function () {
-    // Put the type filter div into Datatables "DOM"
-    $("#filter").append($("#filter_types_group"));
-    $("#filter_types_group").show();
-  });
-
   table.on("init select deselect", function () {
     utils.changeBulkDeleteStates(table);
   });
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 7037bba9..422f4d77 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -729,27 +729,39 @@ li:not(.menu-open) .treeview-menu .warning-count {
 }
 
 /* Domains table: filter by type */
-#filter_types_group {
-  display: none;
+#domains-list .box-header {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 5px 10px;
+}
+#domains-list .box-header h3 {
+  flex: 1 1 auto;
+  margin: 5px 0;
+  width: auto;
+  min-width: 130px;
 }
 .filter_types {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  margin: 5px auto;
 }
 .filter_types div {
   flex: 0 0 auto;
+  margin: 2px 0 0;
 }
 .filter_types span {
   display: inline-block;
-  margin: 10px;
+  margin: 0 0 2px 10px !important;
   width: 120px;
+  min-height: 1.2em;
 }
 
 /* Domains table: filter by type - smaller icheck */
 .filter_types .icheck-primary[class*="icheck-"] > label {
   padding-left: 1.5em !important;
   line-height: 1.2em;
+  min-height: 1.2em;
 }
 .filter_types
   .icheck-primary[class*="icheck-"]