data-table sorting icons and alignment (#2734)

This commit is contained in:
Kevin Papst
2021-08-26 00:56:36 +02:00
committed by GitHub
parent fae525c82f
commit 56524a9773
16 changed files with 57 additions and 69 deletions

View File

@@ -6,11 +6,6 @@
*/
/* custom extension to make the column wide enough to show the sortable icons */
table.dataTable th.sortable {
padding-left: 22px;
}
table.dataTable.table > tbody > tr > td {
vertical-align: middle;
.img-circle {

View File

@@ -125,26 +125,28 @@ table.dataTable thead .sorting_desc_disabled {
position: relative;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
position: absolute;
top: 10px;
left: 5px;
display: block;
font-family: 'Glyphicons Halflings';
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
font-weight: bold;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
padding-left: 5px;
font-family: 'Font Awesome 5 Free';
opacity: 0.5;
font-size: 12px;
}
table.dataTable thead .sorting:before {
table.dataTable thead .sorting:after {
opacity: 0.2;
content: "\e150"; /* sort */
content: "\f0dc"; /* sort */
}
table.dataTable thead .sorting_asc:before {
content: "\e155"; /* sort-by-attributes */
table.dataTable thead .sorting_asc:after {
content: "\f062";
}
table.dataTable thead .sorting_desc:before {
content: "\e156"; /* sort-by-attributes-alt */
table.dataTable thead .sorting_desc:after {
content: "\f063";
}
div.dataTables_scrollBody table.dataTable thead .sorting:before,
div.dataTables_scrollBody table.dataTable thead .sorting_asc:before,
@@ -162,11 +164,6 @@ table.dataTable thead > tr > th {
white-space: nowrap;
}
/*
table.dataTable thead > tr > th {
padding-right: 30px;
}
*/
table.dataTable th:active {
outline: none;
}

File diff suppressed because one or more lines are too long

View File

@@ -6,7 +6,7 @@
"build/app.e22732af.js"
],
"css": [
"build/app.96253ac9.css"
"build/app.0b9e932d.css"
]
},
"invoice": {

View File

@@ -1,5 +1,5 @@
{
"build/app.css": "build/app.96253ac9.css",
"build/app.css": "build/app.0b9e932d.css",
"build/app.js": "build/app.e22732af.js",
"build/invoice.css": "build/invoice.ff32661a.css",
"build/invoice.js": "build/invoice.19f36eca.js",

View File

@@ -15,8 +15,8 @@
}) %}
{% endfor %}
{% set columns = columns|merge({
'budget': {'class': 'hidden-xs hidden-sm hidden text-center w-min', 'title': 'label.budget'|trans},
'timeBudget': {'class': 'hidden-xs hidden-sm hidden text-center w-min', 'title': 'label.timeBudget'|trans},
'budget': {'class': 'hidden-xs hidden-sm hidden text-right w-min', 'title': 'label.budget'|trans},
'timeBudget': {'class': 'hidden-xs hidden-sm hidden text-right w-min', 'title': 'label.timeBudget'|trans},
'team': {'class': 'text-center w-min', 'orderBy': false},
'visible': {'class': 'text-center hidden w-min'},
'actions': {'class': 'actions alwaysVisible'},

View File

@@ -27,7 +27,7 @@
<tr>
<th>{{ 'label.name'|trans }}</th>
<th class="hidden-xs">{{ 'label.comment'|trans }}</th>
<th class="w-min text-center">{{ 'label.project_end'|trans }}</th>
<th class="w-min text-right">{{ 'label.project_end'|trans }}</th>
<th class="w-min text-center">{{ 'label.visible'|trans }}</th>
<th class="w-min text-center">{{ 'label.team'|trans }}</th>
<th class="actions"></th>
@@ -38,7 +38,7 @@
<tr {{ widgets.project_row_attr(project, now) }}>
<td>{{ widgets.label_project(project) }}</td>
<td class="hidden-xs">{{ project.comment|comment1line(not app.user.smallLayout) }}</td>
<td class="w-min text-center">
<td class="w-min text-right">
{% if project.end is not null %}
{{ project.end|date_short }}
{% else %}

View File

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

View File

@@ -9,10 +9,10 @@
'project': {'class': 'hidden-xs hidden-sm', 'orderBy': false},
'activity': {'class': 'hidden-xs hidden-sm hidden-md', 'orderBy': false},
'description': {'class': 'hidden-xs hidden-sm hidden-md timesheet-description', 'orderBy': false},
'unit_price': {'class': 'hidden hidden-xs text-nowrap', 'orderBy': false},
'duration': {'class': 'text-nowrap', 'orderBy': false},
'rate_internal': {'class': 'hidden text-nowrap', 'orderBy': false},
'total_rate': {'class': 'text-nowrap', 'orderBy': false},
'unit_price': {'class': 'text-right hidden hidden-xs text-nowrap', 'orderBy': false},
'duration': {'class': 'text-right text-nowrap', 'orderBy': false},
'rate_internal': {'class': 'text-right hidden text-nowrap', 'orderBy': false},
'total_rate': {'class': 'text-right text-nowrap', 'orderBy': false},
'exported': {'class': 'alwaysVisible', 'orderBy': false},
} %}
@@ -108,7 +108,7 @@
<thead>
<tr>
<th>{{ 'label.customer'|trans }}</th>
<th class="w-min text-center hidden-xs">{{ 'label.duration'|trans }}</th>
<th class="w-min text-right hidden-xs">{{ 'label.duration'|trans }}</th>
{# <th class="w-min text-right hidden-xs">{{ 'label.internalRate'|trans }}</th> #}
<th class="w-min text-right">{{ 'label.total_rate'|trans }}</th>
</tr>
@@ -120,7 +120,7 @@
<td>
{{ widgets.label_customer(row.customer) }}
</td>
<td class="w-min text-center hidden-xs">
<td class="w-min text-right hidden-xs">
{{ row.duration|duration(decimal) }}
</td>
{#

View File

@@ -9,9 +9,9 @@
'project': {'class': 'hidden-xs hidden-sm', 'orderBy': false},
'description': {'class': 'hidden-xs hidden-sm hidden', 'orderBy': false},
'user': {'class': 'hidden-xs hidden-sm w-min', 'orderBy': false},
'unit_price': {'class': 'hidden-xs text-center w-min', 'orderBy': false},
'amount': {'class': 'text-center w-min', 'orderBy': false},
'duration': {'class': 'hidden-xs text-center w-min', 'orderBy': false},
'unit_price': {'class': 'hidden-xs text-right w-min', 'orderBy': false},
'amount': {'class': 'text-right w-min', 'orderBy': false},
'duration': {'class': 'hidden-xs text-right w-min', 'orderBy': false},
'total_rate': {'class': 'text-right alwaysVisible w-min', 'orderBy': false},
} %}
@@ -95,7 +95,7 @@
<tr>
<th>{{ 'label.customer'|trans }}</th>
<th class="w-min text-center actions"></th>
<th class="w-min text-center hidden-xs">{{ 'label.duration'|trans }}</th>
<th class="w-min text-right hidden-xs">{{ 'label.duration'|trans }}</th>
<th class="w-min text-right hidden-xs">{{ 'label.total_rate'|trans }}</th>
</tr>
</thead>
@@ -112,7 +112,7 @@
{{ widgets.action_button('print', {'url': '#', 'onclick': 'return singleInvoice(this)', 'title': 'button.preview'|trans, 'target': '_blank', 'class': 'btn btn-sm', 'attr': {'data-href': path('invoice_preview', {'customer': model.customer.id, 'template': model.template.id})}}) }}
{{ widgets.action_button('save', {'url': '#', 'onclick': 'return singleInvoice(this)', 'title': 'action.save'|trans, 'class': 'btn btn-sm', 'attr': {'data-href': path('invoice_create', {'customer': model.customer.id, 'template': model.template.id})}}, 'success') }}
</td>
<td class="w-min text-center hidden-xs">
<td class="w-min text-right hidden-xs">
{{ model.calculator.timeWorked|duration(isDecimal) }}
</td>
<td class="w-min text-right hidden-xs">

View File

@@ -9,12 +9,12 @@
'date': {'class': 'alwaysVisible', 'orderBy': false},
'user': {'class': 'hidden-xs hidden-sm text-nowrap hidden', 'orderBy': false},
'customer': {'class': 'hidden-xs hidden-sm text-nowrap', 'orderBy': false},
'invoice_number': {'class': 'hidden-xs hidden-sm text-center w-min', 'title': 'invoice.number'|trans, 'orderBy': false},
'due_date': {'class': 'hidden-xs text-center w-min', 'title': 'invoice.due_days'|trans, 'orderBy': false},
'payment_date': {'class': 'hidden-xs hidden text-center w-min', 'title': 'invoice.payment_date'|trans, 'orderBy': false},
'status': {'class': 'text-center alwaysVisible w-min', 'orderBy': false},
'subtotal': {'class': 'hidden-xs text-center w-min hidden', 'title': 'invoice.subtotal'|trans, 'orderBy': false},
'tax': {'class': 'hidden-xs text-center w-min hidden', 'title': 'invoice.tax'|trans, 'orderBy': false},
'invoice_number': {'class': 'hidden-xs hidden-sm w-min', 'title': 'invoice.number'|trans, 'orderBy': false},
'due_date': {'class': 'hidden-xs w-min', 'title': 'invoice.due_days'|trans, 'orderBy': false},
'payment_date': {'class': 'hidden-xs hidden w-min', 'title': 'invoice.payment_date'|trans, 'orderBy': false},
'status': {'class': 'alwaysVisible w-min', 'orderBy': false},
'subtotal': {'class': 'hidden-xs text-right w-min hidden', 'title': 'invoice.subtotal'|trans, 'orderBy': false},
'tax': {'class': 'hidden-xs text-right w-min hidden', 'title': 'invoice.tax'|trans, 'orderBy': false},
'total_rate': {'class': 'hidden-xs text-right w-min', 'orderBy': false},
'actions': {'class': 'actions alwaysVisible', 'orderBy': false},
} %}
@@ -45,8 +45,6 @@
<td class="{{ tables.data_table_column_class(tableName, columns, 'payment_date') }}">
{% if entry.paymentDate and entry.paid %}
{{ widgets.label(entry.paymentDate|date_short, 'primary') }}
{% else %}
&ndash;
{% endif %}
</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'status') }}">{{ macros.invoice_status(entry) }}</td>

