Skip to content

Commit 2e917c4

Browse files
alexbaumgertneralexbaumgertner
committed
Fix layout and styling
Refactor TimeHistory and TimeSpanBar components for improved layout and styling; update date range and remove unnecessary controls
1 parent 459deb7 commit 2e917c4

File tree

5 files changed

+73
-111
lines changed

5 files changed

+73
-111
lines changed

‎components/TimeHistory/TimeHistory.module.css‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
height: 1000px;
88
}
99

10-
.controls {
11-
position: absolute;
12-
height: 40px;
13-
}
14-
1510
.years {
1611
display: flex;
1712
flex-direction: row;
@@ -25,6 +20,7 @@
2520
.year {
2621
height: 100%;
2722
border-right: 1px solid hwb(203 66% 0% / 0.78);
23+
box-sizing: border-box;
2824
font-size: 10px;
2925
flex: 0 0 auto;
3026
text-align: center;
@@ -34,26 +30,12 @@
3430
background-color: #f0f0f0;
3531
}
3632

37-
.currentFrame {
38-
width: 100%;
39-
overflow: hidden;
40-
top: 100px;
41-
position: relative;
42-
}
43-
4433
.items {
45-
margin: 20px 0;
34+
position: absolute;
35+
top: 60px;
4636
}
4737

4838
.item {
49-
background-color: white;
5039
margin: 6px 0;
5140
position: relative;
52-
border-radius: 6px;
53-
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
54-
opacity: 0.8;
55-
}
56-
57-
.item:hover {
58-
opacity: 1;
5941
}

‎components/TimeHistory/TimeHistory.tsx‎

Lines changed: 20 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import { TimeSpanBarProps, TimeSpanBar } from "../TimeSpanBar/TimeSpanBar";
22
import { useState, useCallback, useEffect } from "react";
33
import classes from "./TimeHistory.module.css";
44

5+
/**
6+
* Props for the TimeHistory component
7+
* @param historyItems Array of TimeSpanBarProps objects representing timeline items to display
8+
* @param visibleRange Optional date range to show initially. Defaults to 1961-1991
9+
* @param stepInYears Optional step size in years for scrolling. Defaults to 1
10+
*/
511
export interface TimeHistoryProps {
612
historyItems: TimeSpanBarProps[];
713
visibleRange?: {
@@ -14,7 +20,7 @@ export interface TimeHistoryProps {
1420
const TimeHistory = ({
1521
historyItems,
1622
visibleRange: initialVisibleRange = {
17-
start: new Date("1961-01-01"),
23+
start: new Date("1881-01-01"),
1824
end: new Date("1991-01-01"),
1925
// Наша эра :)
2026
},
@@ -26,43 +32,8 @@ const TimeHistory = ({
2632
const startYear = visibleRange.start.getFullYear();
2733
const yearWidth = 50; // px
2834

29-
const rangeStep = 5; // years
30-
3135
return (
3236
<div className={classes.component}>
33-
<div className={classes.controls}>
34-
<button onClick={() => setVisibleRange(initialVisibleRange)}>
35-
Reset
36-
</button>
37-
<button
38-
onClick={() =>
39-
setVisibleRange((prev) => ({
40-
start: new Date(
41-
prev.start.setFullYear(prev.start.getFullYear() - rangeStep)
42-
),
43-
end: new Date(
44-
prev.end.setFullYear(prev.end.getFullYear() - rangeStep)
45-
),
46-
}))
47-
}
48-
>
49-
{"<"} Back
50-
</button>
51-
<button
52-
onClick={() =>
53-
setVisibleRange((prev) => ({
54-
start: new Date(
55-
prev.start.setFullYear(prev.start.getFullYear() + rangeStep)
56-
),
57-
end: new Date(
58-
prev.end.setFullYear(prev.end.getFullYear() + rangeStep)
59-
),
60-
}))
61-
}
62-
>
63-
Forward {">"}
64-
</button>
65-
</div>
6637
<div className={classes.years}>
6738
{Array.from(
6839
{
@@ -88,27 +59,19 @@ const TimeHistory = ({
8859
{endYear}
8960
</div>
9061
</div>
91-
<div className={classes.currentFrame}>
92-
<div className={classes.items}>
93-
{historyItems.map((item, index) => (
94-
<div
95-
className={classes.item}
96-
key={index}
97-
style={{
98-
left: `${
99-
(item.start.date.getFullYear() - startYear) * yearWidth
100-
}px`,
101-
width: `${
102-
(item.end?.date?.getFullYear() -
103-
item.start.date.getFullYear()) *
104-
yearWidth
105-
}px`,
106-
}}
107-
>
108-
<TimeSpanBar {...item} yearWidth={yearWidth} />
109-
</div>
110-
))}
111-
</div>
62+
63+
<div className={classes.items}>
64+
{historyItems.map((item, index) => (
65+
<div
66+
className={classes.item}
67+
key={index}
68+
style={{
69+
left: (item.start.date.getFullYear() - startYear) * yearWidth,
70+
}}
71+
>
72+
<TimeSpanBar {...item} yearWidth={yearWidth} />
73+
</div>
74+
))}
11275
</div>
11376
</div>
11477
);

‎components/TimeSpanBar/TimeSpanBar.module.css‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,46 @@
11
.component {
2-
padding: 6px 12px;
3-
display: grid;
42
font-family: sans-serif;
5-
grid-template-areas:
6-
"header header"
7-
"events events"
8-
"end end";
3+
position: relative;
4+
height: 100px;
5+
border: 1px solid red;
96
}
107

118
.header {
12-
display: flex;
13-
flex-direction: row;
149
font-size: 16px;
1510
font-weight: 600;
16-
grid-area: header;
11+
margin: 0;
12+
position: absolute;
13+
left: -130px;
14+
width: 120px;
15+
text-align: right;
16+
}
17+
18+
.headerText {
19+
font-size: 16px;
20+
font-weight: 600;
1721
margin: 0;
1822
}
1923

2024
.content {
2125
display: flex;
2226
flex-direction: row;
2327
gap: 8px;
24-
grid-area: content;
2528
}
2629

2730
.start {
2831
display: flex;
2932
flex-direction: column;
3033
gap: 4px;
31-
grid-area: start;
3234
font-weight: bold;
3335
font-size: 1.6em;
3436
padding: 4px 0;
35-
text-align: left;
3637
}
3738

3839
.end {
39-
display: flex;
40-
flex-direction: column;
40+
position: absolute;
41+
right: -60px;
42+
top: 0;
4143
gap: 4px;
42-
grid-area: end;
4344
text-align: right;
4445
font-weight: bold;
4546
font-size: 1.6em;
@@ -52,26 +53,20 @@
5253
}
5354

5455
.date {
55-
font-size: 0.6em;
56+
font-size: 1em;
5657
}
5758

5859
.events {
59-
display: flex;
60-
flex-direction: row;
61-
gap: 4px;
62-
align-items: top;
63-
overflow: scroll;
64-
height: 100px;
60+
height: 80px;
6561
}
6662

6763
.event {
68-
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
64+
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
6965
background-color: #fff;
70-
height: 100px;
71-
overflow-y: scroll;
7266
font-size: 0.5em;
73-
min-width: 80px;
7467
position: absolute;
68+
height: 80px;
69+
overflow: hidden;
7570
}
7671

7772
.eventDate {
@@ -80,12 +75,14 @@
8075
background-color: #e8feff;
8176
padding: 2px 4px;
8277
border-radius: 4px;
78+
text-align: center;
8379
}
8480

8581
.eventName {
8682
padding: 8px 4px;
8783
font-size: 0.6em;
8884
font-weight: 400;
85+
height: 12px;
8986
overflow: hidden;
9087
text-overflow: ellipsis;
9188
display: -webkit-box;
@@ -100,7 +97,8 @@
10097
}
10198

10299
.eventImage {
103-
width: 64px;
104100
object-fit: cover;
105101
box-sizing: border-box;
102+
margin: 0 auto;
103+
height: 53px;
106104
}

‎components/TimeSpanBar/TimeSpanBar.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,31 @@ const TimeSpanBar = ({
4747
yearWidth,
4848
}: TimeSpanBarProps) => {
4949
const duration = end.date.getFullYear() - start.date.getFullYear();
50+
const startYear = start.date.getFullYear();
5051

5152
return (
52-
<div className={classes.component}>
53+
<div
54+
className={classes.component}
55+
style={{ width: (duration + 1) * yearWidth }}
56+
>
5357
<h3 className={classes.header}>
5458
<div className={classes.start}>
5559
<div className={classes.label}></div>
5660
<div className={classes.date}>{formatDate(start.date)}</div>
5761
</div>
58-
{header}
62+
<div className={classes.headerText}>{header}</div>
5963
</h3>
60-
<div className={classes.events} style={{ width: duration * yearWidth }}>
64+
<div
65+
className={classes.events}
66+
style={{ width: (duration + 1) * yearWidth }}
67+
>
6168
{events.map((event, index) => (
6269
<div
6370
className={classes.event}
6471
key={index}
6572
style={{
66-
left:
67-
(event.info.date.getFullYear() - start.date.getFullYear()) *
68-
yearWidth,
73+
left: (event.info.date.getFullYear() - startYear) * yearWidth,
74+
width: yearWidth,
6975
}}
7076
>
7177
<div className={classes.eventDate}>

‎utils/mocks/TimeSpanBar.mock.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,19 @@ export const KHRUSHCHEV_LIFE_BAR: TimeSpanBarProps = {
2121
},
2222
},
2323
events: [
24+
{
25+
name: "Early life",
26+
info: {
27+
date: new Date("1894-04-15"),
28+
image:
29+
"https://upload.wikimedia.org/wikipedia/commons/6/66/Kurskaja.jpg",
30+
location: {
31+
name: "Kalinovka",
32+
latitude: 55.7558,
33+
longitude: 37.6173,
34+
},
35+
},
36+
},
2437
{
2538
name: "Donbas years",
2639
info: {

0 commit comments

Comments
 (0)