diff --git a/groups-adlists.php b/groups-adlists.php
index 1fb041792..04ec72941 100644
--- a/groups-adlists.php
+++ b/groups-adlists.php
@@ -67,7 +67,7 @@
Status |
Comment |
Group assignment |
- Action |
+ |
diff --git a/groups-clients.php b/groups-clients.php
index e56201380..420ce5c88 100644
--- a/groups-clients.php
+++ b/groups-clients.php
@@ -73,7 +73,7 @@
Client |
Comment |
Group assignment |
- Action |
+ |
diff --git a/groups-domains.php b/groups-domains.php
index b1aca1832..25f86eee3 100644
--- a/groups-domains.php
+++ b/groups-domains.php
@@ -126,7 +126,7 @@
Status |
Comment |
Group assignment |
- Action |
+ |
diff --git a/groups.php b/groups.php
index 64b957a09..0cf970f70 100644
--- a/groups.php
+++ b/groups.php
@@ -64,7 +64,7 @@
Name |
Status |
Description |
- Action |
+ |
diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js
index 501ec2f26..24fd2e4e6 100644
--- a/scripts/pi-hole/js/groups-adlists.js
+++ b/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: [
{
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index 171a939c0..016d3426e 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/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: [
{
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js
index e70286d59..848245871 100644
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/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: [
{
diff --git a/scripts/pi-hole/js/groups.js b/scripts/pi-hole/js/groups.js
index 417dd9ffd..25107d13d 100644
--- a/scripts/pi-hole/js/groups.js
+++ b/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: [
{
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 01c5757a0..f17b5d732 100644
--- a/style/pi-hole.css
+++ b/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%,
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index cc0564c89..6267f1b48 100644
--- a/style/themes/lcars.css
+++ b/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;