style(course-teaser): use grid-areas for layout

frontend/src/utils/course-teaser/course-teaser.js

@@ -7,7 +7,7 @@ var COURSE_TEASER_EXPANDED_CLASS = 'course-teaser__expanded';
 var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser__chevron';
 
 @Utility({
-  selector: '[uw-course-teaser]:not(.course-teaser__disabled)',
+  selector: '[uw-course-teaser]:not(.course-teaser__not-expandable)',
 })
 export class CourseTeaser {
 
@@ -28,7 +28,7 @@ export class CourseTeaser {
     var isLink = event.target.tagName.toLowerCase() === 'a';
     var isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS);
     var isExpanded = this._element.classList.contains(COURSE_TEASER_EXPANDED_CLASS);
-  
+
     if ((!isExpanded && !isLink) || isChevron) {
       this._element.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
     }

frontend/src/utils/course-teaser/course-teaser.scss

@@ -1,17 +1,21 @@
 [uw-course-teaser] {
   --course-border-color: var(--color-grey);
   --course-padding-hori: 10px;
-  --course-padding-vert: 16px;
+  --course-padding-vert: 12px;
 
   display: grid;
   grid-gap: 5px 7px;
-  grid-template-columns: 50px 120px 1fr;
+  grid-template-columns: 140px 1fr 80px;
+  grid-template-areas:
+    'smstr      school  chevron'
+    'shrthnd    title   chevron'
+    '.          rgstrd  .      '
+    'tutor      name    .      '
+    'duedate    date    .      '
+    'dscrptnlbl dscrptn .      ';
   padding: var(--course-padding-vert) var(--course-padding-hori);
   transition: background-color .1s ease-out;
-
+  cursor: pointer;
-  &:not(.course-teaser__disabled) {
-    cursor: pointer;
-  }
 
   &:hover {
     background-color: var(--course-bg-color);
@@ -22,37 +26,45 @@
   }
 }
 
-.course-teaser__disabled {
+.course-teaser__not-expandable {
-  opacity: 0.7;
+  cursor: initial;
 }
 
 /* chevron */
 .course-teaser__chevron {
-  cursor: pointer;
+  position: relative;
   padding: 10px;
-  grid-column: 1;
+  grid-area: chevron;
-  grid-row: 2;
   justify-self: center;
   align-self: center;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
 
   &::before {
     content: '';
+    position: absolute;
     display: block;
     margin-top: -8px;
     border-width: 0 3px 3px 0;
     width: 8px;
     height: 8px;
+    top: 50%;
+    left: 50%;
     border-color: var(--color-fontsec);
     border-style: solid;
-    transform: rotate(45deg);
+    transform: rotate(135deg);
     transition: transform .2s ease-out;
   }
+
+  &:hover::before {
+    transform: scale(1.4) rotate(45deg);
+  }
 }
 
 /* semester */
 .course-teaser__semester {
-  grid-column: 2;
+  grid-area: smstr;
-  grid-row: 1;
   justify-self: end;
   font-size: 1.1rem;
   a {
@@ -62,8 +74,7 @@
 
 /* shorthand */
 .course-teaser__shorthand {
-  grid-column: 2;
+  grid-area: shrthnd;
-  grid-row: 2;
   justify-self: end;
   font-size: 1.2rem;
   font-weight: bold;
@@ -72,44 +83,62 @@
 
 /* title */
 .course-teaser__title {
-  grid-column: 3;
+  grid-area: title;
-  grid-row: 2;
   font-size: 1.2rem;
   align-self: baseline;
 }
 
-/* registration */
+ /* registration */
 .course-teaser__registration {
-  grid-column: 4;
+  grid-area: rgstrd;
-  grid-row: 2;
-  justify-self: end;
-  align-self: baseline;
   color: var(--color-fontsec);
+  font-weight: bold;
 }
 
 /* school */
-.course-teaser__school-value {
+.course-teaser__school {
-  grid-column: 3;
+  grid-area: school;
-  grid-row: 1;
   align-self: end;
   a {
     color: var(--color-fontsec);
   }
 }
 
-/* description */
+/* duedate */
-.course-teaser__description {
+.course-teaser__duedate {
-  grid-column: 2 / 4;
+  grid-area: date;
-  max-height: 1000px;
+}
-  overflow: auto;
+
-  /* color: var(--color-fontsec); */
+/* lecturer */
+.course-teaser__lecturer {
+  grid-area: name;
+}
+
+/* description */
+.course-teaser__description {
+  grid-area: dscrptn;
+  max-height: 1000px;
+  overflow: auto;
+}
+
+/* show description only as dots (overflow text-overflow) and only show when expanded. No "hidden fiddling" */
+
+/* labels */
+.course-teaser__lecturer-label {
+  grid-area: tutor;
+}
+
+.course-teaser__duedate-label {
+  grid-area: duedate;
+}
+
+.course-teaser__description-label {
+  grid-area: dscrptnlbl;
 }
 
-/* subtitle */
 .course-teaser__lecturer-label,
-.course-teaser__duedate-label,
+.course-teaser__description-label,
-.course-teaser__school-label {
+.course-teaser__duedate-label {
-  grid-column: 2;
   justify-self: end;
   color: var(--color-fontsec);
   font-style: italic;
@@ -117,6 +146,7 @@
 
 /* hidden in closed state */
 .course-teaser__description,
+.course-teaser__description-label,
 .course-teaser__registration {
   display: none;
 }
@@ -130,16 +160,24 @@
 
 /* expanded courses */
 .course-teaser__expanded {
+  cursor: initial;
 
-  .course-teaser__chevron::before {
+  .course-teaser__chevron {
-    transform: translateY(7px) rotate(225deg);
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &:hover::before {
+      transform: scale(1.4) rotate(135deg);
+    }
   }
 
   .course-teaser__school-label,
-  .course-teaser__school-value,
+  .course-teaser__school,
   .course-teaser__duedate-label,
-  .course-teaser__duedate-value,
+  .course-teaser__duedate,
-  .course-teaser__description {
+  .course-teaser__description,
+  .course-teaser__description-label {
     display: block;
   }
 }

templates/table/course/course-teaser.hamlet

@@ -1,25 +1,28 @@
-<div uw-course-teaser :isRegistered:.course-teaser__registered :is _Nothing courseDescription:.course-teaser__disabled :is _Just courseDescription:tabindex="1">
+<div uw-course-teaser :isRegistered:.course-teaser__registered :is _Nothing courseDescription:.course-teaser__not-expandable :is _Just courseDescription:tabindex="1">
   <div .course-teaser__semester>
     <a href=@{TermCourseListR courseTerm}>_{courseSemester}
-  <div .course-teaser__school-value>
+  <div .course-teaser__school>
     <a href=@{TermSchoolCourseListR courseTerm courseSchool}>_{courseSchoolName}
   <div .course-teaser__shorthand>_{courseShorthand}
   <div .course-teaser__title>
     <a href=@{CourseR courseTerm courseSchool courseShorthand CShowR}>
       _{courseName}
   $if isRegistered
-    <div .course-teaser__registration>_{MsgRegistered}
+    <div .course-teaser__registration>
+      <span>_{MsgRegistered}
+      <i .fas .fa-check>
   $if not $ null courseLecturers
     <div .course-teaser__lecturer-label>
       _{MsgLecturersForN (length courseLecturers)}
-    <div .course-teaser__lecturer-value>
+    <div .course-teaser__lecturer>
       <ul .list--inline .list--comma-separated>
         $forall lecturer <- courseLecturers
           <li>
             #{lecturer}
   $maybe regTo <- courseRegisterTo
     <div .course-teaser__duedate-label>_{MsgRegisterTo}
-    <div .course-teaser__duedate-value>^{formatTimeW SelFormatDateTime regTo}
+    <div .course-teaser__duedate>^{formatTimeW SelFormatDateTime regTo}
   $maybe desc <- courseDescription
     <div .course-teaser__chevron>
+    <div .course-teaser__description-label>_{MsgCourseDescription}
     <div .course-teaser__description>#{desc}