From e8a1998f86863504bf55f50024388cc285f32b53 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 8 Jul 2024 21:24:27 +0200
Subject: [PATCH] timeline layout
---
src/App/App.css | 25 ++++-
src/components/My-Timeline.tsx | 188 +++++++++++++++++++++++----------
2 files changed, 153 insertions(+), 60 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index d50c6bfd..a7c60ab1 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -582,9 +582,11 @@ svg{
content: "";
width: 4px;
height: 100%;
+ z-index: 0;
}
.timeline-item {
- display: flex;
+ min-width: 100px;
+ /* display: flex; */
justify-content: flex-end;
padding-right: 30px;
position: relative;
@@ -609,6 +611,26 @@ svg{
position: relative;
text-align: right;
}
+.timeline-end{
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ background-color: #fff;
+ padding: 15px;
+ position: relative;
+ text-align: center;
+ z-index: 1;
+ margin-top: 8vw;
+}
+.timeline-begin{
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ background-color: #fff;
+ padding: 15px;
+ position: relative;
+ text-align: center;
+ z-index: 1;
+ margin-bottom: 8vw;
+}
.timeline-item-content::after {
background-color: #fff;
@@ -1119,7 +1141,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
.tabcontent {
display: none;
padding: 6px 12px;
- border: 1px solid #ccc;
}
diff --git a/src/components/My-Timeline.tsx b/src/components/My-Timeline.tsx
index fd3cdd40..94c6beb6 100644
--- a/src/components/My-Timeline.tsx
+++ b/src/components/My-Timeline.tsx
@@ -10,7 +10,6 @@ interface ItemProps {
color: string
}
-import TextEvent from './TextEvent.tsx';
/* import ImageEvent from './ImageEvent.tsx';
import UrlButton from './UrlButton.tsx'; */
@@ -20,8 +19,9 @@ const TimelineItem = ({ date, tag, color, children }:ItemProps) => (
<div className="timeline-item-content">
<span className="tag" style={{ background: color }}>
{tag}
- </span>
+ </span>
<time>{date}</time>
+ <hr/>
{children}
<span className="circle" />
</div>
@@ -32,67 +32,139 @@ const TimelineItem = ({ date, tag, color, children }:ItemProps) => (
export function MyTimeline () {
return(
+ <>
<div className="timeline-container">
- <TimelineItem
- date='Opening'
- tag= 'medium'
- color='#018f69'
- >
- <TextEvent
- date="1/2/19"
- text="OPENING"
- id='Opening'
- />
- </TimelineItem>
+ <div className='timeline-begin'>
+ Opening
+ </div>
- <TimelineItem
- date='Scientific Talk I.'
- tag= 'medium'
- color='#018f69'
- >
- Hiii
- {/*
- <ImageEvent
- date="4/13/19"
- text="You can embed images..."
- src="https://res.cloudinary.com/dovoq8jou/image/upload/v1564772194/jellyfish.jpg"
- alt="jellyfish swimming"
- credit="Photo by [@tavi004](https://unsplash.com/@tavi004)"
- id='Scientific Talk I.'>
-
- <div>
- <UrlButton href="https://unsplash.com/search/photos/undersea">
- View more undersea photos
- </UrlButton>
- </div>
- </ImageEvent> */}
+ <TimelineItem
+ date='Scientific Talk I.'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ >
+ Scientific Talk 1 by Prof. Dr. Karl Josef Dietz
+ {/*
+ <ImageEvent
+ date="4/13/19"
+ text="You can embed images..."
+ src="https://res.cloudinary.com/dovoq8jou/image/upload/v1564772194/jellyfish.jpg"
+ alt="jellyfish swimming"
+ credit="Photo by [@tavi004](https://unsplash.com/@tavi004)"
+ id='Scientific Talk I.'>
+
+ <div>
+ <UrlButton href="https://unsplash.com/search/photos/undersea">
+ View more undersea photos
+ </UrlButton>
+ </div>
+ </ImageEvent> */}
- </TimelineItem>
- <TimelineItem
- date='Workshop XY'
- tag='Workshop Session I.'
- color='var(--text-primary)'
- >
- <TextEvent
- date="1/2/19"
- text="W"
- id='Workshop Session I.'
- />
- </TimelineItem>
- <TimelineItem
- date='Workshop XY'
- tag='Workshop Session I.'
- color='var(--text-primary)'
- >
- <TextEvent
- date="1/2/19"
- text="W"
- id='Workshop Session I.'
- />
- </TimelineItem>
+ </TimelineItem>
+ <TimelineItem
+ date='How to Wiki'
+ tag='Workshop Session I.'
+ color='var(--text-primary)'
+ >
+ Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki.
+ </TimelineItem>
+ <TimelineItem
+ date='How to SynBio'
+ tag='Workshop Session I.'
+ color='var(--text-primary)'
+ >
+ Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
+ </TimelineItem>
+ <TimelineItem
+ date='How to use AI as a scientist'
+ tag='Workshop Session I.'
+ color='var(--text-primary)'
+ >
+ <h5>Modern problems require modern solutions</h5>
+ Computational technologies are getting more in the focus of scientific research. Integration of generative KI like GenAI bypass limitations and offers potential risks - learn how to implement Artificial Intelligence.
+ </TimelineItem>
+ <TimelineItem
+ date='Scientific Talk II.'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ >
+ Scientific Talk 2 by Karla Wagner
+ </TimelineItem>
+ <TimelineItem
+ date='Team project presentations'
+ tag= 'Team presentations'
+ color='var(--accent-primary'
+ >
+ <h5>Team project presentations</h5>
+ </TimelineItem>
+ <TimelineItem
+ date='Poster Exhibition Booth'
+ tag= 'Team presentations'
+ color='var(--accent-primary)'
+ >
+ <h5>Poster Exhibition Booth </h5>
+ </TimelineItem>
+ <TimelineItem
+ date='How to work safe'
+ tag='Workshop Session II.'
+ color='var(--text-primary)'
+ >
+ <h5>About Dual-use and Biosafety</h5>
+ 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.
+ </TimelineItem>
+ <TimelineItem
+ date='How to Communicate Science'
+ tag='Workshop Session II.'
+ color='var(--text-primary)'
+ >
+ Experience how science communication could be. Learn creative and funny ways to communicate difficult topics.
+ Think outside the box and train your skills.
+ </TimelineItem>
+ <TimelineItem
+ date='How to Pitch Your Project'
+ tag='Workshop Session II.'
+ color='var(--text-primary)'
+ >
+ Image you have only three minutes with your boss to sell your idea...
+ After our workshop you learned techniques to sell every pen and even more to every boss on the planet.
+ </TimelineItem>
+ <TimelineItem
+ date='How to Multi Media'
+ tag='Workshop Session II.'
+ color='var(--text-primary)'
+ >
+ Learn the basics of filmmaking and video production.
+ Look behind the scenes and get in touch with professionals.
+ Train your skills to direct iGEM-related videos and movies.
+ </TimelineItem>
+ <TimelineItem
+ date='Panel Discussion'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ >
+ Panel Discussion
+ </TimelineItem>
+ <TimelineItem
+ date='iGEMer Ted Talks'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ >
+ iGEMer Ted Talks
+ </TimelineItem>
+ <TimelineItem
+ date='Science Slam Session'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ >
+ Science Slam Session
+ </TimelineItem>
+ <div className='timeline-end'>
+ Award Ceremony
+ </div>
</div>
+
+ </>
)
}
-
\ No newline at end of file
--
GitLab