Fix layout on small screens (Group Mgmt tables) (#2078)

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>

groups-adlists.php

@@ -67,7 +67,7 @@
                         <th>Status</th>
                         <th>Comment</th>
                         <th>Group assignment</th>
-                        <th>Action</th>
+                        <th>&nbsp;</th>
                     </tr>
                     </thead>
                 </table>

groups-clients.php

@@ -73,7 +73,7 @@
                         <th title="Acceptable values are: IP address, subnet (CIDR notation), MAC address (AA:BB:CC:DD:EE:FF format) or host names.">Client</th>
                         <th>Comment</th>
                         <th>Group assignment</th>
-                        <th>Action</th>
+                        <th>&nbsp;</th>
                     </tr>
                     </thead>
                 </table>

groups-domains.php

@@ -126,7 +126,7 @@
                         <th>Status</th>
                         <th>Comment</th>
                         <th>Group assignment</th>
-                        <th>Action</th>
+                        <th>&nbsp;</th>
                     </tr>
                     </thead>
                 </table>

groups.php

@@ -64,7 +64,7 @@
                         <th>Name</th>
                         <th>Status</th>
                         <th>Description</th>
-                        <th>Action</th>
+                        <th>&nbsp;</th>
                     </tr>
                     </thead>
                 </table>

scripts/pi-hole/js/groups-adlists.js

@@ -122,7 +122,7 @@ function initTable() {
       { data: "enabled", searchable: false },
       { data: "comment" },
       { data: "groups", searchable: false },
-      { data: null, width: "80px", orderable: false },
+      { data: null, width: "22px", orderable: false },
     ],
     columnDefs: [
       {

scripts/pi-hole/js/groups-clients.js

@@ -95,7 +95,7 @@ function initTable() {
       { data: "ip", type: "ip-address" },
       { data: "comment" },
       { data: "groups", searchable: false },
-      { data: "name", width: "80px", orderable: false },
+      { data: "name", width: "22px", orderable: false },
     ],
     columnDefs: [
       {

scripts/pi-hole/js/groups-domains.js

@@ -74,7 +74,7 @@ function initTable() {
       { data: "enabled", searchable: false },
       { data: "comment" },
       { data: "groups", searchable: false, visible: showtype === "all" },
-      { data: null, width: "80px", orderable: false },
+      { data: null, width: "22px", orderable: false },
     ],
     columnDefs: [
       {

scripts/pi-hole/js/groups.js

@@ -25,7 +25,7 @@ $(function () {
       { data: "name" },
       { data: "enabled", searchable: false },
       { data: "description" },
-      { data: null, width: "60px", orderable: false },
+      { data: null, width: "22px", orderable: false },
     ],
     columnDefs: [
       {

style/pi-hole.css

@@ -448,6 +448,85 @@ td.details-control {
   animation: icon-bounce 1.5s 2 linear;
 }
 
+/* Fix some datatables layout on small screens */
+@media screen and (max-width: 660px), screen and (min-width: 767px) and (max-width: 960px) {
+  #domainsTable_wrapper .table-responsive {
+    border: none;
+    overflow: unset;
+  }
+  #domainsTable {
+    border: 0;
+    box-sizing: border-box;
+  }
+  #domainsTable thead {
+    display: none;
+  }
+  #domainsTable tr {
+    display: flex;
+    padding: 15px 0;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    align-items: end;
+    border: 1px solid rgba(127, 127, 127, 0.4);
+    margin: 10px 0;
+    border-radius: 6px;
+  }
+  #domainsTable td {
+    flex: 1 1 auto;
+    width: 100px;
+    display: block;
+    border: none;
+    box-sizing: border-box;
+    order: 2;
+    text-align: right;
+    padding: 4px 8px;
+  }
+  #domainsTable td:nth-child(2n) {
+    width: calc(100% - 120px);
+  }
+  #domainsTable td:first-child {
+    width: calc(100% - 40px);
+    order: 1;
+    text-align: left;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
+    margin-bottom: 5px;
+  }
+  #domainsTable td:last-child {
+    width: 40px;
+    order: 1;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
+    margin-bottom: 5px;
+  }
+  #domainsTable td:nth-child(2),
+  #domainsTable td:nth-child(4) {
+    text-align: left;
+  }
+  #domainsTable td::before {
+    display: block;
+    font-weight: bold;
+    font-size: smaller;
+  }
+  #domainsTable td:nth-child(2)::before {
+    content: "Type:";
+  }
+  #domainsTable td:nth-child(4)::before {
+    content: "Comment:";
+  }
+}
+@media screen and (min-width: 767px) {
+  #domainsTable select.form-control {
+    padding: 0 0 0 5px;
+    width: auto;
+  }
+}
+@media screen and (max-width: 767px) {
+  #domainsTable th {
+    white-space: normal;
+  }
+}
+
 @keyframes icon-bounce {
   0%,
   20%,

style/themes/lcars.css

@@ -1670,6 +1670,16 @@ table.dataTable {
   }
 }
 
+/*** Fix some datatables layout on small screens ***/
+@media screen and (max-width: 660px), screen and (min-width: 767px) and (max-width: 960px) {
+  #domainsTable td::before {
+    margin: 0 5px 2px;
+  }
+  #domainsTable td:nth-child(2n) {
+    width: calc(100% - 160px);
+  }
+}
+
 /*** Used by the long-term pages ***/
 .daterangepicker {
   background-color: #345;