Compare commits
2 Commits
e8ce17fd82
...
bc7de92f2d
Author | SHA1 | Date |
---|---|---|
Jared He | bc7de92f2d | |
Jared He | d3a53753bc |
|
@ -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…
Reference in New Issue