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;