minimize count and visibility columns for better table alignments (#1636)

assets/sass/content.scss

@@ -58,3 +58,10 @@ td {
 .open-edit {
     cursor: pointer;
 }
+
+/* allow minimized table columns, eg. customer team & visibility */
+th.w-min,
+td.w-min {
+    width: 1%;
+    white-space: nowrap;
+}

public/build/entrypoints.json

@@ -8,7 +8,7 @@
         "build/app.d8c0b5e5.js"
       ],
       "css": [
-        "build/app.297ac462.css"
+        "build/app.383647c4.css"
       ]
     },
     "invoice": {
@@ -45,7 +45,7 @@
     "build/0.f7fae2b9.js": "sha384-DR5A41RIECdWBd6xODR0b1hvGqcEYUyn9vNPreqK9VOCQWTF6bgxB4RVmqlOKilT",
     "build/1.c24a9c6f.js": "sha384-JPoKdrVtBemSiVBoAnmSxLML7xXM9zYeuwOPYQv/kLzt/P4cmLY5r9gH8oaGRPFG",
     "build/app.d8c0b5e5.js": "sha384-VwB8dUrwHl8kZCpZjOlqXKfC39MtJNY/TSQj0oEwyFuqKGhrf0LS5++I06EOZo9b",
-    "build/app.297ac462.css": "sha384-ca+oUwbt6kP6yVM79YGuNwCUFwLzcK0ARuiwsQfRRltzJzQncA+c6tUjDFvlnFHw",
+    "build/app.383647c4.css": "sha384-R9ydzuymNE2FlCGVy8XsJuK3xGrb2PtgRLNQRhMAMtbnjyxpFDE1q7WRXiiQMEvI",
     "build/invoice.50473330.js": "sha384-2BXic5Sgorf2tXai6zSAN4wLY2dbg06L03/xMKW6itMcszvtnRArKzfBh6DNcF3f",
     "build/invoice.3764169b.css": "sha384-oILxBeIu3sNXxVnxhHmyHxqvLY2Rm5P2lzuJVtbxBIcnSdLS31SUSW6nVWNej1eg",
     "build/2.a47ad919.js": "sha384-1h2P/tsl+bh8qgJd7S9irQHKuns7UATVxeFGLOCH85GPFXfAdRzgzx3nk5MrxzrV",

public/build/manifest.json

@@ -2,7 +2,7 @@
   "build/0.f7fae2b9.js": "build/0.f7fae2b9.js",
   "build/1.c24a9c6f.js": "build/1.c24a9c6f.js",
   "build/2.a47ad919.js": "build/2.a47ad919.js",
-  "build/app.css": "build/app.297ac462.css",
+  "build/app.css": "build/app.383647c4.css",
   "build/app.js": "build/app.d8c0b5e5.js",
   "build/calendar.css": "build/calendar.8ede69b5.css",
   "build/calendar.js": "build/calendar.d2540934.js",

templates/activity/index.html.twig

@@ -15,7 +15,7 @@
     }) %}
 {% endfor %}
 {% set columns = columns|merge({
-    'visible': {'class': 'text-center hidden', 'orderBy': false},
+    'visible': {'class': 'text-center hidden w-min', 'orderBy': false},
     'actions': {'class': 'actions alwaysVisible'},
 }) %}
 

templates/customer/index.html.twig

@@ -26,8 +26,8 @@
     }) %}
 {% endfor %}
 {% set columns = columns|merge({
-    'team': {'class': 'text-center', 'orderBy': false},
+    'team': {'class': 'text-center w-min', 'orderBy': false},
-    'visible': {'class': 'text-center hidden', 'orderBy': false},
+    'visible': {'class': 'text-center hidden w-min', 'orderBy': false},
     'actions': {'class': 'actions alwaysVisible'},
 }) %}
 

templates/plugin/index.html.twig

@@ -14,11 +14,11 @@
     {% else %}
 
         {% set columns = {
-            'name': '',
+            'name': {'class': 'alwaysVisible'},
-            'version': '',
+            'version': {'class': ' w-min'},
-            'description': 'hidden-xs',
+            'description': {'class': 'hidden-xs'},
-            'required_version': 'hidden-xs hidden-sm',
+            'required_version': {'class': 'hidden-xs hidden-sm w-min'},
-            'actions': 'actions alwaysVisible',
+            'actions': {'class': 'actions alwaysVisible'},
         } %}
 
         {% set tableName = 'plugins' %}
