fraport/fradrive-old
fraport/fradrive-old
Archived
3
1
Fork 0
Code Issues 65 Pull Requests 5 Actions Packages Projects Releases 197 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-teaser :isRegistered:.course-teaser--registered #course-#{courseId} tabindex='1'>
<div .course-chevron> <div .course-teaser__chevron>
<div .course-shorthand>_{courseShorthand} <div .course-teaser__shorthand>_{courseShorthand}
<div .course-title> <div .course-teaser__title>
<a href=@{AdminTestR}>_{courseTitle} <a href=@{AdminTestR}>_{courseTitle}
<div .course-registration>_{MsgRegistered} <div .course-teaser__registration>_{MsgRegistered}
<div .course-lecturer-label>_{MsgLecturerFor} <div .course-teaser__lecturer-label>_{MsgLecturerFor}
<div .course-lecturer-value>_{courseLecturer} <div .course-teaser__lecturer-value>_{courseLecturer}
<div .course-duedate-label>_{MsgRegisterTo} <div .course-teaser__duedate-label>_{MsgRegisterTo}
<div .course-duedate-value>_{courseRegisterTo} <div .course-teaser__duedate-value>_{courseRegisterTo}
<div .course-school-label>_{MsgCourseSchool} <div .course-teaser__school-label>_{MsgCourseSchool}
<div .course-school-value>_{courseSchoolName} <div .course-teaser__school-value>_{courseSchoolName}
<div .course-description>_{courseDescription} <div .course-teaser__description>_{courseDescription}

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

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