Align timeline
This commit is contained in:
parent
e8ce17fd82
commit
d3a53753bc
|
@ -15,6 +15,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
align-items: 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: 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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue