From ba5aff623177e67f91009fb06143cba6febf69aa Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Tue, 13 Aug 2024 16:55:32 +0200
Subject: [PATCH] bfh
---
src/App/App.css | 22 +++++++++++++
src/components/My-Timeline.tsx | 59 ++++++++++++++++++++++++++--------
2 files changed, 67 insertions(+), 14 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index ab92986f..8fe37aa2 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3159,4 +3159,26 @@ a{
.text-1-bfh{
margin-top: auto !important;
margin-bottom: auto !important;
+}
+
+.panel-talk-gallery{
+ padding: 0 !important;
+ margin-top: 10px !important;
+ margin-left: 20px !important;
+ margin-right: 20px !important;
+}
+.panel-talk-gallery div{
+ padding: 0 !important;
+}
+.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(5){
+ margin-top: 60px !important;
+}
+.panel-talk-gallery .col:nth-child(2), .panel-talk-gallery .col:nth-child(4){
+ margin-top: 30px !important;
+}
+.panel-talk-gallery .col .middle{
+ margin-top: 15px !important;
+}
+.middle{
+ text-align: center;
}
\ No newline at end of file
diff --git a/src/components/My-Timeline.tsx b/src/components/My-Timeline.tsx
index e0a96f37..319c4b72 100644
--- a/src/components/My-Timeline.tsx
+++ b/src/components/My-Timeline.tsx
@@ -30,7 +30,7 @@ export const TimelineItemPic = ({ text, vorname, nachname, date, tag, color, ch
<figure className="snip1113 red">
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
<figcaption>
- <h3>{vorname} <span>{nachname}</span></h3>
+ <h3>{vorname} <br/> <span>{nachname}</span></h3>
</figcaption>
</figure>
</div>
@@ -63,6 +63,47 @@ export const TimelineItem = ({ date, tag, color, children, csstag }:ItemProps)
</div>
);
+export const PanelTimelineItem = () => (
+ <div className="timeline-item">
+ <div className="timeline-item-content">
+ <span className="tag" style={{ background: "var(--lightblue)" }}>
+ Talks
+ </span>
+ <time>Panel Discussion</time>
+ <div className="row align-items-center panel-talk-gallery">
+ <div className="col">
+ <img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <div className="small middle">Taci <br/> Haddock</div>
+ </div>
+ <div className="col">
+ <img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <div className="small middle">Ana <br/> Sifuentes</div>
+ </div>
+ <div className="col">
+ <img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <div className="small middle">Olivia <br/> Mozolewska</div>
+ </div>
+ <div className="col">
+ <img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <div className="small middle">Lasse <br/> Middendorf</div>
+ </div>
+ <div className="col">
+ <img className="img-round" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <div className="small middle">Nemanja <br/> Stijepovic</div>
+ </div>
+ </div>
+ <hr/>
+ <span>Panel Discussion</span>
+ <div id="panel" style={{display: "none"}}>
+ So much more
+ </div>
+
+ <BFHMoreButton it="panel"></BFHMoreButton>
+ <span className="circle" />
+ </div>
+ </div>
+);
+
export function MyTimeline () {
@@ -189,10 +230,9 @@ export function MyTimeline () {
csstag="safeworkshop"
vorname="Svenja"
nachname="Vinke"
+ text="Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use."
>
<h5>About Dual-use and Biosafety</h5>
- <span>Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use.
- </span>
<div id="safeworkshop" style={{display: "none"}}>
So much more
</div>
@@ -269,17 +309,8 @@ export function MyTimeline () {
So much more
</div>
</TimelineItemPic>
- <TimelineItem
- date='Panel Discussion'
- tag= 'Talks'
- color='var(--lightblue)'
- csstag="panel"
- >
- <span>Panel Discussion</span>
- <div id="panel" style={{display: "none"}}>
- So much more
- </div>
- </TimelineItem>
+ <PanelTimelineItem></PanelTimelineItem>
+
<TimelineItemPic
date='iGEMer Ted Talks'
tag= 'Talks'
--
GitLab