Minor timetable fixes (#495)

* Reduce amount of sentinel nodes * Stable sort lessons Prevents "swapping" of lessons of same start time * Prevent pixel height increase when adding lessons * Disable pointer for fixed lessons
nusmodifications · Dec 9, 2017 · de2c367 · de2c367
1 parent 5601f48
commit de2c367
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/v3/src/js/utils/timetables.js b/v3/src/js/utils/timetables.js
@@ -135,7 +135,10 @@ export function arrangeLessonsWithinDay(lessons: Array<Lesson>): TimetableDayArr
   if (_.isEmpty(lessons)) {
     return rows;
   }
-  const sortedLessons = _.sortBy(lessons, lesson => lesson.StartTime);
+  const sortedLessons = lessons.sort((a, b) => {
+    const timeDiff = a.StartTime.localeCompare(b.StartTime);
+    return timeDiff !== 0 ? timeDiff : a.ClassNo.localeCompare(b.ClassNo);
+  });
   sortedLessons.forEach((lesson: Lesson) => {
     for (let i = 0, length = rows.length; i < length; i++) {
       const rowLessons: Array<Lesson> = rows[i];

diff --git a/v3/src/js/views/timetable/TimetableCell.jsx b/v3/src/js/views/timetable/TimetableCell.jsx
@@ -18,15 +18,14 @@ function TimetableCell(props: Props) {
   const lesson = props.lesson;
   return (
     <button
-      className={classnames(styles.cell, {
+      // $FlowFixMe When object spread type actually works
+      className={classnames(styles.cell, `color-${lesson.colorIndex}`, {
         // $FlowFixMe When object spread type actually works
         [styles.cellIsModifiable]: lesson.isModifiable,
         // $FlowFixMe When object spread type actually works
         [styles.cellIsAvailable]: lesson.isAvailable,
         // $FlowFixMe When object spread type actually works
         [styles.cellIsActive]: lesson.isActive,
-        // $FlowFixMe When object spread type actually works
-        [`color-${lesson.colorIndex}`]: true,
       })}
       onClick={(event) => {
         event.stopPropagation();
@@ -42,8 +41,7 @@ function TimetableCell(props: Props) {
           {LESSON_TYPE_ABBREV[lesson.LessonType]} [{lesson.ClassNo}]
         </div>
         <div>{lesson.Venue}</div>
-        {lesson.WeekText !== 'Every Week' &&
-          <div>{lesson.WeekText}</div>}
+        {lesson.WeekText !== 'Every Week' && <div>{lesson.WeekText}</div>}
       </div>
     </button>
   );

diff --git a/v3/src/js/views/timetable/TimetableCell.scss b/v3/src/js/views/timetable/TimetableCell.scss
@@ -15,6 +15,7 @@ $cell-border-radius: 8px;
   text-align: left;
   border-width: 0 0 0.2rem;
   border-style: solid;
+  pointer-events: none;
   transition: background-color $desktop-entering-duration $material-deceleration-curve;
   animation-duration: $desktop-entering-duration;
 

diff --git a/v3/src/js/views/timetable/TimetableTimings.jsx b/v3/src/js/views/timetable/TimetableTimings.jsx
@@ -11,20 +11,21 @@ type Props = {
 };
 
 function TimetableTimings(props: Props) {
-  const range = _.range(props.startingIndex, props.endingIndex + 1);
+  const range = _.range(props.startingIndex, props.endingIndex);
   return (
     <div className={styles.timings}>
       {range.map((i) => {
         const time = convertIndexToTime(i);
-        if (i % 2 === 0 && i !== props.endingIndex) {
+        if (i % 2 === 0) {
           return (
             <time key={time} className={styles.time}>
               {time}
             </time>
           );
         }
-        return <span key={time} />;
+        return null;
       })}
+      <span />
     </div>
   );
 }

diff --git a/v3/src/js/views/timetable/_variables.scss b/v3/src/js/views/timetable/_variables.scss
@@ -7,5 +7,5 @@ $timetable-day-h-size: 3.5rem;
 $timetable-day-h-size-sm: 1.5rem;
 $timetable-day-v-size: 2.5rem;
 
-$timetable-row-height: 3.5rem;
+$timetable-row-height: 3.6rem;
 $timetable-col-width: 4rem;