feat(course-teaser): display sorting "pills" for course teasers

src/Handler/Utils/Table/Pagination.hs

@@ -1033,38 +1033,37 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
     table' = let
         columnCount :: Int64
         columnCount = olength64 $ getColonnade dbtColonnade
-      in case dbsTemplate of
-      DBSTCourse c l r s -> do
-        wRows <- forM rows $ \row' -> let
-          Course{..}       = row' ^. c . _entityVal
-          lecturerUsers    = row' ^. l
-          courseLecturers  = userSurname . entityVal <$> lecturerUsers
-          isRegistered     = row' ^. r
-          courseSchoolName = schoolName $ row' ^. s . _entityVal
-          courseSemester   = (termToText . unTermKey) courseTerm
-          in return $(widgetFile "table/course/course-teaser")
-
-        return $(widgetFile "table/course/colonnade")
-      DBSTDefault -> do
-        let
-          genHeaders SortableP{..} = forM (toSortable . oneColonnadeHead <$> getColonnade dbtColonnade) $ \Sortable{..} -> do
-            widget <- sortableContent ^. cellContents
-            let
-              directions = [dir | SortingSetting k dir <- psSorting, Just k == sortableKey ]
-              isSortable = isJust sortableKey
-              isSorted = (`elem` directions)
-              attrs = sortableContent ^. cellAttrs
-              piSorting' = [ sSet | sSet <- fromMaybe [] piSorting, Just (sortKey sSet) /= sortableKey ]
-            return $(widgetFile "table/cell/header")
 
+        genHeaders SortableP{..} = forM (toSortable . oneColonnadeHead <$> getColonnade dbtColonnade) $ \Sortable{..} -> do
+          widget <- sortableContent ^. cellContents
+          let
+            directions = [dir | SortingSetting k dir <- psSorting, Just k == sortableKey ]
+            isSortable = isJust sortableKey
+            isSorted = (`elem` directions)
+            attrs = sortableContent ^. cellAttrs
+            piSorting' = [ sSet | sSet <- fromMaybe [] piSorting, Just (sortKey sSet) /= sortableKey ]
+          case dbsTemplate of
+            DBSTCourse _ _ _ _ -> return $(widgetFile "table/course/header")
+            DBSTDefault        -> return $(widgetFile "table/cell/header")
+      in do
         wHeaders <- maybe (return Nothing) (fmap Just . genHeaders) pSortable
-
+        case dbsTemplate of
-        wRows <- forM rows $ \row' -> forM (oneColonnadeEncode <$> getColonnade dbtColonnade) $ \(($ row') -> cell') -> do
+          DBSTCourse c l r s -> do
-          widget <- cell' ^. cellContents
+            wRows <- forM rows $ \row' -> let
-          let attrs = cell' ^. cellAttrs
+              Course{..}       = row' ^. c . _entityVal
-          return $(widgetFile "table/cell/body")
+              lecturerUsers    = row' ^. l
-
+              courseLecturers  = userSurname . entityVal <$> lecturerUsers
-        return $(widgetFile "table/colonnade")
+              isRegistered     = row' ^. r
+              courseSchoolName = schoolName $ row' ^. s . _entityVal
+              courseSemester   = (termToText . unTermKey) courseTerm
+              in return $(widgetFile "table/course/course-teaser")
+            return $(widgetFile "table/course/colonnade")
+          DBSTDefault -> do
+            wRows <- forM rows $ \row' -> forM (oneColonnadeEncode <$> getColonnade dbtColonnade) $ \(($ row') -> cell') -> do
+              widget <- cell' ^. cellContents
+              let attrs = cell' ^. cellAttrs
+              return $(widgetFile "table/cell/body")
+            return $(widgetFile "table/colonnade")
 
     pageCount
       | PagesizeLimit l <- psLimit

templates/default-layout.lucius

@@ -649,3 +649,41 @@ section {
 .form--inline {
   display: inline-block;
 }
+
+/*
+course teaser: header styling
+TODO: move somewhere else?
+*/
+.course-teaser-header {
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  a {
+    text-decoration: none;
+  }
+
+  .course-header-link {
+    color: white;
+    font-weight: bold;
+  
+    &:hover {
+      color: inherit;
+    }
+  
+    .course-header {
+      background-color: var(--color-dark);
+      position: relative;
+      font-size: 16px;
+      color: #fff;
+      line-height: 1.4;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      padding-left: 5px;
+      padding-right: 25px;
+      font-weight: bold;
+      text-align: left;
+      border-radius: 15px;
+      margin-right: 10px;
+    }
+  }
+}

templates/table/course/colonnade.hamlet

@@ -1,5 +1,10 @@
 $newline never
 <div .scrolltable>
+  $maybe wHeaders' <- wHeaders
+    <div .course-teaser-header>
+      $forall widget <- wHeaders'
+        ^{widget}
+  $nothing
   $if null wRows && (dbsEmptyStyle == DBESHeading)
     <p>_{dbsEmptyMessage}
   $else

templates/table/course/colonnade.lucius

@@ -9,3 +9,37 @@
 .scrolltable {
   box-shadow: none!important;
 }
+
+.course-header.sortable::after,
+.course-header.sortable::before {
+  content: '';
+  position: absolute;
+  right: 5px;
+  top: 20px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid rgba(255, 255, 255, 0.4);
+}
+
+.course-header.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;
+}
+
+.course-header.sortable::after {
+  transform: translateY(-150%);
+}
+
+.course-header.sortable:hover::before,
+.course-header.sortable:hover::after {
+  border-bottom-color: rgba(255, 255, 255, 0.7);
+}
+
+.course-header.sorted-asc::before,
+.course-header.sorted-desc::after {
+  border-bottom-color: white !important;
+}

templates/table/course/header.hamlet

@@ -0,0 +1,13 @@
+$newline never
+
+$maybe flag <- sortableKey
+  $case directions
+    $of [SortAsc]
+      <a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortDesc : piSorting'))}>
+        <span .course-header *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
+          ^{widget}
+    $of _
+      <a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortAsc : piSorting'))}>
+        <span .course-header *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
+          ^{widget}
+$nothing