From 16e5e8ea6fa1f32485256d59ed136fb2a6c57d25 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 23 Mar 2019 22:39:56 +0100 Subject: [PATCH 1/3] remove register button from course teaser --- .../course-teaser/course-teaser.hamlet | 5 +-- .../course-teaser/course-teaser.lucius | 45 +++++-------------- 2 files changed, 11 insertions(+), 39 deletions(-) diff --git a/templates/widgets/course-teaser/course-teaser.hamlet b/templates/widgets/course-teaser/course-teaser.hamlet index 76f8cdb9f..2640a8ca4 100644 --- a/templates/widgets/course-teaser/course-teaser.hamlet +++ b/templates/widgets/course-teaser/course-teaser.hamlet @@ -3,14 +3,11 @@
_{courseShorthand}
_{courseTitle} +
_{MsgRegistered}
_{MsgLecturerFor}
_{courseLecturer}
_{MsgRegisterTo}
_{courseRegisterTo}
_{MsgCourseSchool}
_{courseSchoolName} -
- _{MsgBtnRegister} - _{MsgBtnDeregister} - _{MsgRegistered}
_{courseDescription} diff --git a/templates/widgets/course-teaser/course-teaser.lucius b/templates/widgets/course-teaser/course-teaser.lucius index 5ae58c8e3..c7e280f25 100644 --- a/templates/widgets/course-teaser/course-teaser.lucius +++ b/templates/widgets/course-teaser/course-teaser.lucius @@ -1,4 +1,5 @@ :root { + --color-fontsec: #5b5861; --course-bg-color: var(--color-grey-lighter); --course-expanded-bg-color: var(--color-grey-light); } @@ -27,13 +28,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 +67,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 +119,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 +136,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; - } - } } From 567bd29fd019fb4d1c42a0045a29dda5746d324e Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 23 Mar 2019 22:56:55 +0100 Subject: [PATCH 2/3] make course teasers keyboard-accessible --- templates/widgets/course-teaser/course-teaser.hamlet | 2 +- templates/widgets/course-teaser/course-teaser.julius | 10 +++++++++- templates/widgets/course-teaser/course-teaser.lucius | 3 +-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/templates/widgets/course-teaser/course-teaser.hamlet b/templates/widgets/course-teaser/course-teaser.hamlet index 2640a8ca4..33baf56ce 100644 --- a/templates/widgets/course-teaser/course-teaser.hamlet +++ b/templates/widgets/course-teaser/course-teaser.hamlet @@ -1,4 +1,4 @@ -
+
_{courseShorthand}
diff --git a/templates/widgets/course-teaser/course-teaser.julius b/templates/widgets/course-teaser/course-teaser.julius index 6350e0743..0d757de09 100644 --- a/templates/widgets/course-teaser/course-teaser.julius +++ b/templates/widgets/course-teaser/course-teaser.julius @@ -1,5 +1,5 @@ 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}; @@ -10,4 +10,12 @@ document.addEventListener('DOMContentLoaded', function() { event.preventDefault(); 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 c7e280f25..08eb279cf 100644 --- a/templates/widgets/course-teaser/course-teaser.lucius +++ b/templates/widgets/course-teaser/course-teaser.lucius @@ -1,5 +1,4 @@ :root { - --color-fontsec: #5b5861; --course-bg-color: var(--color-grey-lighter); --course-expanded-bg-color: var(--color-grey-light); } @@ -7,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); From b25e6ea74fd3d0a657240262bae16320802a932e Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 23 Mar 2019 23:13:16 +0100 Subject: [PATCH 3/3] open course teasers via click anywhere on collapsed teaser --- templates/widgets/course-teaser/course-teaser.julius | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/templates/widgets/course-teaser/course-teaser.julius b/templates/widgets/course-teaser/course-teaser.julius index 0d757de09..14d4436ab 100644 --- a/templates/widgets/course-teaser/course-teaser.julius +++ b/templates/widgets/course-teaser/course-teaser.julius @@ -4,11 +4,15 @@ 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) {