Setup table for timeline view

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

@@ -6,6 +6,7 @@
   transition: transform 0.2s, box-shadow 0.2s;
   border: 1px solid var(--border-color);
 }
+
 .moduleCard:hover {
   transform: scale(1.03);
   text-decoration: none;
@@ -20,18 +21,22 @@
   border-width: 0rem;
   color: var(--primary-text-color);
   font-weight: 500;
+  font-size: 1.125rem;
   text-transform: uppercase;
   text-align: right;
   padding: 0.5rem;
+  padding-bottom: 0rem;
   display: flex;
   justify-content: space-between;
 }
 
 .moduleCard :global(.card-body) {
   padding: 0.5rem;
+  padding-top: 0rem;
+  font-size: 1rem;
   color: var(--primary-text-color);
 }
 
 .moduleCard :global(.card-title) {
   margin-bottom: 0;
-}
\ No newline at end of file
+}

src/components/pages/Timeline/components/TermSwitcher/index.tsx

@@ -14,21 +14,21 @@ const TermSwitcher: React.FC = () => {
                 active={true}
                 variant="secondary"
               >
-                <FontAwesomeIcon icon={faLeaf}/>
+                <FontAwesomeIcon icon={faLeaf} fixedWidth/>
               </Button>
 							<Button
                 className={styles.termSwitch}
                 active={false}
                 variant="secondary"
               >
-                <FontAwesomeIcon icon={faSeedling}/>
+                <FontAwesomeIcon icon={faSeedling} fixedWidth/>
               </Button>
 							<Button
                 className={styles.termSwitch}
                 active={false}
                 variant="secondary"
               >
-                <FontAwesomeIcon icon={faSun}/>
+                <FontAwesomeIcon icon={faSun} fixedWidth/>
               </Button>
             </ButtonGroup>
     </>

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

@@ -5,7 +5,6 @@
   border-width: 0px;
   border-radius: 8px;
 
-  margin-left: 20px;
   justify-content: space-between;
   height: 2.25rem;
   font-size: 1.05rem;
@@ -13,6 +12,8 @@
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s background-color;
+
+  margin-bottom: 2.5rem;
 }
 
 .termSwitch:active,
@@ -20,7 +21,6 @@
   background: var(--primary-button-active) !important;
   color: var(--primary-button-text-active) !important;
   font-weight: 500;
-  text-align: left;
   border-width: 0rem;
   height: 2.25rem;
   line-height: 1.375rem;

src/components/pages/Timeline/index.tsx

@@ -4,6 +4,7 @@ import styles from "./style.module.scss";
 import TermSwitcher from "./components/TermSwitcher";
 import ModuleHeading from "./components/ModuleHeading";
 import WeekHeading from "./components/WeekHeading";
+import Table from "react-bootstrap/table";
 
 interface TimelineProps {
   initSideBar: () => void;
@@ -21,15 +22,84 @@ class Timeline extends React.Component<TimelineProps, {}> {
 
   render() {
     return (
-      <div className={styles.timelineContainer}>
-        <MyBreadcrumbs />
-				{/* <TermSwitcher/> */}
-				<ModuleHeading
-					moduleCode="CO112"
-					title="Introduction to Computer Systems"
-				/>
-        <WeekHeading />
-      </div>
+      <>
+        <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>
+        </div>
+      </>
     );
   }
 }

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

 .timelineContainer {
 	margin-top: 1.875rem;
 	margin-left: 1.875rem;
-}
\ No newline at end of file
+  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;
+}
+
+.moduleHeading {
+  position: -webkit-sticky; /* for Safari */
+  position: sticky;
+  left: 0;
+  background-color: var(--background-color);
+}
+
+.timeline {
+  overflow: scroll;
+  height: 400px;
+}
+
+.dummy {
+  color: var(--primary-text-color);
+}
+
+.tableWeekRow {
+  display: flex;
+  top: 0;
+  position: -webkit-sticky; /* for Safari */
+  position: sticky;
+  background-color: var(--background-color);
+  align-items: stretch;
+}
+
+.rowContent {
+  display: flex;
+}