fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

custom classes for table tds and ths

Browse Source
This commit is contained in:
Felix Hamann 2018-06-30 20:21:00 +02:00
parent fee96e448f
commit fc5b0d2bd6
4 changed files with 67 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
templates/default-layout.lucius
View File

@ -281,28 +281,22 @@ a.btn.btn-info:hover,
} }
/* TABLE DESIGN */ /* TABLE DESIGN */
.table__row { .table__td, .table__th {
/* TODO: move outside of table__row as soon as tds and ths get their own class */
/* .table__td, .table__th { */
td, th {
padding-top: 14px; padding-top: 14px;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
max-width: 300px; max-width: 300px;
} }
/* .table__td { */ .table__td {
td {
font-size: 16px; font-size: 16px;
color: #808080; color: #808080;
line-height: 1.4; line-height: 1.4;
vertical-align: top; vertical-align: top;
} }
/* .table__th { */ .table__th {
th {
background-color: var(--color-dark); background-color: var(--color-dark);
position: relative; position: relative;
font-size: 16px; font-size: 16px;
@ -312,7 +306,6 @@ a.btn.btn-info:hover,
padding-bottom: 10px; padding-bottom: 10px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
}
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -323,7 +316,7 @@ a.btn.btn-info:hover,
} }
.table__td-content { .table__td-content {
max-height: 100px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }

3
templates/table/cell/body.hamlet
View File

@ -1,2 +1,3 @@
<td *{attrs}> <td .table__td *{attrs}>
<div .table__td-content>
^{widget} ^{widget}

2
templates/table/cell/header.hamlet
View File

@ -1,4 +1,4 @@
<th *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc> <th .table__th *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
$maybe flag <- sortableKey $maybe flag <- sortableKey
$case directions $case directions
$of [SortAsc] $of [SortAsc]

46
templates/table/colonnade.lucius
View File

@ -1,15 +1,12 @@
/* SORTABLE TABLE */ /* SORTABLE TABLE-HEADERS*/
.table { .table__th.sortable {
/* TODO: move outside of table as soon as tds and ths get their own class */
th.sortable {
position: relative; position: relative;
padding-right: 24px; padding-right: 24px;
cursor: pointer; cursor: pointer;
} }
th.sortable::after, .table__th.sortable::after,
th.sortable::before { .table__th.sortable::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -19,26 +16,25 @@
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-bottom: 8px solid rgba(255, 255, 255, 0.4); border-bottom: 8px solid rgba(255, 255, 255, 0.4);
} }
th.sortable::before { .table__th.sortable::before {
/* magic numbers to move arrow back in the right position after flipping it. /* magic numbers to move arrow back in the right position after flipping it.
this allows us to use the same border for the up and the down arrow */ this allows us to use the same border for the up and the down arrow */
transform: translateY(150%) scale(1, -1); transform: translateY(150%) scale(1, -1);
transform-origin: top; transform-origin: top;
} }
th.sortable::after { .table__th.sortable::after {
transform: translateY(-150%); transform: translateY(-150%);
} }
th.sortable:hover::before, .table__th.sortable:hover::before,
th.sortable:hover::after { .table__th.sortable:hover::after {
border-bottom-color: rgba(255, 255, 255, 0.7); border-bottom-color: rgba(255, 255, 255, 0.7);
} }
th.sorted-asc::before, .table__th.sorted-asc::before,
th.sorted-desc::after { .table__th.sorted-desc::after {
border-bottom-color: white !important; border-bottom-color: white !important;
}
} }