diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx index 97023305da43880ea25921de2b1d239d5631ee9b..cebeb8a99d284e389aca16ba8e663a1c943a30af 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 0a6324aca04628492a80ebe520c22a99e4934e63..231aa360dad05f0f25c78bb774adf9946d016e99 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 {