From f8e2ff2affa0aabd3bcc2a67b4b0975700ff3d36 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Fri, 4 Sep 2020 21:43:48 +0530
Subject: [PATCH] Setup table for timeline view
---
.../ModuleHeading/style.module.scss | 7 +-
.../components/TermSwitcher/index.tsx | 6 +-
.../components/TermSwitcher/style.module.scss | 4 +-
src/components/pages/Timeline/index.tsx | 88 +++++++++++++++++--
.../pages/Timeline/style.module.scss | 45 +++++++++-
5 files changed, 134 insertions(+), 16 deletions(-)
diff --git a/src/components/pages/Timeline/components/ModuleHeading/style.module.scss b/src/components/pages/Timeline/components/ModuleHeading/style.module.scss
index 9accc33d9..a5c1f4618 100644
--- a/src/components/pages/Timeline/components/ModuleHeading/style.module.scss
+++ b/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
+}
diff --git a/src/components/pages/Timeline/components/TermSwitcher/index.tsx b/src/components/pages/Timeline/components/TermSwitcher/index.tsx
index 949a3aef8..7460f9244 100644
--- a/src/components/pages/Timeline/components/TermSwitcher/index.tsx
+++ b/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>
</>
diff --git a/src/components/pages/Timeline/components/TermSwitcher/style.module.scss b/src/components/pages/Timeline/components/TermSwitcher/style.module.scss
index 187c6e20e..c0f047694 100644
--- a/src/components/pages/Timeline/components/TermSwitcher/style.module.scss
+++ b/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;
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index b0ef40b78..af4c622a8 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/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>
+ </>
);
}
}
diff --git a/src/components/pages/Timeline/style.module.scss b/src/components/pages/Timeline/style.module.scss
index dee4b777f..1c7815b9f 100644
--- a/src/components/pages/Timeline/style.module.scss
+++ b/src/components/pages/Timeline/style.module.scss
@@ -1,4 +1,47 @@
.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;
+}
--
GitLab