_{MsgRegistered}
_{courseDescription}
diff --git a/templates/widgets/course-teaser/course-teaser.julius b/templates/widgets/course-teaser/course-teaser.julius
index 6350e0743..14d4436ab 100644
--- a/templates/widgets/course-teaser/course-teaser.julius
+++ b/templates/widgets/course-teaser/course-teaser.julius
@@ -1,13 +1,25 @@
var COURSE_TEASER_EXPANDED_CLASS = 'course--expanded';
-var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser';
+var COURSE_TEASER_CHEVRON_CLASS = 'course-chevron';
document.addEventListener('DOMContentLoaded', function() {
var courseTeaserId = #{String courseId};
var courseTeaser = document.querySelector('#course-' + courseTeaserId);
- var courseTeaserChevron = courseTeaser.querySelector('.' + COURSE_TEASER_CHEVRON_CLASS);
- courseTeaserChevron.addEventListener('click', function(event) {
- event.preventDefault();
- courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
+ courseTeaser.addEventListener('click', function(event) {
+ var isLink = event.target.tagName.toLowerCase() === 'a';
+ var isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS);
+ var isExpanded = courseTeaser.classList.contains(COURSE_TEASER_EXPANDED_CLASS);
+
+ if ((!isExpanded && !isLink) || isChevron) {
+ courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
+ }
+ });
+
+ courseTeaser.addEventListener('keydown', function(event) {
+ var eventKey = event.key;
+ if (eventKey === ' ' || eventKey === 'Enter') {
+ event.preventDefault();
+ courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
+ }
});
});
diff --git a/templates/widgets/course-teaser/course-teaser.lucius b/templates/widgets/course-teaser/course-teaser.lucius
index 5ae58c8e3..08eb279cf 100644
--- a/templates/widgets/course-teaser/course-teaser.lucius
+++ b/templates/widgets/course-teaser/course-teaser.lucius
@@ -6,7 +6,7 @@
.course {
display: grid;
grid-gap: 5px 7px;
- grid-template-columns: 25px 60px 1fr 100px;
+ grid-template-columns: 25px 60px 1fr 40px;
padding: 10px;
font-size: 1.4rem;
background-color: var(--course-bg-color);
@@ -27,13 +27,14 @@
cursor: pointer;
padding: 10px;
grid-column: 4;
- grid-row: 1/3;
+ grid-row: 1;
justify-self: center;
align-self: center;
&::before {
content: '';
display: block;
+ margin-top: -8px;
border-width: 0 3px 3px 0;
width: 8px;
height: 8px;
@@ -65,24 +66,21 @@
// title
.course-title {
grid-column: 3;
+ grid-row: 1;
font-size: 1.6rem;
- align-self: flex-end;
+ align-self: baseline;
}
// registration
.course-registration {
- grid-column: 4;
- grid-row: 3/5;
- justify-self: center;
- align-self: flex-end;
+ grid-column: 3;
+ grid-row: 1;
+ justify-self: end;
+ align-self: baseline;
font-size: 16px;
color: var(--color-fontsec);
}
-.course-registration__item {
- display: none;
-}
-
// school
.course-school-label {
grid-column: 3;
@@ -120,26 +118,10 @@
// registered courses
.course--registered {
- .course-registration__registered {
- display: block;
- }
-
- .course-registration__deregister {
- display: none;
- }
-
- &:hover {
-
- .course-registration__register,
- .course-registration__registered {
- display: none;
- }
-
- .course-registration__deregister {
+ .course-registration {
display: block;
}
}
-}
// expanded courses
.course--expanded {
@@ -153,15 +135,7 @@
.course-school-value,
.course-duedate-label,
.course-duedate-value,
- .course-registration,
- .course-registration__register,
.course-description {
display: block;
}
-
- &.course--registered {
- .course-registration__register {
- display: none;
- }
- }
}