@@ -26,14 +26,14 @@
         {{ tables.datatable_header(tableName, columns, null, {}) }}
         {% for plugin in plugins %}
             <tr>
-                <td>
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'name') }}">
                     {% if plugin.id != plugin.name %}
                         <span data-toggle="tooltip" data-placement="top" title="{{ plugin.id }}">{{ plugin.name }}</span>
                     {% else %}
                         {{ plugin.name }}
                     {% endif %}
                 </td>
-                <td>{{ widgets.label(plugin.metadata.version, 'primary') }}</td>
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'version') }}">{{ widgets.label(plugin.metadata.version, 'primary') }}</td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'description') }}">{{ plugin.metadata.description }}</td>
                 <td class="{{ tables.data_table_column_class(tableName, columns, 'required_version') }}">
                     {% if plugin.metadata.kimaiVersion > constant('App\\Constants::VERSION') %}
@@ -44,7 +44,7 @@
                         {{ widgets.label(plugin.metadata.kimaiVersion, 'success') }}
                     {% endif %}
                 </td>
-                <td class="actions">
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">
                     {{ actions.plugin(plugin, 'index') }}
                 </td>
             </tr>

templates/project/index.html.twig

@@ -19,8 +19,8 @@
     }) %}
 {% endfor %}
 {% set columns = columns|merge({
-    'team': {'class': 'text-center', 'orderBy': false},
+    'team': {'class': 'text-center w-min', 'orderBy': false},
-    'visible': {'class': 'text-center hidden', 'orderBy': false},
+    'visible': {'class': 'text-center hidden w-min', 'orderBy': false},
     'actions': {'class': 'actions alwaysVisible'},
 }) %}
 

templates/tags/index.html.twig

@@ -21,9 +21,9 @@
 
         {% set columns = {
             'id': {'class': 'alwaysVisible multiCheckbox', 'orderBy': false, 'title': false, 'html_before': tables.datatable_multiupdate_all()},
-            'name': '',
+            'name': {'class': 'alwaysVisible'},
-            'amount': '',
+            'amount': {'class': 'text-center w-min'},
-            'actions': 'actions alwaysVisible',
+            'actions': {'class': 'actions alwaysVisible'},
         } %}
 
         {% set tableName = 'admin_tags' %}
@@ -38,12 +38,12 @@
 
             <tr{% if manageAllowed %} class="modal-ajax-form open-edit" data-href="{{ path('tags_edit', {'id': tag.id}) }}"{% endif %}>
                 <td class="text-nowrap">{{ tables.datatable_multiupdate_row(tag.id) }}</td>
-                <td>
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'name') }}">
                     {{ widgets.color_dot(tag.color|default('#00a65a')) }}
                     {{ tag.name }}
                 </td>
-                <td>{{ widgets.label(tag.amount, type) }}</td>
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'amount') }}">{{ widgets.label(tag.amount, type) }}</td>
-                <td class="actions">
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">
                     {{ actions.tag(tag, 'index') }}
                 </td>
             </tr>

templates/team/index.html.twig

@@ -15,10 +15,10 @@
     {% else %}
 
         {% set columns = {
-            'name': '',
+            'name': {'class': ''},
-            'teamlead': '',
+            'teamlead': {'class': ''},
             'user': {'class': 'hidden-xs', 'orderBy': false},
-            'actions': 'actions alwaysVisible',
+            'actions': {'class': 'actions alwaysVisible'},
         } %}
 
         {% set tableName = 'admin_teams' %}
@@ -33,7 +33,7 @@
                         {{ widgets.label_user(user) }} 
                     {% endfor %}
                 </td>
-                <td class="actions">
+                <td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">
                     {{ actions.team(team, 'index') }}
                 </td>
             </tr>

templates/user/index.html.twig

@@ -17,8 +17,8 @@
     }) %}
 {% endfor %}
 {% set columns = columns|merge({
-    'team': {'class': 'text-center hidden-xs', 'orderBy': false},
+    'team': {'class': 'text-center hidden-xs w-min', 'orderBy': false},
-    'active': {'class': 'hidden-xs hidden', 'orderBy': false},
+    'active': {'class': 'hidden-xs hidden w-min', 'orderBy': false},
     'actions': {'class': 'actions alwaysVisible'},
 }) %}