fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated css namespace and styles for courese-teasers

Browse Source
This commit is contained in:
Felix Hamann 2019-04-12 23:33:02 +02:00
parent c98acacfec
commit d08c03c477
2 changed files with 67 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
templates/widgets/course-teaser/course-teaser.hamlet
View File

@ -1,13 +1,13 @@
<div .course :isRegistered:.course--registered #course-#{courseId} tabindex='1'>
<div .course-chevron>
<div .course-shorthand>_{courseShorthand}
<div .course-title>
<div .course-teaser :isRegistered:.course-teaser--registered #course-#{courseId} tabindex='1'>
<div .course-teaser__chevron>
<div .course-teaser__shorthand>_{courseShorthand}
<div .course-teaser__title>
<a href=@{AdminTestR}>_{courseTitle}
<div .course-registration>_{MsgRegistered}
<div .course-lecturer-label>_{MsgLecturerFor}
<div .course-lecturer-value>_{courseLecturer}
<div .course-duedate-label>_{MsgRegisterTo}
<div .course-duedate-value>_{courseRegisterTo}
<div .course-school-label>_{MsgCourseSchool}
<div .course-school-value>_{courseSchoolName}
<div .course-description>_{courseDescription}
<div .course-teaser__registration>_{MsgRegistered}
<div .course-teaser__lecturer-label>_{MsgLecturerFor}
<div .course-teaser__lecturer-value>_{courseLecturer}
<div .course-teaser__duedate-label>_{MsgRegisterTo}
<div .course-teaser__duedate-value>_{courseRegisterTo}
<div .course-teaser__school-label>_{MsgCourseSchool}
<div .course-teaser__school-value>_{courseSchoolName}
<div .course-teaser__description>_{courseDescription}

109
templates/widgets/course-teaser/course-teaser.lucius
View File

@ -1,14 +1,16 @@
:root {
--color-grey-light: #efefef;
--color-grey-lighter: #f5f5f5;
--color-fontsec: #5b5861;
--course-bg-color: var(--color-grey-lighter);
--course-expanded-bg-color: var(--color-grey-light);
}
.course {
.course-teaser {
display: grid;
grid-gap: 5px 7px;
grid-template-columns: 25px 60px 1fr 40px;
grid-template-columns: 120px 1fr 100px;
padding: 10px;
font-size: 1.4rem;
background-color: var(--course-bg-color);
transition: background-color .1s ease-out;
cursor: pointer;
@ -17,16 +19,16 @@
background-color: var(--course-expanded-bg-color);
}
+ .course {
+ .course-teaser {
margin-top: 10px;
}
}
// chevron
.course-chevron {
/* chevron */
.course-teaser__chevron {
cursor: pointer;
padding: 10px;
grid-column: 4;
grid-column: 3;
grid-row: 1;
justify-self: center;
align-self: center;
@ -46,96 +48,95 @@
}
// semester
.course-semester {
grid-column: 2;
font-size: 1.8rem;
/* semester */
.course-teaser__semester {
grid-column: 1;
font-size: 1.2rem;
align-self: flex-end;
color: var(--color-fontsec);
color: white;
}
// shorthand
.course-shorthand {
grid-column: 1/3;
font-size: 1.8rem;
/* shorthand */
.course-teaser__shorthand {
grid-column: 1;
justify-self: end;
font-weight: bold;
font-size: 1.2rem;
font-weight: 600;
}
// title
.course-title {
grid-column: 3;
/* title */
.course-teaser__title {
grid-column: 2;
grid-row: 1;
font-size: 1.6rem;
font-size: 1.2rem;
align-self: baseline;
}
// registration
.course-registration {
grid-column: 3;
/* registration */
.course-teaser__registration {
grid-column: 2;
grid-row: 1;
justify-self: end;
align-self: baseline;
font-size: 16px;
color: var(--color-fontsec);
}
// school
.course-school-label {
grid-column: 3;
font-size: 1.4rem;
/* school */
.course-teaser__school-label {
grid-column: 2;
font-size: 0.9rem;
align-self: flex-end;
color: var(--color-fontsec);
}
// description
.course-description {
grid-column-start: 3;
/* description */
.course-teaser__description {
grid-column: 2;
color: var(--color-fontsec);
}
// subtitle
.course-lecturer-label,
.course-duedate-label,
.course-school-label {
grid-column: 1/3;
/* subtitle */
.course-teaser__lecturer-label,
.course-teaser__duedate-label,
.course-teaser__school-label {
grid-column: 1;
justify-self: end;
color: var(--color-fontsec);
font-style: italic;
}
// hidden in closed state
.course-school-label,
.course-school-value,
.course-duedate-label,
.course-duedate-value,
.course-description,
.course-registration {
/* hidden in closed state */
.course-teaser__school-label,
.course-teaser__school-value,
.course-teaser__duedate-label,
.course-teaser__duedate-value,
.course-teaser__description,
.course-teaser__registration {
display: none;
}
// registered courses
.course--registered {
/* registered courses */
.course-teaser--registered {
.course-registration {
.course-teaser__registration {
display: block;
}
}
// expanded courses
.course--expanded {
/* expanded courses */
.course-teaser--expanded {
max-height: 1000px;
.course-chevron::before {
.course-teaser__chevron::before {
transform: translateY(7px) rotate(225deg);
}
.course-school-label,
.course-school-value,
.course-duedate-label,
.course-duedate-value,
.course-description {
.course-teaser__school-label,
.course-teaser__school-value,
.course-teaser__duedate-label,
.course-teaser__duedate-value,
.course-teaser__description {
display: block;
}
}