From 0d298c2cd3216520e780b8e99b203b2aee6ed57d Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 12 Aug 2024 14:56:27 +0200
Subject: [PATCH] team
---
src/App/App.css | 29 +++++--
src/contents/team.tsx | 198 +++++++++++++++++++++++++++++++++++++++---
2 files changed, 211 insertions(+), 16 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 23501b64..e7d7f288 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -478,6 +478,9 @@ footer a:hover {
/* * * * * * * * * */
/* * * IMAGES * * */
/* * * * * * * * * */
+.teamcolzwei{
+ margin-top: 3rem !important;
+}
img,
picture,
svg {
@@ -500,11 +503,27 @@ img .middle{
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
+
+.team-name{
+ font-size: large;
+ font-weight: bold;
+ text-align: left !important;
+ width: min-content;
+}
.socials{
height: 1.5rem;
width: auto;
margin: 0.5rem;
}
+.team-socials{
+ height: 1rem;
+ width: auto;
+ margin-left: 0.2rem;
+}
+.steckbrief{
+ margin-top: 2rem !important;
+}
+
.spin {
transition: transform 1s ease-in-out;
}
@@ -543,7 +562,7 @@ img .middle{
.img-round{
border-radius: 50%;
- max-width: 80%;
+ max-width: 0%;
}
.img-cube{
max-width: 80%;
@@ -1245,16 +1264,16 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
display: block;
margin-left: auto;
margin-right: auto;
- width: 16rem !important;
+ width: 8rem !important;
max-width: 66% !important;
transition: all 1s ease;
border: 5px solid var(--text-primary);
}
.lnp:hover > img{
display: block;
- margin-left: auto;
- margin-right: auto;
- width: 100% !important;
+ margin-left: none;
+ margin-right: none;
+ width: 25rem !important;
max-width: 100% !important;
}
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index c7816f4a..d688e751 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -7,43 +7,207 @@ export function Team() {
<>
<br/>
<br/>
+ <h2>Team</h2>
<div className="row center">
<div className="col">
<Steckbrief
url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
-
+ name="Anna Baack"
+ job="Job"
>
.
</Steckbrief>
</div>
<div className="col">
- <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Asal Sahami Moghaddam"
+ job="Job"
+ >
+
.
</Steckbrief>
</div>
<div className="col">
- <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Christian Michalek"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ </div>
+ <div className="row center">
+ <div className="col">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Isabell Guckes"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Kai Kanthak"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Kathleen Susat"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ </div>
+ <div className="row center">
+ <div className="col">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Kaya Lange"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Liliana Sanfilippo"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Lisa Wiesner"
+ job="Job"
+ >
.
</Steckbrief>
</div>
</div>
<div className="row center">
<div className="col">
- <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Malte Lenger"
+ job="Job"
+ >
.
</Steckbrief>
</div>
<div className="col">
- <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Michael Gröning"
+ job="Job"
+ >
.
</Steckbrief>
</div>
<div className="col">
- <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Philip Mundt"
+ job="Job"
+ >
.
</Steckbrief>
</div>
</div>
+ <div className="row center">
+ <div className="col">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Vera Köhler"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Vincent Stöckl"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+
+ </div>
+ </div>
+ <h2>Instructor</h2>
+ <div className="row center">
+ <div className="col">
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Sinan Zimmermann"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+
+ </div>
+ <div className="col">
+
+ </div>
+ </div>
+
+ <h2>Advisors</h2>
+ <div className="row center">
+ <div className="col">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Felicitas Zimmer"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Lucas Krause"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+
+ </div>
+ </div>
+ <h2>Principal Investigators</h2>
+ <div className="row center">
+ <div className="col">
+ <Steckbrief
+ url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Jörn Kalinowski"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+ </div>
+ <div className="col">
+
+ </div>
+ <div className="col">
+ <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"
+ name="Kristian Müller"
+ job="Job"
+ >
+ .
+ </Steckbrief>
+
+ </div>
+ </div>
</>
);
}
@@ -53,19 +217,31 @@ interface SteckProps{
name?: string;
url: string;
children: React.ReactNode;
+ job: string,
}
-function Steckbrief({children, url, name}: SteckProps){
+function Steckbrief({children, url, name,job }: SteckProps){
return(
<>
- <div className="lnp center">
- <img src={url} className="img-round"></img>
+ <div className="row steckbrief">
+ <div className="col-7 lnp center">
+ <img src={url} className="img-round"></img>
+ </div>
+ <div className="col teamcolzwei">
+ <div className="center">
+ <p className="team-name">{name}</p>
+ <img className="team-socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin.png"/>
+ </div>
+ <div className="row">
+ {job}
+ </div>
</div>
- <div className="center">
- <p>{name}</p>
</div>
+ <div className="row" style={{marginTop: "1rem"}}>
{children}
+ </div>
+
</>
)
}
--
GitLab