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

signal to the user that a column is sortable

Browse Source
This commit is contained in:
Felix Hamann 2018-04-12 23:23:35 +02:00
parent 2a1c805d85
commit e0b3f0921a
3 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Handler/Utils/Table/Pagination.hs
View File

@ -163,6 +163,7 @@ dbTable PSValidator{..} DBTable{ dbtIdent = (toPathPiece -> dbtIdent), .. } = do
sortableAttr = foldMap toAttr directions
toAttr SortAsc = Html5.class_ "sorted-asc"
toAttr SortDesc = Html5.class_ "sorted-desc"
-- TODO: add class "sortable" if column is sortable
$(widgetFile "table/layout")
where
tblLayout :: Widget -> Handler Html

15
templates/table/colonnade.lucius
View File

@ -9,12 +9,11 @@ table th.sorted-desc {
color: var(--lightbase);
}
table th.sorted-asc::after,
table th.sorted-desc::after {
table th.sortable::after,
table th.sortable::before {
content: '';
position: absolute;
right: 0;
top: 15px;
width: 0;
height: 0;
transform: translateY(-100%);
@ -22,7 +21,15 @@ table th.sorted-desc::after {
border-right: 8px solid transparent;
}
table th.sorted-asc::after {
table th.sortable::before {
top: 21px;
border-top: 8px solid rgba(0, 0, 0, 0.1);
}
table th.sortable::after {
top: 9px;
border-bottom: 8px solid rgba(0, 0, 0, 0.1);
}
table th.sorted-asc::before {
border-top: 8px solid var(--lightbase);
}

12
templates/table/layout.julius
View File

@ -24,6 +24,7 @@
function clickHandler(event) {
event.preventDefault();
var link = this.querySelector('a');
// abort if there is no link set for this column
if (!link) {
return false;
}
@ -70,6 +71,17 @@
});
}
// TODO: Remove after class "sortable" gets set by backend
(function () {
ths.forEach(function(th) {
var link = th.querySelector('a');
// abort if there is no link set for this column
if (!link) return false;
th.classList.add('sortable');
})
})();
}
// TODO: how to get 'terms' only?