Merge branch 'course-teaser' of gitlab.cip.ifi.lmu.de:jost/UniWorX into course-teaser

templates/widgets/course-teaser/course-teaser.hamlet

@@ -1,16 +1,13 @@
-<div .course :isRegistered:.course--registered #course-#{courseId}>
+<div .course :isRegistered:.course--registered #course-#{courseId} tabindex='1'>
   <div .course-chevron>
   <div .course-shorthand>_{courseShorthand}
   <div .course-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-registration>
-    <a .course-registration__register course-registration__item button href=@{AdminTestR}>_{MsgBtnRegister}
-    <a .course-registration__deregister course-registration__item href=@{AdminTestR}>_{MsgBtnDeregister}
-    <span .course-registration__registered course-registration__item>_{MsgRegistered}
   <div .course-description>_{courseDescription}

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) {
+  courseTeaser.addEventListener('click', function(event) {
-    event.preventDefault();
+    var isLink = event.target.tagName.toLowerCase() === 'a';
-    courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
+    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);
+    }
   });
 });

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-column: 3;
-  grid-row: 3/5;
+  grid-row: 1;
-  justify-self: center;
+  justify-self: end;
-  align-self: flex-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 {
+  .course-registration {
-    display: block;
-  }
-
-  .course-registration__deregister {
-    display: none;
-  }
-
-  &:hover {
-
-    .course-registration__register,
-    .course-registration__registered {
-      display: none;
-    }
-
-    .course-registration__deregister {
       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;
-    }
-  }
 }