From 22cb0a9622e24cb70a71db03a5f91a633170aa51 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Tue, 6 Aug 2024 14:08:38 +0200
Subject: [PATCH] hp
---
src/App/App.css | 5 +
src/components/HorizontalTimeline.tsx | 14 +-
src/contents/human-practices.tsx | 343 ++++++++++++++++++++++++--
3 files changed, 334 insertions(+), 28 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index dacaeb02..cc29efd6 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -464,6 +464,11 @@ img .middle{
vertical-align:middle;
}
+.sechpro{
+ margin-top: 25% !important;
+ margin-bottom: 20% !important;
+}
+
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 3e4b37a8..e9bf20e5 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -176,7 +176,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Patient",
author: "Max Beckmann",
- tabid: "InvMax",
+ tabid: "InvMax1",
text: " "
},
{
@@ -191,7 +191,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Medical Professional",
- author: "Dr. Christian Olariu",
+ author: "Cristian-Gabriel Olariu",
tabid: "InvOlariu",
text: "Text",
},
@@ -243,12 +243,20 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tabid: "InvKolonko",
text: "Text",
},
+ {
+ title: "Physiotherapie live" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Medical Professional",
+ author: "Katrin Westhoff",
+ tabid: "BesWesthoff",
+ text: "Text",
+ },
{
title: "Hygiene Concept",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Patient",
author: "Max Beckmann",
- tabid: "InvMax",
+ tabid: "InvMax2",
text: " "
},
{
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index c8113db6..f0f69232 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -8,10 +8,51 @@
- Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism)
- DNA Strang als Timeline?
*/
+
+
+/* <br/>
+ <h3>Name</h3>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Tag">
+ Beruf
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p> */
+
+
+/*
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p>
+ */
import { TimeHori } from "../components/HorizontalTimeline";
import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import { TabButtonRow, openTab } from "../components/Buttons";
+import { ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
@@ -49,10 +90,69 @@ let timelinebuttonrowdata = [
let timelinepersontabs =[
{
node: <>
- <h3>Max</h3>
- <p></p>
+ <br/>
+ <h3>Max Beckmann</h3>
+ <h5>First official interview</h5>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Patient">
+ Patient
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p>
+ </>,
+ cssname: "InvMax1"
+ },
+ {
+ node: <>
+ <br/>
+ <h3>Max Beckmann</h3>
+ <h5>Feedback Interview</h5>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Patient">
+ Patient
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p>
</>,
- cssname: "InvMax"
+ cssname: "InvMax2"
},
{
node: <>
@@ -68,7 +168,33 @@ let timelinepersontabs =[
},
{
node: <>
-
+ <br/>
+ <h3>Nicole Friedlein</h3>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Ethics">
+ Phd
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p>
</>,
cssname: "InvFriedlein"
},
@@ -81,14 +207,65 @@ let timelinepersontabs =[
},
{
node: <>
- <h3>Mattijs</h3>
+ <br/>
+ <h3>Mattijs Bulcaen</h3>
+ <hr/>
+ <div className="row">
+ <div className="col-5">
+ <div className="t-tag Academia">
+ Phd. Student (Molecular Virology and Gene Therapy)
+ </div>
+ </div>
+ <div className="col">Original language: English</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
<p></p>
</>,
cssname: "InvBulcaen1"
},
{
node: <>
- <h3>Mattijs</h3>
+ <br/>
+ <h3>Mattijs Bulcaen</h3>
+ <h5>Feedback Interview</h5>
+ <hr/>
+ <div className="row">
+ <div className="col-5">
+ <div className="t-tag Academia">
+ Phd. Student (Molecular Virology and Gene Therapy)
+ </div>
+ </div>
+ <div className="col">Original language: English</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
<p></p>
</>,
cssname: "InvBulcaen2"
@@ -107,14 +284,107 @@ let timelinepersontabs =[
},
{
node: <>
- <h3>Katrin</h3>
+ <br/>
+ <h3>Katrin Westhoff</h3>
+ <h5>Initial Interview</h5>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Medical">
+ Physiotherapist
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="The more we know, the more opportunities we have." cite="Katrin Westhoff"></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p>The objective of the contact was to gain in-depth insights into the treatment and care of children with cystic fibrosis. The therapist's expertise was intended to help develop a better understanding of the challenges and necessary measures in the treatment of this chronic disease. In addition, the aim was to ascertain how the therapy is implemented in everyday life and which specific approaches and methods are particularly effective. </p>
+ <h4>Insights</h4>
+ <p>The interview yielded valuable insights into the regular implementation of the therapy, the use of aids, and the adaptation
+ of exercises to the individual needs of the patients. It was notable that the therapy has improved
+ considerably thanks to better medication and adapted exercises, with a concomitant increase in life
+ expectancy for children affected by cystic fibrosis. Of particular interest was the emphasis
+ on the importance of sport and exercise, which should not only be therapeutically effective, but also increase quality of life. </p>
+ <h4>Clarification</h4>
<p></p>
+ <h4>Implementation</h4>
+ <p>The following statement by Katrin Westhoff had a particularly profound impact on our project: "The more we know, the more opportunities we have."
+ We learned from the interview that the current medication is already helping many patients to a huge
+ extent, but that there is still a significant opportunity for improvement. After all, successful gene
+ therapy would markedly enhance the quality of life for those affected. The findings of this project will
+ be disseminated to the relevant researchers in order to facilitate the rapid improvement of the quality of
+ life of all cystic fibrosis patients, regardless of their mutation. </p>
</>,
cssname: "InvWesthoff"
},
{
node: <>
- <h3>Olariu</h3>
+ <br/>
+ <h3>Katrin Westhoff</h3>
+ <h5>Visit</h5>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Medical">
+ Physiotherapist
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
+ <p></p>
+ </>,
+ cssname: "BesWesthoff"
+ },
+ {
+ node: <>
+ <br/>
+ <h3>Cristian-Gabriel Olariu</h3>
+ <hr/>
+ <div className="row">
+ <div className="col-2">
+ <div className="t-tag Medical">
+ Pediatrician
+ </div>
+ </div>
+ <div className="col">Original language: German</div>
+ </div>
+ <div className="row">
+ <div className="col">
+ <BlockQuoteB text="Quote" cite="."></BlockQuoteB>
+ </div>
+ <div className="col-3">
+ <img className="middle sechpro" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ </div>
+ </div>
+ <h4>Aim of contact</h4>
+ <p></p>
+ <h4>Insights</h4>
+ <p></p>
+ <h4>Clarification</h4>
+ <p></p>
+ <h4>Implementation</h4>
<p></p>
</>,
cssname: "InvOlariu"
@@ -140,6 +410,7 @@ let timelinepersontabs =[
</>,
cssname: "InvHammer"
},
+
]
// die height für className="timeline row align-items-center" muss angepasst werden, damit die Boxen höher sein können
@@ -155,19 +426,9 @@ export function HumanPractices() {
/>
<HPOverview/>
<HPTimeline/>
- <section id="Inspiration" className="section">
- <div className="center">
- <h3 className="col personalstyleone">Inspiration</h3>
+ {/* <HPTabsTwo/> */}
- </div>
- </section>
- <section id="Methods" className="section">
- <div className="center">
- <h3 className="col personalstyleone">Method</h3>
- </div>
- <HPTabsTwo/>
- </section>
<section id="Analysis">
<div className="center" >
<h3 className="col personalstyleone">Analysis</h3>
@@ -185,12 +446,12 @@ export function HumanPractices() {
</section>
-
+{/*
<section id="Implementation" className="section">
<div className="center">
<h3 className="col personalstyleone">Implementation</h3>
</div>
- </section>
+ </section> */}
</div>
@@ -245,7 +506,7 @@ function HPTabs(){
<div></div>
</div> */
-function HPTabsTwo(){
+export function HPTabsTwo(){
return(
<>
@@ -315,8 +576,25 @@ function HPOverview(){
<section id="Overview" className="section">
<div className="center" >
<h3 className="col personalstyleone">Overview</h3>
- </div>
- <div className="col" style={{position: "relative", height: "fit-content"}}>
+ </div>
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Inspiration" open="inspiration"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Methods" open="methods"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Values and goals" open="values"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Stakeholders" open="stakeholders"></ButtonOne>
+ </div>
+ </div>
+ <div className="col cycletab" id="inspiration" style={{display: "block"}}>Hallo </div>
+ <div className="col cycletab" id="values" style={{display: "none"}}>Hallo </div>
+ <div className="col cycletab" id="methods" style={{display: "none"}}>Hallo </div>
+ <div className="col cycletab" id="stakeholders" style={{position: "relative", height: "fit-content", display: "none"}}>
<MindMapTwo></MindMapTwo>
</div>
</section>
@@ -507,3 +785,18 @@ function MindMapTwo(){
)
}
+
+
+export function idTabLine({beruf, tagend, lang}:{beruf: string, tagend: string, lang: string}){
+ let cl = "t-tag " + tagend
+ return(
+ <div className="row">
+ <div className="col-2">
+ <div className={cl}>
+ {beruf}
+ </div>
+ </div>
+ <div className="col"> Original language: {lang}</div>
+ </div>
+ )
+}
\ No newline at end of file
--
GitLab