mirror of
https://github.com/kevinpapst/kimai2.git
synced 2025-04-16 02:04:24 +00:00
cleanup datatable classes
This commit is contained in:
Kevin Papst
parent
9a51e845fa
commit
28dc07df27
10 changed files with 78 additions and 239 deletions
assets/sass
public/build
templates
|
|
@ -11,8 +11,7 @@
|
|||
@import 'print';
|
||||
@import 'content';
|
||||
@import 'loading-spinner';
|
||||
@import 'datatable';
|
||||
@import 'datatable-extensions';
|
||||
@import 'tables';
|
||||
@import 'calendar';
|
||||
@import 'ticktac';
|
||||
@import 'daterangepicker';
|
||||
|
|
|
|||
|
|
@ -1,226 +0,0 @@
|
|||
/*
|
||||
* This file is part of the Kimai time-tracking app.
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
/* Taken from dataTables.bootstrap.css */
|
||||
div.dataTables_length label {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_length select {
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.dataTables_filter {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.dataTables_filter label {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.dataTables_filter input {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.dataTables_info {
|
||||
padding-top: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.dataTables_paginate {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.dataTables_paginate ul.pagination {
|
||||
margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dataTables_length,
|
||||
div.dataTables_filter,
|
||||
div.dataTables_info,
|
||||
div.dataTables_paginate {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.DTTT {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable td,
|
||||
table.dataTable th {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
/*margin-top: 6px !important;
|
||||
margin-bottom: 6px !important;*/
|
||||
margin-bottom: 0px !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
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:after {
|
||||
opacity: 0.2;
|
||||
content: "\f0dc"; /* sort */
|
||||
}
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: "\f062";
|
||||
}
|
||||
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,
|
||||
div.dataTables_scrollBody table.dataTable thead .sorting_desc:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_asc_disabled:before,
|
||||
table.dataTable thead .sorting_desc_disabled:before {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.dataTable th:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
/* Condensed */
|
||||
table.dataTable.table-sm thead > tr > th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
table.dataTable.table-sm thead .sorting:before,
|
||||
table.dataTable.table-sm thead .sorting_asc:before,
|
||||
table.dataTable.table-sm thead .sorting_desc:before {
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
/* Scrolling */
|
||||
div.dataTables_scrollHead table {
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
div.dataTables_scrollHead table thead tr:last-child th:first-child,
|
||||
div.dataTables_scrollHead table thead tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody tbody tr:first-child th,
|
||||
div.dataTables_scrollBody tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
|
||||
width calculations when using scrolling impossible to align columns. We have
|
||||
to use separate
|
||||
*/
|
||||
table.table-bordered.dataTable {
|
||||
border-collapse: separate !important;
|
||||
}
|
||||
table.table-bordered thead th,
|
||||
table.table-bordered thead td {
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
table.table-bordered tbody th,
|
||||
table.table-bordered tbody td {
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
table.table-bordered tfoot th,
|
||||
table.table-bordered tfoot td {
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
table.table-bordered th:last-child,
|
||||
table.table-bordered td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
div.dataTables_scrollHead table.table-bordered {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* TableTools styles
|
||||
*/
|
||||
.table.dataTable tbody tr.active td,
|
||||
.table.dataTable tbody tr.active th {
|
||||
background-color: #08C;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table.dataTable tbody tr.active:hover td,
|
||||
.table.dataTable tbody tr.active:hover th {
|
||||
background-color: #0075b0 !important;
|
||||
}
|
||||
|
||||
.table.dataTable tbody tr.active th > a,
|
||||
.table.dataTable tbody tr.active td > a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table-striped.dataTable tbody tr.active:nth-child(odd) td,
|
||||
.table-striped.dataTable tbody tr.active:nth-child(odd) th {
|
||||
background-color: #017ebc;
|
||||
}
|
||||
|
|
@ -4,9 +4,79 @@
|
|||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
@import "variables";
|
||||
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin-bottom: 0 !important;
|
||||
max-width: none !important;
|
||||
|
||||
thead .sorting,
|
||||
thead .sorting_asc,
|
||||
thead .sorting_desc {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
thead .sorting_asc,
|
||||
thead .sorting_desc {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
thead .sorting:after,
|
||||
thead .sorting_asc:after,
|
||||
thead .sorting_desc:after {
|
||||
padding-left: 5px;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
thead .sorting:after {
|
||||
opacity: 0.2;
|
||||
content: "\f0dc"; /* sort */
|
||||
}
|
||||
thead .sorting_asc:after {
|
||||
content: "\f062";
|
||||
}
|
||||
thead .sorting_desc:after {
|
||||
content: "\f063";
|
||||
}
|
||||
|
||||
thead > tr > th {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
table.table-bordered {
|
||||
thead th,
|
||||
thead td {
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
tbody th,
|
||||
tbody td {
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
tfoot th,
|
||||
tfoot td {
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable.table > tbody > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
color: $dark-mode-text;
|
||||
}
|
||||
|
||||
/* datatable-extensions.scss */
|
||||
table.dataTable {
|
||||
th.today, td.today {
|
||||
background-color: $dark-mode-today;
|
||||
|
|
|
|||
2
public/build/app.36e6fe26.css
Normal file
2
public/build/app.36e6fe26.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,7 @@
|
|||
"build/app.91dd6d34.js"
|
||||
],
|
||||
"css": [
|
||||
"build/app.82f6e006.css"
|
||||
"build/app.36e6fe26.css"
|
||||
]
|
||||
},
|
||||
"invoice": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"build/app.css": "build/app.82f6e006.css",
|
||||
"build/app.css": "build/app.36e6fe26.css",
|
||||
"build/app.js": "build/app.91dd6d34.js",
|
||||
"build/invoice.css": "build/invoice.7abcff08.css",
|
||||
"build/invoice.js": "build/invoice.c8ae95ad.js",
|
||||
|
|
|
|||
|
|
@ -258,7 +258,6 @@
|
|||
h3 { font-size: 18px; }
|
||||
p, td { font-size: 11px; }
|
||||
th, td.totals { font-size: 12px; }
|
||||
table.table-bordered.dataTable { border-collapse: collapse!important; }
|
||||
}
|
||||
.items td.totals {
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -46,8 +46,6 @@
|
|||
{% set orderBy = false %}
|
||||
{% set order = false %}
|
||||
{% endif %}
|
||||
{% set striped = options.striped ?? false %}
|
||||
{% set bordered = options.bordered ?? false %}
|
||||
{% set reloadEvent = options.reload|default('') %}
|
||||
{% set translationDomain = options.translationDomain|default('messages') %}
|
||||
{% set translationPrefix = options.translationPrefix ?? 'label.' %}
|
||||
|
|
@ -56,8 +54,8 @@
|
|||
|
||||
<div class="{{ boxClass }} datatable_{{ tableName }}">
|
||||
<div class="card-body p-0">
|
||||
<div class="dataTables_wrapper form-inline dt-bootstrap">
|
||||
<table class="table {% if striped %}table-striped {% endif %}{% if bordered %}table-bordered {% endif %}table-hover dataTable" role="grid" data-reload-event="kimai.reset_column_visibility {{ reloadEvent }}">
|
||||
<div class="dataTables_wrapper form-inline">
|
||||
<table class="table table-hover dataTable" role="grid" data-reload-event="kimai.reset_column_visibility {{ reloadEvent }}">
|
||||
<thead class="sticky-top">
|
||||
<tr>
|
||||
{%- for title, headerOptions in columns -%}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue