From a07a6e5f4cec7ce417a938275ce8a8ff9ff8c802 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Tue, 1 Oct 2024 19:24:44 +0200
Subject: [PATCH] Edu Outrach Timeline als EIN Data Button
---
src/App/Timelines.css | 12 ++++---
src/components/HP-timeline.tsx | 9 ++---
src/components/HorizontalTimeline.tsx | 50 +++++++++++++++++++++++++--
3 files changed, 60 insertions(+), 11 deletions(-)
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index f0aa7b46..f44c57fe 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -155,9 +155,7 @@ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: var(--offblack);
}
-.colour-meta-tag{
-background-color: var(--igemlightgreen);
-}
+
/* and buttons */
button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: white; /* soll whit ebleiben! */
@@ -178,8 +176,12 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple);
}
-.Activist, .Milestone, .Education, .Outreach{
- background-color: var(--igemlightgreen) !important;
+.Activist, .Milestone{
+ background-color: var(--igemmediumgreen) !important;
+}
+
+.Education, .Outreach{
+ background-color: var(--igemlightgreen);
}
.Ethics{
diff --git a/src/components/HP-timeline.tsx b/src/components/HP-timeline.tsx
index df01c221..cc21b169 100644
--- a/src/components/HP-timeline.tsx
+++ b/src/components/HP-timeline.tsx
@@ -1,5 +1,5 @@
import { TabButtonRow } from "./Buttons";
-import TimeHori from "./HorizontalTimeline";
+import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){
@@ -47,11 +47,12 @@ export function HPTimeline(){
buttonname: "Milestones",
cssname: "Milestone"
},
- /* {
- node: <TimeHori tab="Education" ></TimeHori>,
- buttonname: "Education",
+ {
+ node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
+ buttonname: "Education & Outreach",
cssname: "Education"
},
+ /*
{
node: <TimeHori tab="Outreach" ></TimeHori>,
buttonname: "Outreach",
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 37d15a00..83c8abec 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -47,12 +47,13 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
}
function TimeItemMeta({ tag, title, pic, author, tabid, month}: ItemProps){
+ let cl = "t-tag " + tag;
return(
<li className="timelineolli">
<div className="timeline-item time-meta moretop">
<div className="">
<div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
- <div className="col-6 t-tag colour-meta-tag">
+ <div className={`${cl} col-6 t-tag `}>
{tag}
</div>
<div className="col">
@@ -92,7 +93,52 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
)
}
-
+ export function CombiTimeHori({tab1, tab2}:{tab1: string, tab2: string}){
+ let nod;
+
+
+ /* console.log("Tab") */
+ nod = getItemsByTypes(tab1, tab2);
+
+ return(
+ <div>
+ <section className="timeline">
+ <ol className="timelineol">
+ {nod}
+ <li className="timelineolli"></li>
+ </ol>
+
+
+ </section>
+ </div>
+ )
+
+ }
+ export function getItemsByTypes(tabid1: string, tabid2: string) {
+ let rows: JSX.Element[] = []
+ for (let i = 0; i < timelinedata.length; i++) {
+ if (tabid1 === timelinedata[i].tag || tabid2 === timelinedata[i].tag) {
+ var name: string;
+ if (timelinedata[i].title) {
+ name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " + timelinedata[i].nachnname;
+ }
+ else{
+ 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}
+ month={timelinedata[i].months} >
+ {timelinedata[i].cardtext}
+ </TimeItem>)
+ }
+ }
+ return rows;
+ }
export default function TimeHori({tab}:{tab: string}){
let nod;
--
GitLab