Compare commits

...

2 Commits

Author SHA1 Message Date
Jared He bc7de92f2d Fix Sections
continuous-integration/drone/push Build is failing Details
2022-10-02 14:20:15 -04:00
Jared He d3a53753bc Align timeline 2022-10-02 14:11:23 -04:00
4 changed files with 13 additions and 24 deletions

View File

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

View File

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

View File

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

View File

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