From 88da85f5534bc8d2338bf64bf98ad3c3a8558e06 Mon Sep 17 00:00:00 2001
From: DL6ER <DL6ER@users.noreply.github.com>
Date: Sun, 26 Jan 2020 02:46:38 +0100
Subject: [PATCH] Add responsive design to new group tables to ensure they
 render properly on very narrow screens. (#1137)

Signed-off-by: DL6ER <dl6er@dl6er.de>

Co-authored-by: Dan Schaper <dan@glacialmagma.com>
---
 scripts/pi-hole/js/groups-adlists.js | 4 ++++
 scripts/pi-hole/js/groups-clients.js | 4 ++++
 scripts/pi-hole/js/groups-domains.js | 4 ++++
 scripts/pi-hole/js/groups.js         | 4 ++++
 4 files changed, 16 insertions(+)

diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
index 53a137ba..625a3f83 100644
--- a/scripts/pi-hole/js/groups-adlists.js
+++ b/scripts/pi-hole/js/groups-adlists.js
@@ -183,6 +183,10 @@ function initTable() {
         "</button>";
       $("td:eq(4)", row).html(button);
     },
+    dom:
+      "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"]
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index 68fbed9e..bb07ea7b 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -189,6 +189,10 @@ function initTable() {
         "</button>";
       $("td:eq(2)", row).html(button);
     },
+    dom:
+      "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"]
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index b83c5296..6646a957 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/scripts/pi-hole/js/groups-domains.js
@@ -200,6 +200,10 @@ function initTable() {
         "</button>";
       $("td:eq(5)", row).html(button);
     },
+    dom:
+      "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"]
diff --git a/scripts/pi-hole/js/groups.js b/scripts/pi-hole/js/groups.js
index b7ec372c..2ea23c5b 100644
--- a/scripts/pi-hole/js/groups.js
+++ b/scripts/pi-hole/js/groups.js
@@ -144,6 +144,10 @@ $(document).ready(function() {
         $("td:eq(3)", row).html(button);
       }
     },
+    dom:
+      "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"]