style(course-teaser): hamlet and lucius tweaks

This commit is contained in:
Sarah Vaupel 2019-07-24 16:18:02 +02:00
parent f742450912
commit 973a6f4d04
4 changed files with 43 additions and 36 deletions

View File

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

View File

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

View File

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

View File

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