fraport/fradrive
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

55
templates/default-layout.lucius
View File

@ -281,38 +281,31 @@ a.btn.btn-info:hover,
}
/* TABLE DESIGN */
.table__row {
.table__td, .table__th {
padding-top: 14px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
max-width: 300px;
}
/* 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-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
max-width: 300px;
}
.table__td {
font-size: 16px;
color: #808080;
line-height: 1.4;
vertical-align: top;
}
/* .table__td { */
td {
font-size: 16px;
color: #808080;
line-height: 1.4;
vertical-align: top;
}
/* .table__th { */
th {
background-color: var(--color-dark);
position: relative;
font-size: 16px;
color: #fff;
line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
text-align: left;
}
.table__th {
background-color: var(--color-dark);
position: relative;
font-size: 16px;
color: #fff;
line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
text-align: left;
}
@media (max-width: 1200px) {
@ -323,7 +316,7 @@ a.btn.btn-info:hover,
}
.table__td-content {
max-height: 100px;
max-height: 200px;
overflow-y: auto;
}

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

@ -1,2 +1,3 @@
<td *{attrs}>
^{widget}
<td .table__td *{attrs}>
<div .table__td-content>
^{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
$case directions
$of [SortAsc]

82
templates/table/colonnade.lucius
View File

@ -1,44 +1,40 @@
/* SORTABLE TABLE */
.table {
/* TODO: move outside of table as soon as tds and ths get their own class */
th.sortable {
position: relative;
padding-right: 24px;
cursor: pointer;
}
th.sortable::after,
th.sortable::before {
content: '';
position: absolute;
top: 50%;
right: 4px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(255, 255, 255, 0.4);
}
th.sortable::before {
/* 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 */
transform: translateY(150%) scale(1, -1);
transform-origin: top;
}
th.sortable::after {
transform: translateY(-150%);
}
th.sortable:hover::before,
th.sortable:hover::after {
border-bottom-color: rgba(255, 255, 255, 0.7);
}
th.sorted-asc::before,
th.sorted-desc::after {
border-bottom-color: white !important;
}
/* SORTABLE TABLE-HEADERS*/
.table__th.sortable {
position: relative;
padding-right: 24px;
cursor: pointer;
}
.table__th.sortable::after,
.table__th.sortable::before {
content: '';
position: absolute;
top: 50%;
right: 4px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(255, 255, 255, 0.4);
}
.table__th.sortable::before {
/* 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 */
transform: translateY(150%) scale(1, -1);
transform-origin: top;
}
.table__th.sortable::after {
transform: translateY(-150%);
}
.table__th.sortable:hover::before,
.table__th.sortable:hover::after {
border-bottom-color: rgba(255, 255, 255, 0.7);
}
.table__th.sorted-asc::before,
.table__th.sorted-desc::after {
border-bottom-color: white !important;
}