From 4a69b033da4998542f8d49cac2c6ffd02137e873 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 29 Sep 2024 15:21:42 +0200
Subject: [PATCH] Auf Integrated Human Practice Seite -> Zeitstrahl:
Zeitmarken/Monate
---
src/components/HorizontalTimeline.tsx | 50 ++++++++++++++++++---------
1 file changed, 34 insertions(+), 16 deletions(-)
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index b2e264d0..37d15a00 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>)
}
--
GitLab