signal to the user that a column is sortable

src/Handler/Utils/Table/Pagination.hs

@@ -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

templates/table/colonnade.lucius

@@ -9,12 +9,11 @@ table th.sorted-desc {
   color: var(--lightbase);
 }
 
-table th.sorted-asc::after,
+table th.sortable::after,
-table th.sorted-desc::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);
 }
 

templates/table/layout.julius

@@ -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?