Update layout and styling of timeline page

Note: We're going to be using CSS Grids for the timeline instead of
tables. This drastically simplifies the placing of elements in the
timeline.

src/components/pages/Timeline/index.tsx

@@ -25,78 +25,39 @@ class Timeline extends React.Component<TimelineProps, {}> {
       <>
         <div className={styles.timelineContainer}>
           <MyBreadcrumbs />
-          <div className={styles.timeline}>
-          <Table className={styles.timelineTable} bordered striped hover>
-            <thead>
-              <tr className={styles.tableRow}>
-                <th className={styles.tableHeading}>
-                  <TermSwitcher />
-                </th>
-                <th className={styles.tableWeekRow}>
-                {[...Array(12)].map((e, i) => {
-                  return (
-                    <div className={styles.weekHeading}>
-                      <WeekHeading />
-                    </div>
-                  );
-                })}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th className={styles.moduleHeading}>
-                  <ModuleHeading
-                    moduleCode="CO112"
-                    title="Introduction to Computer Systems"
-                  />
-                </th>
-                <td className={styles.rowContent}>
-                {[...Array(12)].map((e, i) => {
-                  return (
-                    <div className={styles.dummy}>
-                      some text
-                    </div>
-                  );
-                })}
-                </td>
-              </tr>
-              <tr>
-                <th className={styles.moduleHeading}>
-                  <ModuleHeading
-                    moduleCode="CO120.1"
-                    title="Programming I (Haskell)"
-                  />
-                </th>
-                <td className={styles.rowContent}>
-                {[...Array(12)].map((e, i) => {
-                  return (
-                    <div className={styles.dummy}>
-                      some text
-                    </div>
-                  );
-                })}
-                </td>
-              </tr>
-              <tr>
-                <th className={styles.moduleHeading}>
-                  <ModuleHeading
-                    moduleCode="CO120.2"
-                    title="Programming II (Java)"
-                  />
-                </th>
-                <td className={styles.rowContent}>
-                {[...Array(12)].map((e, i) => {
-                  return (
-                    <div className={styles.dummy}>
-                      some text
-                    </div>
-                  );
-                })}
-                </td>
-              </tr>
-            </tbody>
-          </Table>
+          <div className={styles.timelineGrid}>
+            <div className={styles.timelineTermSwitcher}>
+              <TermSwitcher />
+            </div>
+            <div className={styles.timelineWeekRow}>
+              {[...Array(12)].map((e, i) => {
+                return (
+                  <div className={styles.weekHeading}>
+                    <WeekHeading />
+                  </div>
+                );
+              })}
+            </div>
+            <div className={styles.timelineModuleColumn}>
+              <div className={styles.moduleHeading}>
+                <ModuleHeading
+                  moduleCode="CO112"
+                  title="Introduction to Computer Systems"
+                />
+              </div>
+              <div className={styles.moduleHeading}>
+                <ModuleHeading
+                  moduleCode="CO120.1"
+                  title="Programming I (Haskell)"
+                />
+              </div>
+              <div className={styles.moduleHeading}>
+                <ModuleHeading
+                  moduleCode="CO120.2"
+                  title="Programming II (Java)"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </>

src/components/pages/Timeline/style.module.scss

 .timelineContainer {
-	margin-top: 1.875rem;
-	margin-left: 1.875rem;
+  margin-top: 1.875rem;
+  margin-left: 1.875rem;
   margin-right: 1.875rem;
 }
 
-.tableHeading {
-  left: 0;
-  top: 0;
-  z-index: 1;
-  position: -webkit-sticky; /* for Safari */
-  position: sticky;
-  background-color: var(--background-color);
-}
-
-.weekHeading:not(:last-child) {
-  margin-right: 0.625rem;
+.timelineGrid {
+  display: grid;
+  grid-template-areas: "switcher weeks" "modules .";
+  grid-template-rows: auto;
+  row-gap: 0.625rem;
+  overflow: scroll;
+  margin-bottom: 1.25rem;
+  margin-left: -0.625rem;
+  grid-template-columns: 16.875rem auto;
 }
 
-.moduleHeading {
-  position: -webkit-sticky; /* for Safari */
-  position: sticky;
+.timelineTermSwitcher {
+  grid-area: switcher;
+  top: 0;
   left: 0;
-  background-color: var(--background-color);
-}
-
-.timeline {
-  overflow: scroll;
-  height: 400px;
+  position: sticky;
+  z-index: 1;
+  background: var(--background-color);
+  padding-right: 1.25rem;
+  padding-left: 0.625rem;
+  box-sizing: border-box;
 }
 
-.dummy {
-  color: var(--primary-text-color);
+.timelineTermSwitcher > * {
+  width: 100%;
 }
 
-.tableWeekRow {
-  display: flex;
+.timelineWeekRow {
+  grid-area: weeks;
+  display: grid;
+  grid-auto-flow: row; 
+  grid-template-columns: repeat(12, 15rem);
+  grid-gap: 0.625rem;
   top: 0;
-  position: -webkit-sticky; /* for Safari */
   position: sticky;
-  background-color: var(--background-color);
-  align-items: stretch;
 }
 
-.rowContent {
-  display: flex;
+.timelineModuleColumn {
+  grid-area: modules;
+  display: grid;
+  grid-gap: 0.625rem;
+  left: 0;
+  position: sticky;
+  padding-right: 1.25rem;
+  box-sizing: border-box;
+  padding-left: 0.625rem;
 }