style(course-teaser): hamlet and lucius tweaks
This commit is contained in:
parent
f742450912
commit
973a6f4d04
@ -226,8 +226,8 @@ makeCourseTable whereClause colChoices psValidator = do
|
||||
]
|
||||
, dbtStyle = def
|
||||
{ dbsFilterLayout = defaultDBSFilterLayout
|
||||
, dbsCellTemplate = DBSTCourse (_dbrOutput . _1) (_dbrOutput . _5) (_dbrOutput . _3)
|
||||
-- ^ course ^ lecturer list ^ isRegistered
|
||||
, dbsCellTemplate = DBSTCourse (_dbrOutput . _1) (_dbrOutput . _5) (_dbrOutput . _3) (_dbrOutput . _4)
|
||||
-- ^ course ^ lecturer list ^ isRegistered ^ school
|
||||
}
|
||||
, dbtParams = def
|
||||
, dbtIdent = "courses" :: Text
|
||||
|
||||
@ -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")
|
||||
|
||||
|
||||
@ -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-row: 1;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
|
||||
@ -47,52 +47,56 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* semester */
|
||||
.course-teaser__semester {
|
||||
grid-column: 1;
|
||||
font-size: 1.2rem;
|
||||
align-self: flex-end;
|
||||
color: var(--color-fontsec);
|
||||
color: white;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
font-size: 1.1rem;
|
||||
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-row: 1;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
font-size: 1.2rem;
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
/* registration */
|
||||
.course-teaser__registration {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
justify-self: end;
|
||||
align-self: baseline;
|
||||
color: var(--color-fontsec);
|
||||
}
|
||||
|
||||
/* school */
|
||||
.course-teaser__school-label {
|
||||
grid-column: 2;
|
||||
font-size: 0.9rem;
|
||||
align-self: flex-end;
|
||||
color: var(--color-fontsec);
|
||||
.course-teaser__school-value {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
align-self: end;
|
||||
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;
|
||||
}
|
||||
@ -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}
|
||||
<div .course-teaser__registration>_{MsgRegistered}
|
||||
<a href=@{CourseR courseTerm courseSchool courseShorthand CShowR}>
|
||||
_{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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user