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

Merge branch 'feat/pagination' of gitlab.cip.ifi.lmu.de:jost/UniWorX into feat/pagination

Browse Source
This commit is contained in:
Gregor Kleen 2018-06-30 21:16:22 +02:00
commit 850164d2b4
7 changed files with 106 additions and 79 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;
}

1
templates/widgets/form.hamlet
View File

@ -7,5 +7,4 @@ $case formLayout
$if not (Blaze.null $ fvLabel view)
<label .form-group__label for=#{fvId view}>#{fvLabel view}
<div .form-group__input>
$# FIXME: file-input does not have `required` attribute, although set on form-group
^{fvInput view}

37
templates/widgets/form.julius
View File

@ -28,17 +28,52 @@
}
}
};
window.utils.interactiveFieldset = function(form, fieldSets) {
var fields = fieldSets.map(function(fs) {
return {
fieldSet: fs,
condId: fs.dataset.conditionalId,
condValue: fs.dataset.conditionalValue,
condEl: form.querySelector('#' + fs.dataset.conditionalId),
};
}).filter(function(field) {
return !!field.condEl;
});
function updateFields() {
fields.forEach(function(field) {
field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
});
}
function addEventListeners() {
fields.forEach(function(field) {
field.condEl.addEventListener('input', updateFields)
});
}
if (fieldSets.length) {
addEventListeners();
updateFields();
}
};
})();
document.addEventListener('DOMContentLoaded', function() {
// auto reactiveButton submit-buttons with required fields
var forms = document.querySelectorAll('form');
Array.from(forms).forEach(function(form) {
// auto reactiveButton submit-buttons with required fields
var submitBtn = form.querySelector('[type=submit]');
if (submitBtn) {
window.utils.reactiveButton(form, submitBtn, validateForm);
}
// auto conditonal fieldsets
var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]'));
window.utils.interactiveFieldset(form, fieldSets);
});
function validateForm(inputs) {

3
templates/widgets/form.lucius
View File

@ -0,0 +1,3 @@
.hidden {
display: none;
}