View File

@@ -180,15 +180,15 @@
{% if teams|length > 0 %}
{{ _self.badge_counter(teams|length) }}
{% else %}
{{ _self.icon('unlocked') }}
{{ _self.badge_counter(0, null, 'bg-gray') }}
{% endif %}
{% endmacro %}
{% macro badge_counter(count, url) %}
{% macro badge_counter(count, url, type) %}
{% if url %}
<a href="{{ url }}"><span class="badge bg-blue">{{ count }}</span></a>
<a href="{{ url }}"><span class="badge {{ type|default('bg-blue') }}">{{ count }}</span></a>
{% else %}
<span class="badge bg-blue">{{ count }}</span>
<span class="badge {{ type|default('bg-blue') }}">{{ count }}</span>
{% endif %}
{% endmacro %}

View File

@@ -19,8 +19,8 @@
}) %}
{% endfor %}
{% set columns = columns|merge({
'budget': {'class': 'hidden-xs hidden-sm hidden text-center w-min', 'title': 'label.budget'|trans},
'timeBudget': {'class': 'hidden-xs hidden-sm hidden text-center w-min', 'title': 'label.timeBudget'|trans},
'budget': {'class': 'hidden-xs hidden-sm hidden text-right w-min', 'title': 'label.budget'|trans},
'timeBudget': {'class': 'hidden-xs hidden-sm hidden text-right w-min', 'title': 'label.timeBudget'|trans},
'team': {'class': 'text-center w-min', 'orderBy': false},
'visible': {'class': 'text-center hidden w-min'},
'actions': {'class': 'actions alwaysVisible'},

View File

@@ -33,9 +33,9 @@
{{ tables.datatable_header(tableName, columns, query, {'reload': 'kimai.tagUpdate'}) }}
{% for tag in tags %}
{% set type = 'primary' %}
{% set type = '' %}
{% if tag.amount == 0 %}
{% set type = 'warning' %}
{% set type = 'bg-yellow' %}
{% endif %}
<tr{% if manageAllowed %} class="modal-ajax-form open-edit" data-href="{{ path('tags_edit', {'id': tag.id}) }}"{% endif %}>
@@ -47,7 +47,7 @@
<td class="{{ tables.data_table_column_class(tableName, columns, 'name') }}">
{{ widgets.label_name(tag.name, tag.color) }}
</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'amount') }}">{{ widgets.label(tag.amount, type) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'amount') }}">{{ widgets.badge_counter(tag.amount, null, type) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">
{{ actions.tag(tag, 'index') }}
</td>

View File

@@ -17,13 +17,13 @@
{% if showStartEndTime %}
{% set columns = columns|merge({
'starttime': {'class': 'hidden-xs', 'orderBy': 'begin'},
'endtime': {'class': 'hidden-xs', 'orderBy': 'end'}
'starttime': {'class': 'hidden-xs text-center', 'orderBy': 'begin'},
'endtime': {'class': 'hidden-xs text-center', 'orderBy': 'end'}
}) %}
{% endif %}
{% set columns = columns|merge({'duration': ''}) %}
{% set columns = columns|merge({'duration': {'class': 'text-right'}}) %}
{% if canSeeRate %}
{% set columns = columns|merge({'rate': ''}) %}
{% set columns = columns|merge({'rate': {'class': 'text-right'}}) %}
{% endif %}
{% set columns = columns|merge({
'customer': {'class': 'hidden-xs hidden-sm hidden-md'},

View File

@@ -65,10 +65,8 @@
{% endif %}
</td>
{% endfor %}
<td class="text-center {{ tables.data_table_column_class(tableName, columns, 'team') }}">
{% if entry.teams|length > 0 %}
{{ widgets.badge_counter(entry.teams|length) }}
{% endif %}
<td class="{{ tables.data_table_column_class(tableName, columns, 'team') }}">
{{ widgets.badge_team_access(entry.teams) }}
</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'active') }}">{{ widgets.label_visible(entry.enabled) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">{{ actions.user(entry, 'index') }}</td>