style(course-teaser): hamlet and lucius tweaks

src/Handler/Course.hs

@@ -226,8 +226,8 @@ makeCourseTable whereClause colChoices psValidator = do
       ]
     , dbtStyle = def
       { dbsFilterLayout = defaultDBSFilterLayout
-      , dbsCellTemplate = DBSTCourse (_dbrOutput . _1) (_dbrOutput . _5) (_dbrOutput . _3)
+      , dbsCellTemplate = DBSTCourse (_dbrOutput . _1) (_dbrOutput . _5) (_dbrOutput . _3) (_dbrOutput . _4)
-      --                             ^ course          ^ lecturer list   ^ isRegistered
+      --                             ^ course          ^ lecturer list   ^ isRegistered    ^ school
       }
     , dbtParams = def
     , dbtIdent = "courses" :: Text

src/Handler/Utils/Table/Pagination.hs

@@ -442,7 +442,8 @@ data DBStyle r = DBStyle
   , dbsCellTemplate :: DBSTemplateMode r
   }
 
-data DBSTemplateMode r = DBSTDefault | DBSTCourse (Lens' r (Entity Course)) (Traversal' r [Entity User]) (Lens' r Bool)
+data DBSTemplateMode r = DBSTDefault
+                       | DBSTCourse (Lens' r (Entity Course)) (Lens' r [Entity User]) (Lens' r Bool) (Lens' r (Entity School))
 
 instance Default (DBStyle r) where
   def = DBStyle
@@ -1030,7 +1031,7 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
 
     table' :: HandlerSite m ~ UniWorX => WriterT x m Widget
     table' = case dbsCellTemplate of
-      DBSTCourse c l r -> do
+      DBSTCourse c l r s -> do
         let
           columnCount :: Int64
           columnCount = olength64 $ getColonnade dbtColonnade
@@ -1040,7 +1041,8 @@ dbTable PSValidator{..} dbtable@DBTable{ dbtIdent = dbtIdent'@(toPathPiece -> db
           lecturerUsers    = row' ^. l
           courseLecturers  = userSurname . entityVal <$> lecturerUsers
           isRegistered     = row' ^. r
-          courseSchoolName = unSchoolKey courseSchool
+          courseSchoolName = schoolName $ row' ^. s . _entityVal
+          courseSemester   = (termToText . unTermKey) courseTerm
           courseId         = tshow cid
           in return $(widgetFile "table/course/course-teaser")
 

templates/table/course/colonnade.lucius

@@ -9,14 +9,14 @@
 .course-teaser {
   display: grid;
   grid-gap: 5px 7px;
-  grid-template-columns: 120px 1fr 100px;
+  grid-template-columns: 50px 120px 1fr;
   padding: 10px;
-  background-color: var(--course-bg-color);
+  /* background-color: var(--course-bg-color); */
   transition: background-color .1s ease-out;
   cursor: pointer;
 
   &:hover {
-    background-color: var(--course-expanded-bg-color);
+    background-color: var(--course-bg-color);
   }
 
   + .course-teaser {
@@ -28,8 +28,8 @@
 .course-teaser__chevron {
   cursor: pointer;
   padding: 10px;
-  grid-column: 3;
+  grid-column: 1;
-  grid-row: 1;
+  grid-row: 2;
   justify-self: center;
   align-self: center;
 
@@ -47,52 +47,56 @@
   }
 }
 
-
 /* semester */
 .course-teaser__semester {
-  grid-column: 1;
+  grid-column: 2;
-  font-size: 1.2rem;
+  grid-row: 1;
-  align-self: flex-end;
+  justify-self: end;
-  color: var(--color-fontsec);
+  font-size: 1.1rem;
-  color: white;
+  a {
+    color: var(--color-fontsec);
+  }
 }
 
 /* shorthand */
 .course-teaser__shorthand {
-  grid-column: 1;
+  grid-column: 2;
+  grid-row: 2;
   justify-self: end;
   font-size: 1.2rem;
-  font-weight: 600;
+  font-weight: bold;
 }
 
 /* title */
 .course-teaser__title {
-  grid-column: 2;
+  grid-column: 3;
-  grid-row: 1;
+  grid-row: 2;
   font-size: 1.2rem;
   align-self: baseline;
 }
 
 /* registration */
 .course-teaser__registration {
-  grid-column: 2;
+  grid-column: 4;
-  grid-row: 1;
+  grid-row: 2;
   justify-self: end;
   align-self: baseline;
   color: var(--color-fontsec);
 }
 
 /* school */
-.course-teaser__school-label {
+.course-teaser__school-value {
-  grid-column: 2;
+  grid-column: 3;
-  font-size: 0.9rem;
+  grid-row: 1;
-  align-self: flex-end;
+  align-self: end;
-  color: var(--color-fontsec);
+  a {
+    color: var(--color-fontsec);
+  }
 }
 
 /* description */
 .course-teaser__description {
-  grid-column: 2;
+  grid-column: 3;
   color: var(--color-fontsec);
 }
 
@@ -100,15 +104,13 @@
 .course-teaser__lecturer-label,
 .course-teaser__duedate-label,
 .course-teaser__school-label {
-  grid-column: 1;
+  grid-column: 2;
   justify-self: end;
   color: var(--color-fontsec);
   font-style: italic;
 }
 
 /* hidden in closed state */
-.course-teaser__school-label,
-.course-teaser__school-value,
 .course-teaser__duedate-label,
 .course-teaser__duedate-value,
 .course-teaser__description,
@@ -118,7 +120,6 @@
 
 /* registered courses */
 .course-teaser__registered {
-
   .course-teaser__registration {
       display: block;
     }

templates/table/course/course-teaser.hamlet

@@ -1,9 +1,15 @@
 <div .course-teaser :isRegistered:.course-teaser__registered #courseteaser-#{courseId} tabindex='1'>
   <div .course-teaser__chevron>
+  <div .course-teaser__semester>
+    <a href=@{TermCourseListR courseTerm}>_{courseSemester}
+  <div .course-teaser__school-value>
+    <a href=@{TermSchoolCourseListR courseTerm courseSchool}>_{courseSchoolName}
   <div .course-teaser__shorthand>_{courseShorthand}
   <div .course-teaser__title>
-    <a href=@{CourseR courseTerm courseSchool courseShorthand CShowR}>_{courseName}
+    <a href=@{CourseR courseTerm courseSchool courseShorthand CShowR}>
-  <div .course-teaser__registration>_{MsgRegistered}
+      _{courseName}
+  $if isRegistered
+    <div .course-teaser__registration>_{MsgRegistered}
   <div .course-teaser__lecturer-label>
     _{MsgLecturersForN (length courseLecturers)}
   <div .course-teaser__lecturer-value>
@@ -15,8 +21,6 @@
     <div .course-teaser__duedate-label>_{MsgRegisterTo}
     <div .course-teaser__duedate-value>^{formatTimeW SelFormatDateTime regTo}
   $nothing
-  <div .course-teaser__school-label>_{MsgCourseSchool}
-  <div .course-teaser__school-value>_{courseSchoolName}
   $maybe desc <- courseDescription
     <div .course-teaser__description>#{desc}
   $nothing