Merge pull request #7540 from pReya/fix/table-ui-polish

[Web] Table UI polish (icon centering, tag heights, sort headers)

data/web/css/build/013-datatables.css

@@ -15,6 +15,10 @@ table.dataTable>tbody>tr.child ul.dtr-details>li {
     border-bottom: 1px solid rgba(0, 0, 0, 0.129);
     padding: 0.5em 0;
 }
+/* like the first entry has no top padding, the last one needs no bottom padding */
+table.dataTable>tbody>tr.child ul.dtr-details>li:last-child {
+    padding-bottom: 0;
+}
 table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover, 
 table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover {
     background-color: var(--mc-dtr-hover-bg);
@@ -28,7 +32,8 @@ table.dataTable td.dt-control:before {
     color: var(--mc-dtr-color);
     height: 1em;
     width: 1em;
-    line-height: 1.25em;
+    line-height: 1em;
+    margin-top: calc(-0.5em - 1.5px);
     border-radius: 0px;
     box-shadow: none;
     font-size: 14px;
@@ -39,11 +44,29 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
 table.dataTable td.dt-control:before {
     background-color: var(--mc-dtr-active-bg) !important;
 }
+/* The default initial order targets column 0, which is usually the non-orderable expand column */
+table.dataTable thead > tr > th.sorting_disabled.sorting_asc,
+table.dataTable thead > tr > th.sorting_disabled.sorting_desc {
+    padding-right: 0.5rem;
+    cursor: auto;
+}
+table.dataTable thead > tr > th.sorting_disabled.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_disabled.sorting_asc:after,
+table.dataTable thead > tr > th.sorting_disabled.sorting_desc:before,
+table.dataTable thead > tr > th.sorting_disabled.sorting_desc:after {
+    display: none;
+}
 table.dataTable.table-striped>tbody>tr>td {
     vertical-align: middle;
 }
 table.dataTable.table-striped>tbody>tr>td>input[type="checkbox"] {
-    margin-top: 7px;
+    /* centers the 1em checkbox in the 1.5em line, level with the expand control */
+    margin-top: 0.25em;
+}
+/* the vertical margin is meant for the tag editor in edit forms, in tables it only adds height */
+table.dataTable .tag-badge {
+    margin-top: 0;
+    margin-bottom: 0;
 }
 td.dtr-col-lg {
     min-width: 350px;

data/web/css/build/014-mailcow.css

@@ -139,6 +139,13 @@ body {
   display: inline-block;
   font-size: inherit;
 }
+.badge .bi {
+  font-size: inherit;
+}
+/* keeps icons from making a badge taller than one with text only */
+.badge .bi::before {
+  line-height: 0;
+}
 .btn-group-xs > .btn, .btn-xs {
   padding: .25rem .4rem;
   font-size: .875rem;
@@ -343,6 +350,7 @@ code {
 }
 .tag-badge .bi {
   font-size: 12px;
+  line-height: 0;
 }
 .tag-badge.btn-badge:hover {
   filter: brightness(0.9);

data/web/css/build/015-responsive.css

@@ -191,7 +191,7 @@
       height: 2rem;
       width: 2rem;
       line-height: 2rem;
-      margin-top: -15px;
+      margin-top: calc(-1rem - 1.5px);
   }
 
   li .dtr-data {

data/web/js/site/mailbox.js

@@ -614,7 +614,7 @@ jQuery(function($){
           defaultContent: ''
         },
         {
-          title: 'RL',
+          title: lang_edit.ratelimit,
           data: 'rl',
           searchable: false,
           orderable: false,

data/web/lang/lang.en-gb.json

@@ -1127,7 +1127,7 @@
         "mailbox_defaults_info": "Define default settings for new mailboxes.",
         "mailbox_defquota": "Default mailbox size",
         "mailbox_templates": "Mailbox Templates",
-        "mailbox_quota": "Max. size of a mailbox",
+        "mailbox_quota": "Max. mailbox size",
         "mailboxes": "Mailboxes",
         "max_aliases": "Max. aliases",
         "max_mailboxes": "Max. possible mailboxes",