data-table sorting icons and alignment (#2734)
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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
@@ -6,7 +6,7 @@
|
||||
"build/app.e22732af.js"
|
||||
],
|
||||
"css": [
|
||||
"build/app.96253ac9.css"
|
||||
"build/app.0b9e932d.css"
|
||||
]
|
||||
},
|
||||
"invoice": {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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'},
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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'},
|
||||
|
||||
@@ -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>
|
||||
{#
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 %}
|
||||
–
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="{{ tables.data_table_column_class(tableName, columns, 'status') }}">{{ macros.invoice_status(entry) }}</td>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
@@ -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'},
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'},
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user