From e97aab887971d483dc321871592996cfb1f5098e Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 5 Sep 2020 03:51:01 +0100
Subject: [PATCH] Align grid items with module labels
---
src/components/pages/Timeline/index.tsx | 21 ++++++++++---------
.../pages/Timeline/style.module.scss | 5 +++--
2 files changed, 14 insertions(+), 12 deletions(-)
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index 97023305d..cebeb8a99 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -61,28 +61,29 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
const code = modulesList[i].code;
const tracks = this.state.moduleTracks[code];
if (tracks) {
- const height = tracks.length * trackHeight;
- const timelineBackgroundsClass = classNames(
- i % 2 === 0
- ? styles.timelineBackgroundEven
- : styles.timelineBackgroundOdd,
- i === 0 ? styles.timelineBackgroundFirst : "",
- i === modulesList.length - 1 ? styles.timelineBackgroundLast : ""
- );
moduleHeadings.push(
<div
key={code}
className={styles.moduleHeading}
- style={{ height: `${height}rem` }}
+ style={{ height: `${tracks.length * trackHeight}rem` }}
>
<ModuleHeading moduleCode={code} title={modulesList[i].title} />
</div>
);
+ const timelineBackgroundsClass = classNames(
+ i % 2 === 0
+ ? styles.timelineBackgroundEven
+ : styles.timelineBackgroundOdd,
+ i === 0 ? styles.timelineBackgroundFirst : "",
+ i === modulesList.length - 1 ? styles.timelineBackgroundLast : ""
+ );
+ const offset =
+ i === modulesList.length - 1 || i === 0 ? 0.625 / 2 : 0.625;
for (let j = 0; j < numWeeks; j++) {
timelineBackgrounds.push(
<div
key={code + j}
- style={{ height: `${height}rem` }}
+ style={{ height: `${tracks.length * trackHeight + offset}rem` }}
className={timelineBackgroundsClass}
></div>
);
diff --git a/src/components/pages/Timeline/style.module.scss b/src/components/pages/Timeline/style.module.scss
index 0a6324aca..231aa360d 100644
--- a/src/components/pages/Timeline/style.module.scss
+++ b/src/components/pages/Timeline/style.module.scss
@@ -98,8 +98,9 @@
grid-area: background;
grid-template-columns: repeat(12, 15rem);
grid-template-rows: auto;
- grid-gap: 0.625rem;
- padding-bottom: 0.625rem;
+ column-gap: 0.625rem;
+ row-gap: 0;
+ margin-bottom: 0.625rem;
}
.timelineBackgroundEven {
--
GitLab