Compare commits

...

2 Commits

Author SHA1 Message Date
Jared He bc7de92f2d Fix Sections 2 months ago
Jared He d3a53753bc Align timeline 2 months ago
  1. 2
      components/Sections.module.css
  2. 4
      components/Sections.tsx
  3. 5
      components/Timeline.module.css
  4. 26
      components/Timeline.tsx

@ -11,7 +11,7 @@
}
.separator {
flex: 1;
flex: 2;
background-color: var(--label);
height: calc(1rem / 16);
width: 100%;

@ -10,6 +10,8 @@ interface SectionsData {
interface SectionsProps {
/* Whether to display the "Sections" title and separator that appears on the left. */
showHeader?: boolean;
/* Width of the entire Sections, in px. */
width?: number;
data: SectionsData[];
className?: string;
}
@ -17,6 +19,7 @@ interface SectionsProps {
export function Sections({
data,
showHeader = true,
width = 800,
className,
}: SectionsProps) {
return (
@ -24,6 +27,7 @@ export function Sections({
className={
className ? `${className} ${styles.sections}` : `${styles.sections}`
}
style={{ width: width }}
>
{showHeader ? (
<>

@ -15,6 +15,7 @@
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
gap: calc(20rem / 16);
}
@ -22,7 +23,7 @@
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
justify-content: flex-end;
}
.time {
@ -34,7 +35,7 @@
word-wrap: break-word;
}
.circle {
.outerCircle {
background-color: var(--secondary-accent);
box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
display: flex;

@ -17,8 +17,6 @@ interface TimelineProps {
outerCircleWidth?: number;
/** Width of the inner circles on the timeline, in pixels. */
innerCircleWidth?: number;
/** Width of time label, in pixels. */
timeWidth?: number;
/** Width of text label, in pixels. */
textWidth?: number;
/** Distance between the time label AND the text label to middle line, in pixels. */
@ -32,14 +30,12 @@ export function Timeline({
lineWidth = 5,
outerCircleWidth = 30,
innerCircleWidth = 15,
timeWidth = 1000,
textWidth = 500,
gap = 50,
className,
}: TimelineProps) {
const largerMiddleElement =
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
if (innerCircleWidth > outerCircleWidth) {
throw new Error(
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
@ -51,13 +47,12 @@ export function Timeline({
className={
className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
}
style={{ width: width }}
>
<div
className={styles.line}
style={{
width: lineWidth,
left: width / 2 - lineWidth / 2,
right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
}}
/>
<div className={styles.timelineSections}>
@ -65,11 +60,9 @@ export function Timeline({
<TimelineSection
key={datum.time}
datum={datum}
width={width}
isTimeUppercase={isTimeUppercase}
outerCircleWidth={outerCircleWidth}
innerCircleWidth={innerCircleWidth}
timeWidth={timeWidth}
textWidth={textWidth}
gap={gap}
/>
@ -81,42 +74,33 @@ export function Timeline({
interface TimelineSectionProps {
datum: TimelineData;
width: number;
isTimeUppercase: boolean;
outerCircleWidth: number;
innerCircleWidth: number;
timeWidth: number;
textWidth: number;
gap: number;
}
function TimelineSection({
datum,
width,
isTimeUppercase,
outerCircleWidth,
innerCircleWidth,
timeWidth,
textWidth,
gap,
}: TimelineSectionProps) {
return (
<div className={styles.timelineSection} style={{ gap: gap }}>
<div
className={styles.time}
style={{
width: timeWidth,
marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
}}
>
<div className={styles.time}>
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
</div>
<div
className={styles.circle}
className={styles.outerCircle}
style={{
width: outerCircleWidth,
height: outerCircleWidth,
borderRadius: outerCircleWidth,
flex: `0 0 ${outerCircleWidth}px`,
}}
>
<div
@ -132,7 +116,7 @@ function TimelineSection({
className={styles.text}
style={{
width: textWidth,
marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
flex: `0 0 ${textWidth}px`,
}}
>
{datum.text}

Loading…
Cancel
Save