diff --git a/src/components/App.scss b/src/components/App.scss
index e92315f5c07cfbc4ab92b769bea0f86e5b879bc2..b2e2e847ed5fda7c7b3f5dd1df3adc2a579320ee 100644
--- a/src/components/App.scss
+++ b/src/components/App.scss
@@ -24,6 +24,9 @@ code {
--secondary-text-color: #{$gray-700};
--tertiary-text-color: #{$gray-500};
+ --primary-text-color-inverse: #{$white};
+ --background-color-inverse: #{$black};
+
--border-color: #{$gray-200};
--border-color-hover: #{$gray-300};
--border-color-focus: #{$gray-300};
@@ -77,6 +80,9 @@ code {
--secondary-text-color: #{$gray-300};
--tertiary-text-color: #{$gray-500};
+ --primary-text-color-inverse: #{$black};
+ --background-color-inverse: #{$white};
+
--border-color: #{$gray-700};
--border-color-hover: #{$gray-600};
--border-color-focus: #{$gray-600};
diff --git a/src/components/pages/Timeline/components/WeekHeading/index.tsx b/src/components/pages/Timeline/components/WeekHeading/index.tsx
index 239d96b9ead9712c042039cc5f04dbd02a50d549..47adfbe10cfac489bb36218cbee9dbc8f8d2bc42 100644
--- a/src/components/pages/Timeline/components/WeekHeading/index.tsx
+++ b/src/components/pages/Timeline/components/WeekHeading/index.tsx
@@ -1,21 +1,44 @@
import React from "react";
import Card from "react-bootstrap/Card";
import styles from "./style.module.scss";
+import cx from "classnames";
-const WeekHeading: React.FC = () => {
+export interface WeekHeadingProps {
+ weekNumber: string;
+ dateRangeStart: string;
+ dateRangeEnd: string;
+ activeDay: number;
+}
+
+let days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+
+const WeekHeading: React.FC<WeekHeadingProps> = ({
+ weekNumber,
+ dateRangeStart,
+ dateRangeEnd,
+ activeDay
+}) => {
return (
<>
<Card className={styles.weekCard}>
<Card.Header>
- <div className={styles.weekHeading}>Week 1</div>
- <div className={styles.weekDateRange}>06/10 - 10/10</div>
+ <div className={styles.weekHeading}>Week {weekNumber}</div>
+ <div className={styles.weekDateRange}>
+ {dateRangeStart} - {dateRangeEnd}
+ </div>
</Card.Header>
<Card.Body>
- <div className={styles.dayIndicator}>Mon</div>
- <div className={styles.dayIndicator}>Tue</div>
- <div className={styles.dayIndicator}>Wed</div>
- <div className={styles.dayIndicator}>Thu</div>
- <div className={styles.dayIndicator}>Fri</div>
+ {days.map(day => {
+ if (activeDay === days.indexOf(day) + 1) {
+ return (
+ <div className={cx(styles.activeDay, styles.dayIndicator)}>
+ {day}
+ </div>
+ );
+ } else {
+ return <div className={styles.dayIndicator}>{day}</div>;
+ }
+ })}
</Card.Body>
</Card>
</>
diff --git a/src/components/pages/Timeline/components/WeekHeading/style.module.scss b/src/components/pages/Timeline/components/WeekHeading/style.module.scss
index 53104c29e25776532e45413aab919df746e50eb6..8e18ec7369778f2a1d410341b3c6ecef99ea252b 100644
--- a/src/components/pages/Timeline/components/WeekHeading/style.module.scss
+++ b/src/components/pages/Timeline/components/WeekHeading/style.module.scss
@@ -2,7 +2,7 @@
.weekCard {
width: 15rem;
- height: 4rem;
+ height: 4.25rem;
border-radius: 0.5rem !important;
border-width: 0rem;
background: var(--background-color);
@@ -23,11 +23,14 @@
.weekCard :global(.card-body) {
font-size: 1rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.5rem 0.5rem;
- padding-bottom: 0rem;
+ padding: 0rem;
+ padding-top: 0.5rem;
+ flex: none;
+
+ display: inline-grid;
+ grid-template-columns: repeat(5, 3rem);
+ grid-template-rows: auto;
+ place-items: center center;
}
.dayIndicator {
@@ -38,6 +41,13 @@
padding: 0rem;
}
+.activeDay {
+ color: var(--primary-text-color-inverse);
+ background-color: var(--background-color-inverse) !important;
+ border-radius: 0.25rem;
+ width: 3rem !important;
+}
+
.weekDateRange {
color: var(--tertiary-text-color);
}
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index 467b53dc5d9180b961e7affd1fd4200955e92aa4..e506cfca1611b400fe5ed8022fab662086de2c9c 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -31,32 +31,45 @@ class Timeline extends React.Component<TimelineProps, {}> {
</div>
<div className={styles.timelineWeekRow}>
{[...Array(12)].map((e, i) => {
- return (
- <div className={styles.weekHeading}>
- <WeekHeading />
- </div>
- );
+ if (i == 1) {
+ return (
+ <div className={styles.weekHeading}>
+ <WeekHeading
+ weekNumber={`${i + 1}`}
+ dateRangeStart={"06/10"}
+ dateRangeEnd={"10/10"}
+ activeDay={3}
+ />
+ </div>
+ );
+ } else {
+ return (
+ <div className={styles.weekHeading}>
+ <WeekHeading
+ weekNumber={`${i + 1}`}
+ dateRangeStart={"06/10"}
+ dateRangeEnd={"10/10"}
+ activeDay={0}
+ />
+ </div>
+ );
+ }
})}
</div>
<div className={styles.timelineModuleColumn}>
+ {modules.map(module => (
<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)"
+ moduleCode={module.code}
+ title={module.title}
/>
</div>
+ ))}
+ </div>
+ <div className={styles.timelineWeekBackground}>
+ {[...Array(12)].map((e, i) => {
+ return <div className={styles.timelineBackground}> </div>
+ })}
</div>
</div>
</div>
@@ -65,4 +78,39 @@ class Timeline extends React.Component<TimelineProps, {}> {
}
}
+let modules = [
+ {
+ title: "Introduction to Computer Systems",
+ code: "CO112"
+ },
+ {
+ title: "Programming I (Haskell)",
+ code: "CO120.1"
+ },
+ {
+ title: "Programming II (Java)",
+ code: "CO120.2"
+ },
+ {
+ title: "Introduction to Logic",
+ code: "CO140"
+ },
+ {
+ title: "Discrete Mathematics",
+ code: "CO142"
+ },
+ {
+ title: "Mathematical Methods",
+ code: "CO145"
+ },
+ {
+ title: "Computing Practical I",
+ code: "CO161"
+ },
+ {
+ title: "Professional Issues",
+ code: "CO166"
+ }
+];
+
export default Timeline;
diff --git a/src/components/pages/Timeline/style.module.scss b/src/components/pages/Timeline/style.module.scss
index 93191412ba4bb8eeb933eacf7a107b95e1ea5278..e7d0a059417c9cdd740a68ec7b0e549bb09f8672 100644
--- a/src/components/pages/Timeline/style.module.scss
+++ b/src/components/pages/Timeline/style.module.scss
@@ -6,13 +6,44 @@
.timelineGrid {
display: grid;
- grid-template-areas: "switcher weeks" "modules .";
+ grid-template-areas: "switcher weeks" "modules background";
grid-template-rows: auto;
row-gap: 0.625rem;
- overflow: scroll;
margin-bottom: 1.25rem;
margin-left: -0.625rem;
grid-template-columns: 16.875rem auto;
+
+ overflow: scroll;
+ scrollbar-width: thin;
+ scrollbar-color: var(--background-color) var(--background-color);
+}
+
+.timelineGrid::-webkit-scrollbar {
+ width: 0.5rem;
+ height: 0.5rem;
+}
+
+.timelineGrid::-webkit-scrollbar-corner {
+ background: var(--background-color);
+}
+
+.timelineGrid::-webkit-scrollbar-track {
+ background: var(--background-color);
+ margin-left: 0.625rem;
+ margin-right: 0.625rem;
+}
+
+.timelineGrid::-webkit-scrollbar-thumb {
+ background-color: var(--background-color);
+ border-radius: 0.5rem;
+}
+
+.timelineGrid:hover {
+ scrollbar-color: var(--scrollbar) var(--background-color);
+}
+
+.timelineGrid:hover::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar);
}
.timelineTermSwitcher {
@@ -25,6 +56,7 @@
padding-right: 1.25rem;
padding-left: 0.625rem;
box-sizing: border-box;
+ height: 4.25rem !important;
}
.timelineTermSwitcher > * {
@@ -37,6 +69,7 @@
grid-auto-flow: row;
grid-template-columns: repeat(12, 15rem);
grid-gap: 0.625rem;
+ padding-right: 0.625rem;
top: 0;
position: sticky;
}
@@ -50,4 +83,24 @@
padding-right: 1.25rem;
box-sizing: border-box;
padding-left: 0.625rem;
+ margin-bottom: 0.625rem;
+ background: var(--background-color);
+}
+
+.weekHeading {
+ height: 4.25rem !important;
+}
+
+.timelineWeekBackground {
+ display: grid;
+ grid-area: background;
+ grid-template-columns: repeat(12, 15rem);
+ grid-template-rows: auto;
+ grid-gap: 0.625rem;
+ padding-bottom: 0.625rem;
+}
+
+.timelineBackground {
+ background-color: var(--primary-button);
+ border-radius: 0.5rem;
}