diff --git a/templates/widgets/course-teaser/course-teaser.hamlet b/templates/widgets/course-teaser/course-teaser.hamlet index 76f8cdb9f..33baf56ce 100644 --- a/templates/widgets/course-teaser/course-teaser.hamlet +++ b/templates/widgets/course-teaser/course-teaser.hamlet @@ -1,16 +1,13 @@ -
+
_{courseShorthand}
_{courseTitle} +
_{MsgRegistered}
_{MsgLecturerFor}
_{courseLecturer}
_{MsgRegisterTo}
_{courseRegisterTo}
_{MsgCourseSchool}
_{courseSchoolName} -
- _{MsgBtnRegister} - _{MsgBtnDeregister} - _{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; - } - } }