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 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__td, .table__th { */ font-size: 16px;
td, th { color: #808080;
padding-top: 14px; line-height: 1.4;
padding-bottom: 10px; vertical-align: top;
padding-left: 10px; }
padding-right: 10px;
max-width: 300px;
}
/* .table__td { */ .table__th {
td { background-color: var(--color-dark);
font-size: 16px; position: relative;
color: #808080; font-size: 16px;
line-height: 1.4; color: #fff;
vertical-align: top; line-height: 1.4;
} padding-top: 10px;
padding-bottom: 10px;
/* .table__th { */ font-weight: bold;
th { text-align: left;
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) { @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;
} }

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

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

82
templates/table/colonnade.lucius
View File

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