From bab6669d2bc7cf9984b3ad78090b476e9a89cc90 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 21 Sep 2024 20:20:53 +0200
Subject: [PATCH] steckbriefe
---
src/App/App.css | 32 +++-
src/components/data/steckbriefe.ts | 28 +--
src/contents/team.tsx | 274 +++++++++++++----------------
3 files changed, 161 insertions(+), 173 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 2f7d0fa9..438e31e9 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -705,12 +705,18 @@ img .middle{
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
-
+.pronouns{
+ font-size: 1rem !important;
+ font-style: italic !important;
+}
.team-name{
- font-size: large;
+ font-size: 1.6rem !important;
font-weight: bold;
text-align: left !important;
- width: min-content;
+ width: fit-content !important;
+}
+.team-img{
+ border-radius: 50% !important;
}
.socials{
height: 2rem;
@@ -725,6 +731,25 @@ img .middle{
.steckbrief{
margin-top: 2rem !important;
}
+.steckbrief-box{
+ height: fit-content;
+ padding: 10px;
+ border-radius: 30px;
+ box-shadow: 3px 3px 5px gray !important;
+}
+.steckbody{
+ height: 190px !important;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+.brieffacts{
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: 270px !important;
+}
+.briefbutton{
+
+}
.spin {
transition: transform 1s ease-in-out;
@@ -3679,4 +3704,3 @@ a{
margin-left: 0 !important;
padding-left: 10px !important;
}
-
diff --git a/src/components/data/steckbriefe.ts b/src/components/data/steckbriefe.ts
index a347473a..6c910c6a 100644
--- a/src/components/data/steckbriefe.ts
+++ b/src/components/data/steckbriefe.ts
@@ -1,4 +1,4 @@
-interface Steckbrief{
+export interface SteckbriefInterface{
title?: string; /* Dr. oder Prof. oder so bei Jörn und so*/
vorname: string;
nachname: string;
@@ -9,16 +9,16 @@ interface Steckbrief{
pronouns: string;
studiengang: string;
headof?: string; /* Nur Team angeben, nicht "Head of" dazuschreiben */
- igemjob: string | Array<string>;
+ igemjob: Array<string>;
whyigem: string | Array<string>;
bestpart: string | Array<string>;
biggestchallenge: string | Array<string>;
- funfacts:string | Array<string>;
+ funfacts: Array<string>;
favmusic: string;
islands: string | Array<string>; /* Is there a particular book, movie or series that has influenced your view of science? */
onechange: string | Array<string>; /* If you had the opportunity to change one thing in the world of science, what would it be and why? */
hobbies: Array<string>; /* Hobbies/interests outside of science */
- scientificinterests: string | Array<string> ; /* Scientific interest/research focus [keywords] */
+ scientificinterests: string ; /* Scientific interest/research focus [keywords] */
}
@@ -63,7 +63,7 @@ Vorlage Datensatz:
*/
-export const teammembers: Array<Steckbrief> = [
+export const teammembers: Array<SteckbriefInterface> = [
{
title: "B.Sc.",
vorname: "Anna",
@@ -567,7 +567,7 @@ export const teammembers: Array<Steckbrief> = [
"The biggest challenge definitely is to handle the neverending amount of tasks, most of which are completely new challenges you have to learn by yourself",
],
favmusic: "Technoo",
- funfacts: "XXX",
+ funfacts: ["XXX"],
islands: [
"a saw",
"a metal pot",
@@ -673,7 +673,7 @@ export const teammembers: Array<Steckbrief> = [
},
]
-export const advisors: Array<Steckbrief> = [
+export const advisors: Array<SteckbriefInterface> = [
{
vorname: "Felicitas",
@@ -682,7 +682,7 @@ export const advisors: Array<Steckbrief> = [
pronouns: "she/her",
studiengang: "M.Sc. Molecular Cell Biology",
headof: "XXX",
- igemjob: "XXX",
+ igemjob: ["XXX"],
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
@@ -709,7 +709,7 @@ export const advisors: Array<Steckbrief> = [
pronouns: "he/him",
studiengang: "Molecular Biotechnology",
headof: "XXX",
- igemjob: "XXX",
+ igemjob: ["XXX"],
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
@@ -780,7 +780,7 @@ export const advisors: Array<Steckbrief> = [
bestpart: [
"The joy of discovery motivates me. The satisfaction of troubleshooting an experiment until it finally works keeps me going. I enjoy unraveling new findings and the process of problem-solving fuels my passion for research",
],
- igemjob: "XXX",
+ igemjob: ["XXX"],
biggestchallenge: [
"XXX"
],
@@ -809,7 +809,7 @@ export const advisors: Array<Steckbrief> = [
pronouns: "he/him",
studiengang: "Molecular Biotechnology",
headof: "XXX",
- igemjob: "XXX",
+ igemjob: ["XXX"],
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
@@ -828,7 +828,7 @@ export const advisors: Array<Steckbrief> = [
}
]
-export const instructor: Array<Steckbrief> = [
+export const instructor: Array<SteckbriefInterface> = [
{
title: "M.Sc.",
@@ -875,7 +875,7 @@ export const instructor: Array<Steckbrief> = [
},
]
-export const pis: Array<Steckbrief> = [
+export const pis: Array<SteckbriefInterface> = [
{
title: "Prof. Dr.",
@@ -919,7 +919,7 @@ export const pis: Array<Steckbrief> = [
pronouns: "he/him",
studiengang: "Research Group Leader - Molecular and Cellular Biotechnology",
headof: "Second Principle Investigator",
- igemjob: "Technical Facility of Bielefeld University",
+ igemjob: ["Technical Facility of Bielefeld University"],
whyigem: [
"The combination of fun and progress",
],
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index 2e4dc499..31d4f335 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -1,148 +1,21 @@
+import { SteckbriefInterface, teammembers } from "../components/data/steckbriefe";
import { H2 } from "../components/Headings";
+import { LoremMedium } from "../components/Loremipsum";
import { useNavigateTabs } from "../utils/navigation";
export function Team() {
useNavigateTabs();
-
+ let teambriefe = createSteckbriefe(teammembers);
return (
<>
<br/>
+
<br/>
<H2 text="Members" id="members"/>
- <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"
- name="Asal Sahami Moghaddam"
- job="Job"
- >
-
- .
- </Steckbrief>
- </div>
- <div className="col">
- <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"
- name="Malte Lenger"
- job="Job"
- >
- .
- </Steckbrief>
- </div>
- <div className="col">
- <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"
- 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>
+ {teambriefe}
+
+
+
<H2 text="Instructor" id="instructor"/>
<div className="row center">
<div className="col">
@@ -220,27 +93,118 @@ interface SteckProps{
}
-function Steckbrief({children, url, name,job }: SteckProps){
+function createSteckbriefe(data: Array<SteckbriefInterface>){
+ let briefe = []
+ for (let index = 0; index < data.length; index++) {
+ let thename = "" + data[index].vorname + data[index].nachname;
+ // Conditional head of
+ var headof = <></>;
+ if(data[index].headof){
+ var headof = <div className="">Head of: {data[index].headof} <br/> </div>;
+ }
+ // Jobs
+ var jobs = "";
+ for (let i = 0; i < data[index].igemjob.length; i++) {
+ if (i + 1 === data[index].igemjob.length ) {
+ jobs += " and " + data[index].igemjob[i];
+ }
+ else if (i === 0 ) {
+ jobs += data[index].igemjob[i];
+ }
+ else{
+ jobs += data[index].igemjob[i] + ", ";
+ }
+ }
+ // Funfacts
+ var funfacts = [];
+ for (let i = 0; i < data[index].funfacts.length; i++) {
+ funfacts.push(<li> {data[index].funfacts[i]} </li>);
+ }
+ // Hobbies
+ var hobbs = "";
+ for (let i = 0; i < data[index].hobbies.length; i++) {
+ if (i + 1 === data[index].igemjob.length ) {
+ hobbs += " and " + data[index].hobbies[i];
+ }
+ else if (i === 0 ) {
+ hobbs += data[index].hobbies[i];
+ }
+ else{
+ hobbs += data[index].hobbies[i] + ", ";
+ }
+ }
+ let frontbriefclass = "frontbrief frontbrief"+thename;
+ let backbriefclass = "backbrief backbrief"+thename;
+
+ let picture = <div className="col-2 lnp center"><img src={data[index].zweitfoto} style={{display: "none"}} className={"img team-img "+backbriefclass}/><img src={data[index].hauptfoto} className={"img team-img "+frontbriefclass}></img></div>
+ let namerow = <div className="row"><div className="team-name"> {data[index].title} {data[index].vorname} {data[index].nachname} <span className="pronouns"> {data[index].pronouns} </span> </div> <div className="col"> <a href={data[index].linkedinurl}> <img className="team-socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin.png" /> </a></div> </div>;
+ let frontparagraph = <div className={"row " + frontbriefclass}> <p>"As an international student, iGEM offers me a unique opportunity to not only expand and deepen my scientific experience by working with a research team but also to enhance my social communication skills within my scientific field",</p> </div> ;
+ let facts = <div className={frontbriefclass}><div className="">Age: {data[index].age} </div> <br/> {headof} <div>Part of: {jobs}</div> <br/> <div className=""> Major: {data[index].studiengang} </div> <br/> <div className=""> Scientific interests: {data[index].scientificinterests} </div> </div>;
+ let backbutton = <div className={backbriefclass + " briefbutton"} style={{display: "none"}}><button onClick={flipBack(thename)} >Click me</button></div>
+ let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
+ let favmusic = <><h6>Favourite music:</h6><p>{data[index].favmusic}</p></>
+ let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
+ let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div>
+ let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
+ let frontbutton = <button onClick={flip(thename)} className={frontbriefclass+ " briefbutton"}>Click me</button>
+ let hole =
+ <div>
+ <div className="row steckbrief"> {picture}
+ <div className="col-5">
+ <div className="row"> {namerow}
+ <hr/>
+ </div>
+ {paragraphs}
+ </div>
+ <div className="col-4 brieffacts">
+ <br/><br/> {funfactlist} {facts}
+ </div>
+ </div> <div className="row" style={{marginTop: "1rem", marginBottom: "1rem"}}> <div className="col-2"> {frontbutton} {backbutton}</div> <div className="col"><details className={frontbriefclass} ><summary> <b>Personal motivation and challenges</b> </summary><div> <LoremMedium/></div></details></div> </div>
+ </div>
+ let whole = <div className={"steckbrief-box"} id={thename}> {hole} </div>;
+ briefe.push(whole);
+ }
+ return briefe;
+}
+
+
+
+function Steckbrief({children, url, name,job }: SteckProps){
+ let thename = "" + name;
return(
- <>
- <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>
- <div className="row" style={{marginTop: "1rem"}}>
- {children}
- </div>
+ <div className={"steckbrief-box"} id={thename}>
+
+ {/* front */}
+ {/* back */}
- </>
+ </div>
)
}
+
+function flip(element: string){
+ const flipp = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ let elementsToHide = document.getElementsByClassName("frontbrief"+element);
+ for (let i = 0; i < elementsToHide.length; i++) {
+ (elementsToHide[i] as HTMLElement).style.display = "none";
+ }
+ let elementsToFind = document.getElementsByClassName("backbrief"+element);
+ for (let i = 0; i < elementsToFind.length; i++) {
+ (elementsToFind[i] as HTMLElement).style.display = "block";
+ }
+ }
+ return flipp;
+}
+
+function flipBack(element: string){
+ const flippback = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ let elementsToHide = document.getElementsByClassName("backbrief"+element);
+ for (let i = 0; i < elementsToHide.length; i++) {
+ (elementsToHide[i] as HTMLElement).style.display = "none";
+ }
+ let elementsToFind = document.getElementsByClassName("frontbrief"+element);
+ for (let i = 0; i < elementsToFind.length; i++) {
+ (elementsToFind[i] as HTMLElement).style.display = "block";
+ }
+ }
+ return flippback;
+}
\ No newline at end of file
--
GitLab