From 9d32afeb308ce5ee47ebe31c4e18fe0947247568 Mon Sep 17 00:00:00 2001 From: bergware Date: Sun, 3 Dec 2023 13:48:17 +0100 Subject: [PATCH] Enhanced styling - Remove legacy css - Improve styling of tables --- .../plugins/dynamix/include/InputSecurity.php | 20 ++++----- emhttp/plugins/dynamix/nchan/device_list | 6 +-- .../plugins/dynamix/styles/default-azure.css | 39 ++++++----------- .../plugins/dynamix/styles/default-black.css | 43 ++++++------------- .../plugins/dynamix/styles/default-gray.css | 32 +++++--------- .../plugins/dynamix/styles/default-white.css | 43 ++++++------------- 6 files changed, 61 insertions(+), 122 deletions(-) diff --git a/emhttp/plugins/dynamix/include/InputSecurity.php b/emhttp/plugins/dynamix/include/InputSecurity.php index b25c6d6ab..7de81ec5e 100644 --- a/emhttp/plugins/dynamix/include/InputSecurity.php +++ b/emhttp/plugins/dynamix/include/InputSecurity.php @@ -13,7 +13,7 @@ "; + echo "
"; $write_list = explode(",", $sec[$name]['writeList']); foreach ($users as $user) { $idx = $user['idx']; @@ -25,17 +25,17 @@ function input_secure_users($sec) { $userAccess = "read-write"; else $userAccess = "read-only"; - echo "{$user['name']}"; - echo ""; echo mk_option($userAccess, "read-write", _("Read/Write")); echo mk_option($userAccess, "read-only", _("Read-only")); - echo ""; + echo ""; } - echo ""; + echo "
"; } function input_private_users($sec) { global $name, $users; - echo ""; + echo "
"; $read_list = explode(",", $sec[$name]['readList']); $write_list = explode(",", $sec[$name]['writeList']); foreach ($users as $user) { @@ -50,13 +50,13 @@ function input_private_users($sec) { $userAccess = "read-write"; else $userAccess = "no-access"; - echo "
"; - echo ""; + echo ""; } - echo "
{$user['name']}"; echo mk_option($userAccess, "read-write", _("Read/Write")); echo mk_option($userAccess, "read-only", _("Read-only")); echo mk_option($userAccess, "no-access", _("No Access")); - echo "
"; + echo ""; } ?> \ No newline at end of file diff --git a/emhttp/plugins/dynamix/nchan/device_list b/emhttp/plugins/dynamix/nchan/device_list index 6b4a2ff74..eceee712b 100755 --- a/emhttp/plugins/dynamix/nchan/device_list +++ b/emhttp/plugins/dynamix/nchan/device_list @@ -35,7 +35,7 @@ $locale_init = $locale; function initSum() { return ['count'=>0, 'temp'=>0, 'power'=>0, 'fsSize'=>0, 'fsUsed'=>0, 'fsFree'=>0, 'ioReads'=>0, 'ioWrites'=>0, 'numReads'=>0, 'numWrites'=>0, 'numErrors'=>0]; } -function model($id) { +function get_model($id) { return substr($id,0,strrpos($id,'_')); } function my_power($power) { @@ -53,7 +53,7 @@ function device_info(&$disk,$online) { } $name = _var($disk,'name'); $named = no_tilde($name); - $fancy = compress(_(my_disk(native($name,1)),3),16,5); + $fancy = _(my_disk(native($name,1)),3); $type = _var($disk,'type')=='Flash' ? $disk['type'] : 'Device'; $pool = _var($disk,'type')=='Cache'; $parity = _var($disk,'type')=='Parity'; @@ -398,7 +398,7 @@ while (true) { update_translation($locale_init); } // sort unassigned devices on disk identification - if (count($devs)>1) array_multisort(array_column($devs,'sectors'),SORT_DESC,array_map('model',array_column($devs,'id')),SORT_NATURAL|SORT_FLAG_CASE,array_column($devs,'device'),$devs); + if (count($devs)>1) array_multisort(array_column($devs,'sectors'),SORT_DESC,array_map('get_model',array_column($devs,'id')),SORT_NATURAL|SORT_FLAG_CASE,array_column($devs,'device'),$devs); // merge device custom settings if (file_exists($smartALL)) $var = array_merge($var,parse_ini_file($smartALL)); diff --git a/emhttp/plugins/dynamix/styles/default-azure.css b/emhttp/plugins/dynamix/styles/default-azure.css index aecf5bb6b..f090c794b 100644 --- a/emhttp/plugins/dynamix/styles/default-azure.css +++ b/emhttp/plugins/dynamix/styles/default-azure.css @@ -114,43 +114,30 @@ div.title.shift{margin-top:-12px} .redbar{background:-webkit-radial-gradient(#941c00,#de1100);background:linear-gradient(#941c00,#de1100)} .graybar{background:-webkit-radial-gradient(#949494,#d9d9d9);background:linear-gradient(#949494,#d9d9d9)} table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:0;width:100%} -table thead td{line-height:3.2rem} -table tbody td{line-height:3.2rem} +table thead td{line-height:3.2rem;white-space:nowrap} +table tbody td{line-height:3.2rem;white-space:nowrap} table tbody tr.tr_last{border-bottom:1px solid #606e7f} -table.disk_status{white-space:nowrap} table.disk_status thead tr:first-child td{text-transform:uppercase;color:#9794a0;border-bottom:1px solid #606e7f} -table.disk_status td span{margin-left:10px} -table.disk_status tr>td{width:10%;white-space:nowrap} -table.disk_status tr>td+td{width:auto} -table.disk_status tr>td+td+td{width:6.5%;text-align:center;padding-left:4px;padding-right:8px} -table.disk_status tr>td+td+td+td{text-align:right;padding-left:0;padding-right:12px} +table.disk_status tr td:nth-child(1){min-width:100px;max-width:100px;overflow:hidden;text-overflow:ellipsis;padding-left:8px} +table.disk_status tr td:nth-child(2){min-width:400px;max-width:400px;overflow:hidden;text-overflow:ellipsis} +table.disk_status tr td:nth-child(3){text-align:center} +table.disk_status tr>td:nth-child(n+3){min-width:6.5%;max-width:6.5%;width:6.5%} +table.disk_status tr>td:nth-child(n+4){text-align:right;padding-right:8px} table.disk_status tbody tr{border-bottom:1px solid #f3f0f4} table.disk_status tbody tr:not(.tr_last):hover td{background-color:rgba(0,0,0,0.05)} -table.disk_status.stats tr>td+td{text-align:left;padding-left:0;padding-right:12px} -table.array_status td{padding:4px 0} -table.array_status td:first-child{letter-spacing:1px;text-transform:uppercase} -table.array_status tr>td{text-align:left;white-space:nowrap;padding-left:12px;width:30%} -table.array_status tr>td+td{padding-left:2px;width:20%} -table.array_status tr>td+td+td{width:auto} +table.array_status tr td:nth-child(1){width:30%;padding-left:8px} +table.array_status tr td:nth-child(2){width:20%} table.array_status td.line{border-top:1px solid #f3f0f4} -table.settings{padding-top:8px;line-height:4.2rem} -@media (max-width:1280px){table.settings td:first-child{width:35%;padding-left:12px}} -@media (min-width:1281px){table.settings td:first-child{width:30%;padding-left:12px}} -@media (min-width:1921px){table.settings td:first-child{width:25%;padding-left:12px}} -table.settings td+td{padding-left:8px} -table.settings tr>td+td{line-height:1.6rem} -table.settings.shifted{padding:0;margin-left:0;margin-top:0} -table.settings.shifted td{padding-left:0} -table.share_status{white-space:nowrap;margin-top:12px} +table.share_status{margin-top:12px} table.share_status thead tr:first-child td{font-size:1.2rem;letter-spacing:1px;text-transform:uppercase;color:#9794a0;border-bottom:1px solid #606e7f} -table.share_status tr>td{text-align:left;padding-left:12px} -table.share_status tr>td+td{padding-left:0} +table.share_status tr td:nth-child(1){padding-left:8px} +table.share_status tr>td:nth-child(n+2){padding-left:0} table.share_status tbody tr{border-bottom:1px solid #f3f0f4} table.share_status:not(.dashboard) tbody tr:hover td{background-color:rgba(0,0,0,0.05)} table.share_status tbody tr:last-child td{border-bottom:1px solid #606e7f} table.share_status tbody tr.alert{color:#f0000c} table.share_status tbody tr.warn{color:#e68a00} -table.share_status.fixed tr>td+td{min-width:39px;font-size:1.1rem;text-align:center;padding:0} +table.share_status.fixed tr td:nth-child(n+2){min-width:39px;font-size:1.1rem;text-align:center;padding:0} table.share_status.table{margin-top:36px} table.share_status.table tr>td{width:50%} table.share_status.dashboard{margin:0;border:none;background-color:#d7dbdd} diff --git a/emhttp/plugins/dynamix/styles/default-black.css b/emhttp/plugins/dynamix/styles/default-black.css index 6d2e3a681..02d1f2c78 100644 --- a/emhttp/plugins/dynamix/styles/default-black.css +++ b/emhttp/plugins/dynamix/styles/default-black.css @@ -109,50 +109,31 @@ div.title.shift{margin-top:-30px} .redbar{background:-webkit-gradient(linear,left top,right top,from(#941c00),to(#de1100));background:linear-gradient(90deg,#941c00 0,#de1100)} .graybar{background:-webkit-gradient(linear,left top,right top,from(#949494),to(#d9d9d9));background:linear-gradient(90deg,#949494 0,#d9d9d9)} table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:-30px 0 0 0;width:100%;background-color:#191818} -table thead td{padding:7px 0} -table tbody td{padding:5px 0} +table thead td{padding:7px 0;white-space:nowrap} +table tbody td{padding:5px 0;white-space:nowrap} table tbody tr.tr_last{background-color:#212121;border-top:1px solid #2b2b2b} table td.cpu-info{border:1px solid #2b2b2b} -table.disk_status{white-space:nowrap} -table.disk_status td span{margin-left:10px} table.disk_status thead tr:first-child td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:#262626} table.disk_status thead tr:last-child{border-bottom:1px solid #2b2b2b} -table.disk_status tr>td{width:10%;padding-left:12px;padding-right:0;white-space:nowrap} -table.disk_status tr>td+td{width:auto} -table.disk_status tr>td+td+td{width:6.5%;text-align:center;padding-left:4px;padding-right:8px} -table.disk_status tr>td+td+td+td{text-align:right;padding-left:0;padding-right:12px} +table.disk_status tr td:nth-child(1){min-width:100px;max-width:100px;overflow:hidden;text-overflow:ellipsis;padding-left:8px} +table.disk_status tr td:nth-child(2){min-width:400px;max-width:400px;overflow:hidden;text-overflow:ellipsis} +table.disk_status tr td:nth-child(3){text-align:center} +table.disk_status tr>td:nth-child(n+3){min-width:6.5%;max-width:6.5%;width:6.5%} +table.disk_status tr>td:nth-child(n+4){text-align:right;padding-right:8px} table.disk_status tbody tr:nth-child(even){background-color:#212121} table.disk_status tbody tr:not(.tr_last):hover td{background-color:rgba(255,255,255,0.1)} -table.disk_status.stats tr>td+td{text-align:left;padding-left:0;padding-right:12px} -table.array_status td{padding:4px 0} -table.array_status tr>td{text-align:left;white-space:nowrap;padding-left:12px;width:30%} -table.array_status tr>td+td{padding-left:2px;width:20%} -table.array_status tr>td+td+td{width:auto} +table.array_status tr td:nth-child(1){width:30%;padding-left:8px} +table.array_status tr td:nth-child(2){width:20%} table.array_status td.line{border-top:1px solid #2b2b2b} table.array_status.noshift{margin-top:0} -table.settings{margin:0;padding:0;background-color:transparent} -@media (max-width:1280px){table.settings td:first-child{width:35%;padding-left:12px}} -@media (min-width:1281px){table.settings td:first-child{width:30%;padding-left:12px}} -@media (min-width:1921px){table.settings td:first-child{width:25%;padding-left:12px}} -table.settings td+td{padding-left:8px} -table.settings.shifted{padding:0;margin-left:0;margin-top:0} -table.settings.shifted td{padding-left:0} -table.access_list{border-spacing:0;margin-top:10px;border:none} -table.access_list tr:first-child td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;vertical-align:middle;text-align:left;border:1px solid #2b2b2b;border-bottom:1px solid #2b2b2b;background-color:#262626} -@media (max-width:1280px){table.access_list td:first-child{font-weight:normal;width:35%;padding-left:12px}} -@media (min-width:1281px){table.access_list td:first-child{font-weight:normal;width:30%;padding-left:12px}} -@media (min-width:1921px){table.access_list td:first-child{font-weight:normal;width:25%;padding-left:12px}} -table.access_list tr:first-child td:first-child{font-weight:normal} -table.access_list tr>td+td{white-space:nowrap} -table.share_status{white-space:nowrap} table.share_status thead tr:first-child td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:#262626} -table.share_status tr>td{text-align:left;padding-left:12px} -table.share_status tr>td+td{padding-left:0} +table.share_status tr td:nth-child(1){padding-left:8px} +table.share_status tr>td:nth-child(n+2){padding-left:0} table.share_status tbody tr:nth-child(even){background-color:#212121} table.share_status:not(.dashboard) tbody tr:hover td{background-color:rgba(255,255,255,0.1)} table.share_status tbody tr.alert{color:#f0000c} table.share_status tbody tr.warn{color:#e68a00} -table.share_status.fixed tr>td+td{min-width:39px;font-size:1.1rem;text-align:center;padding:0} +table.share_status.fixed tr td:nth-child(n+2){min-width:39px;font-size:1.1rem;text-align:center;padding:0} table.share_status.table{margin-top:36px} table.share_status.table tr>td{width:50%} table.share_status.dashboard{margin:0;border:none;background-color:#262626} diff --git a/emhttp/plugins/dynamix/styles/default-gray.css b/emhttp/plugins/dynamix/styles/default-gray.css index fedfe5c7b..5ec648bc0 100644 --- a/emhttp/plugins/dynamix/styles/default-gray.css +++ b/emhttp/plugins/dynamix/styles/default-gray.css @@ -114,43 +114,33 @@ div.title.shift{margin-top:-12px} .redbar{background:-webkit-radial-gradient(#941c00,#de1100);background:linear-gradient(#941c00,#de1100)} .graybar{background:-webkit-radial-gradient(#949494,#d9d9d9);background:linear-gradient(#949494,#d9d9d9)} table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:0;width:100%} -table thead td{line-height:3.2rem} -table tbody td{line-height:3.2rem} +table thead td{line-height:3.2rem;white-space:nowrap} +table tbody td{line-height:3.2rem;white-space:nowrap} table tbody tr.tr_last{border-bottom:1px solid #606e7f} -table.disk_status{white-space:nowrap} table.disk_status thead tr:first-child td{text-transform:uppercase;color:#82857e;border-bottom:1px solid #606e7f} -table.disk_status td span{margin-left:10px} -table.disk_status tr>td{width:10%;white-space:nowrap} -table.disk_status tr>td+td{width:auto} -table.disk_status tr>td+td+td{width:6.5%;text-align:center;padding-left:4px;padding-right:8px} -table.disk_status tr>td+td+td+td{text-align:right;padding-left:0;padding-right:12px} +table.disk_status tr td:nth-child(1){min-width:100px;max-width:100px;overflow:hidden;text-overflow:ellipsis;padding-left:8px} +table.disk_status tr td:nth-child(2){min-width:400px;max-width:400px;overflow:hidden;text-overflow:ellipsis} +table.disk_status tr td:nth-child(3){text-align:center} +table.disk_status tr>td:nth-child(n+3){min-width:6.5%;max-width:6.5%;width:6.5%} +table.disk_status tr>td:nth-child(n+4){text-align:right;padding-right:8px} table.disk_status tbody tr{border-bottom:1px solid #0c0f0b} table.disk_status tbody tr:not(.tr_last):hover td{background-color:rgba(255,255,255,0.05)} -table.disk_status.stats tr>td+td{text-align:left;padding-left:0;padding-right:12px} table.array_status td{padding:4px 0} table.array_status td:first-child{letter-spacing:1px;text-transform:uppercase} table.array_status tr>td{text-align:left;white-space:nowrap;padding-left:12px;width:30%} table.array_status tr>td+td{padding-left:2px;width:20%} table.array_status tr>td+td+td{width:auto} table.array_status td.line{border-top:1px solid #0c0f0b} -table.settings{padding-top:8px;line-height:4.2rem} -@media (max-width:1280px){table.settings td:first-child{width:35%;padding-left:12px}} -@media (min-width:1281px){table.settings td:first-child{width:30%;padding-left:12px}} -@media (min-width:1921px){table.settings td:first-child{width:25%;padding-left:12px}} -table.settings td+td{padding-left:8px} -table.settings tr>td+td{line-height:1.6rem} -table.settings.shifted{padding:0;margin-left:0;margin-top:0} -table.settings.shifted td{padding-left:0} -table.share_status{white-space:nowrap;margin-top:12px} +table.share_status{margin-top:12px} table.share_status thead tr:first-child td{font-size:1.2rem;letter-spacing:1px;text-transform:uppercase;color:#82857e;border-bottom:1px solid #606e7f} -table.share_status tr>td{text-align:left;padding-left:12px} -table.share_status tr>td+td{padding-left:0} +table.share_status tr td:nth-child(1){padding-left:8px} +table.share_status tr>td:nth-child(n+2){padding-left:0} table.share_status tbody tr{border-bottom:1px solid #0c0f0b} table.share_status:not(.dashboard) tbody tr:hover td{background-color:rgba(255,255,255,0.05)} table.share_status tbody tr:last-child td{border-bottom:1px solid #606e7f} table.share_status tbody tr.alert{color:#f0000c} table.share_status tbody tr.warn{color:#e68a00} -table.share_status.fixed tr>td+td{min-width:39px;font-size:1.1rem;text-align:center;padding:0} +table.share_status.fixed tr td:nth-child(n+2){min-width:39px;font-size:1.1rem;text-align:center;padding:0} table.share_status.table{margin-top:36px} table.share_status.table tr>td{width:50%} table.share_status.dashboard{margin:0;border:none;background-color:#212f3d} diff --git a/emhttp/plugins/dynamix/styles/default-white.css b/emhttp/plugins/dynamix/styles/default-white.css index 4c9466002..8ba705e43 100644 --- a/emhttp/plugins/dynamix/styles/default-white.css +++ b/emhttp/plugins/dynamix/styles/default-white.css @@ -109,50 +109,31 @@ div.title.shift{margin-top:-30px} .redbar{background:-webkit-gradient(linear,left top,right top,from(#941c00),to(#de1100));background:linear-gradient(90deg,#941c00 0,#de1100)} .graybar{background:-webkit-gradient(linear,left top,right top,from(#949494),to(#d9d9d9));background:linear-gradient(90deg,#949494 0,#d9d9d9)} table{border-collapse:collapse;border-spacing:0;border-style:hidden;margin:-30px 0 0 0;width:100%;background-color:#f5f5f5} -table thead td{padding:7px 0} -table tbody td{padding:5px 0} +table thead td{padding:7px 0;white-space:nowrap} +table tbody td{padding:5px 0;white-space:nowrap} table tbody tr.tr_last{background-color:#ededed;border-top:1px solid #e3e3e3} table td.cpu-info{border:1px solid #e3e3e3} -table.disk_status{white-space:nowrap} -table.disk_status td span{margin-left:10px} table.disk_status thead tr:first-child td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:#e8e8e8} table.disk_status thead tr:last-child{border-bottom:1px solid #e3e3e3} -table.disk_status tr>td{width:10%;padding-left:12px;padding-right:0;white-space:nowrap} -table.disk_status tr>td+td{width:auto} -table.disk_status tr>td+td+td{width:6.5%;text-align:center;padding-left:4px;padding-right:8px} -table.disk_status tr>td+td+td+td{text-align:right;padding-left:0;padding-right:12px} +table.disk_status tr td:nth-child(1){min-width:100px;max-width:100px;overflow:hidden;text-overflow:ellipsis;padding-left:8px} +table.disk_status tr td:nth-child(2){min-width:400px;max-width:400px;overflow:hidden;text-overflow:ellipsis} +table.disk_status tr td:nth-child(3){text-align:center} +table.disk_status tr>td:nth-child(n+3){min-width:6.5%;max-width:6.5%;width:6.5%} +table.disk_status tr>td:nth-child(n+4){text-align:right;padding-right:8px} table.disk_status tbody tr:nth-child(even){background-color:#ededed} table.disk_status tbody tr:not(.tr_last):hover td{background-color:rgba(0,0,0,0.1)} -table.disk_status.stats tr>td+td{text-align:left;padding-left:0;padding-right:12px} -table.array_status td{padding:4px 0} -table.array_status tr>td{text-align:left;white-space:nowrap;padding-left:12px;width:30%} -table.array_status tr>td+td{padding-left:2px;width:20%} -table.array_status tr>td+td+td{width:auto} +table.array_status tr td:nth-child(1){width:30%;padding-left:8px} +table.array_status tr td:nth-child(2){width:20%} table.array_status td.line{border-top:1px solid #e3e3e3} table.array_status.noshift{margin-top:0} -table.settings{margin:0;padding:0;background-color:transparent} -@media (max-width:1280px){table.settings td:first-child{width:35%;padding:12px}} -@media (min-width:1281px){table.settings td:first-child{width:30%;padding:12px}} -@media (min-width:1921px){table.settings td:first-child{width:25%;padding:12px}} -table.settings td+td{padding-left:8px} -table.settings.shifted{padding:0;margin-left:0;margin-top:0} -table.settings.shifted td{padding-left:0} -table.access_list{border-spacing:0;margin-top:10px;border:none} -table.access_list tr:first-child td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;vertical-align:middle;text-align:left;border:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;background-color:#e8e8e8} -@media (max-width:1280px){table.access_list td:first-child{font-weight:normal;width:35%;padding-left:12px}} -@media (min-width:1281px){table.access_list td:first-child{font-weight:normal;width:30%;padding-left:12px}} -@media (min-width:1921px){table.access_list td:first-child{font-weight:normal;width:25%;padding-left:12px}} -table.access_list tr:first-child td:first-child{font-weight:normal} -table.access_list tr>td+td{white-space:nowrap} -table.share_status{white-space:nowrap} table.share_status thead tr:first-child td{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;background-color:#e8e8e8} -table.share_status tr>td{text-align:left;padding-left:12px} -table.share_status tr>td+td{padding-left:0} +table.share_status tr td:nth-child(1){padding-left:8px} +table.share_status tr>td:nth-child(n+2){padding-left:0} table.share_status tbody tr:nth-child(even){background-color:#ededed} table.share_status:not(.dashboard) tbody tr:hover td{background-color:rgba(0,0,0,0.1)} table.share_status tbody tr.alert{color:#f0000c} table.share_status tbody tr.warn{color:#e68a00} -table.share_status.fixed tr>td+td{min-width:39px;font-size:1.1rem;text-align:center;padding:0} +table.share_status.fixed tr td:nth-child(n+2){min-width:39px;font-size:1.1rem;text-align:center;padding:0} table.share_status.table{margin-top:36px} table.share_status.table tr>td{width:50%} table.share_status.dashboard{margin:0;border:none;background-color:#f7f9f9}