diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx index b2e264d0ac9d8af7d8d44d1e5d41053e885b77c4..37d15a006911ae75aa59e0f83859d885dbc4c9a5 100644 --- a/src/components/HorizontalTimeline.tsx +++ b/src/components/HorizontalTimeline.tsx @@ -1,13 +1,21 @@ import { HPMoreButton } from "./Buttons"; import { timelinedata } from "../data/hptimelinedata"; -function TimeItem({tag, title, pic, author, tabid}: ItemProps){ +function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ let cl = "t-tag " + tag; return( <li className="timelineolli"> <div className="timeline-item moretop"> <div className=""> - <div className={cl}> - {tag} + <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}> + <div className={cl}> + {tag} + </div> + <div className="col"> + + </div> + <div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}> + {month} + </div> </div> <div className="fillup-wrapper"> @@ -38,15 +46,24 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ) } - function TimeItemMeta({ tag, title, pic, author, tabid}: ItemProps){ + function TimeItemMeta({ tag, title, pic, author, tabid, month}: ItemProps){ return( <li className="timelineolli"> <div className="timeline-item time-meta moretop"> <div className=""> - <div className=" t-tag colour-meta-tag"> - {tag} + <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}> + <div className="col-6 t-tag colour-meta-tag"> + {tag} + </div> + <div className="col"> + + </div> + <div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}> + {month} + </div> </div> + <div className="fillup-wrapper"> <div className="row align-items-center fillup"> <div className="col" > @@ -113,6 +130,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ pic: string, author: string, tabid: string + month: string } @@ -135,7 +153,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ tag={timelinedata[i].tag} author={name} tabid={timelinedata[i].interviewtabid} - > + month={timelinedata[i].months} > {timelinedata[i].cardtext} </TimeItemMeta>) } @@ -152,8 +170,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ pic={timelinedata[i].pictureurl} tag={timelinedata[i].tag} author={name} - tabid={timelinedata[i].interviewtabid} - > + tabid={timelinedata[i].interviewtabid} + month={timelinedata[i].months} > {timelinedata[i].cardtext} </TimeItem>) } @@ -175,13 +193,13 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ name = timelinedata[i].vorname + " " + timelinedata[i].nachnname; } rows.push(<TimeItem - key={i} - title={timelinedata[i].heading} - pic={timelinedata[i].pictureurl} - tag={timelinedata[i].tag} - author={name} - tabid={timelinedata[i].interviewtabid} - > + key={i} + title={timelinedata[i].heading} + pic={timelinedata[i].pictureurl} + tag={timelinedata[i].tag} + author={name} + tabid={timelinedata[i].interviewtabid} + month={timelinedata[i].months} > {timelinedata[i].cardtext} </TimeItem>) }