From d0cb4b4268a9e4ba0c6e7601274893c9fee3efdc Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 21 Sep 2024 20:31:31 +0200
Subject: [PATCH] steckbriefe
---
src/App/App.css | 13 +++++++++++--
src/contents/team.tsx | 7 ++++---
2 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 438e31e9..649aa37b 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -747,8 +747,17 @@ img .middle{
overflow-x: hidden;
height: 270px !important;
}
-.briefbutton{
-
+.frontbutton, .backbutton{
+ background-color: var(--mediumpurple) !important;
+ color: var(--background) !important;
+ padding: 5px;
+ border-radius: 10px;
+ margin: auto;
+
+}
+.parent-button{
+ display: flex;
+ align-items: center !important;
}
.spin {
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index 31d4f335..6cff0195 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -100,7 +100,7 @@ function createSteckbriefe(data: Array<SteckbriefInterface>){
// Conditional head of
var headof = <></>;
if(data[index].headof){
- var headof = <div className="">Head of: {data[index].headof} <br/> </div>;
+ var headof = <><div className="">Head of: {data[index].headof} </div> <br/></>;
}
// Jobs
var jobs = "";
@@ -140,13 +140,14 @@ function createSteckbriefe(data: Array<SteckbriefInterface>){
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 backbutton = <div className={backbriefclass} style={{display: "none"}}> <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></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 frontbutton = <div className={frontbriefclass}> <div className="parent-button"><button onClick={flip(thename)} className="frontbutton">Click me</button></div></div>
+
let hole =
<div>
<div className="row steckbrief"> {picture}
--
GitLab