From f950e38565b2750aee0af81995b2e065fe793aa2 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 29 Jul 2024 21:51:12 +0200
Subject: [PATCH] sidebars
---
src/App/App.css | 6 +-
src/components/HorizontalTimeline.tsx | 37 +++++-
src/contents/human-practices.tsx | 174 ++++++++++++++++++++++----
src/pages.ts | 2 +-
4 files changed, 188 insertions(+), 31 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index ecdf0f37..3e3e805c 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -944,7 +944,7 @@ button.tabbutton:nth-child(1){
background-color: var(--accent-primary);
}
-.Academia, button.tabbutton:nth-child(4){
+.Academia, .Research, button.tabbutton:nth-child(4){
background-color: var(--lightblue);
}
@@ -955,6 +955,10 @@ button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen);
}
+.Ethics{
+ background-color: var(--offblack);
+}
+
.timelineolli {
position: relative;
display: inline-block;
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 61587329..3e4b37a8 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -177,7 +177,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tag: "Patient",
author: "Max Beckmann",
tabid: "InvMax",
- text: " "},
+ text: " "
+ },
{
title: "Physiotherapie" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
@@ -194,6 +195,22 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tabid: "InvOlariu",
text: "Text",
},
+ {
+ title: "" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Patient",
+ author: "Julia",
+ tabid: "InvJulia",
+ text: "Text",
+ },
+ {
+ title: "" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Ethics",
+ author: "Nicole Friedlein",
+ tabid: "InvFriedlein",
+ text: "Text",
+ },
{
title: "Approach??" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
@@ -217,7 +234,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
author: "Mattijs Bulcaen",
tabid: "InvBulcaen1",
text: "Text",
- }
+ },
{
title: "First Steps in LNP" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
@@ -226,6 +243,22 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tabid: "InvKolonko",
text: "Text",
},
+ {
+ title: "Hygiene Concept",
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Patient",
+ author: "Max Beckmann",
+ tabid: "InvMax",
+ text: " "
+ },
+ {
+ title: "" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Patient",
+ author: "Joshua",
+ tabid: "InvJoshua",
+ text: "Text",
+ },
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index b0d266c7..f3158c6b 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -13,8 +13,9 @@ import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
-
-
+import { Box, Tab } from "@mui/material";
+import {TabContext, TabList, TabPanel} from '@mui/lab';
+import React from "react";
let timelinebuttonrowdata = [
@@ -69,7 +70,7 @@ let timelinepersontabs =[
node: <>
</>,
- cssname: "Friedlein"
+ cssname: "InvFriedlein"
},
{
node: <>
@@ -83,13 +84,26 @@ let timelinepersontabs =[
<h3>Mattijs</h3>
<p></p>
</>,
- cssname: "InvBulcaen"
+ cssname: "InvBulcaen1"
+ },
+ {
+ node: <>
+ <h3>Mattijs</h3>
+ <p></p>
+ </>,
+ cssname: "InvBulcaen2"
},
{
node: <>
</>,
- cssname: "Eltern"
+ cssname: "InvJulia"
+ },
+ {
+ node: <>
+
+ </>,
+ cssname: "InvJoshua"
},
{
node: <>
@@ -138,48 +152,154 @@ export function HumanPractices() {
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
/>
- <section id="Overview" className="section">
- <div className="center" >
- <h3 className="col personalstyleone">Overview</h3>
- </div>
- <div className="col" style={{position: "relative", height: "fit-content"}}>
- <MindMapTwo></MindMapTwo>
- </div>
- </section>
- <section id="Timeline" className="section">
+ <HPOverview/>
+ <HPTimeline/>
+ <section id="Inspiration" className="section">
<div className="center">
- <h3 className="col personalstyleone">Timeline</h3>
+ <h3 className="col personalstyleone">Inspiration</h3>
</div>
- <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
- <AllPopus></AllPopus>
- <ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
- <BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
</section>
+ <section id="Methods" className="section">
+ <div className="center">
+ <h3 className="col personalstyleone">Methods</h3>
+ </div>
+ </section>
+ <section id="Analysis">
+ <div className="center" >
+ <h3 className="col personalstyleone">Analysis</h3>
+ </div>
+ <HPTabs/>
+ </section>
+
+
+
<section id="Reflection" >
<div className="center">
<h3 className="col personalstyleone">Reflection Framework</h3>
</div>
+ <HPTabsTwo/>
</section>
- <section id="Feedback" className="section">
+ <section id="Implementation" className="section">
<div className="center">
- <h3 className="col personalstyleone">Feedback Cycle</h3>
+ <h3 className="col personalstyleone">Implementation</h3>
</div>
</section>
-
- <section id="Surveys" className="section">
- <div className="center">
- <h3 className="col personalstyleone">Surveys</h3>
- </div>
- </section>
+
</div>
);
}
+function HPTabs(){
+ const [value, setValue] = React.useState('1');
+
+ const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
+ setValue(newValue);
+ };
+ return(
+ <Box sx={{ width: '100%', typography: 'body1' }}>
+ <TabContext value={value}>
+ <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+ <TabList onChange={handleChange} aria-label="lab API tabs example">
+ <Tab label="Patient Needs" value="1" />
+ <Tab label="Scientific Challenges" value="2" />
+ <Tab label="Academic consideration" value="3" />
+ <Tab label="Ethical questions" value="4" />
+ <Tab label="Medical perspectives" value="5" />
+
+
+ </TabList>
+ </Box>
+ <TabPanel value="1"> </TabPanel>
+ <TabPanel value="2"> </TabPanel>
+ <TabPanel value="3"> </TabPanel>
+ <TabPanel value="4"> </TabPanel>
+ <TabPanel value="5"> </TabPanel>
+ </TabContext>
+ </Box>
+ )
+}
+
+function HPTabsTwo(){
+ const [value, setValue] = React.useState('1');
+
+ const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
+ setValue(newValue);
+ };
+ return(
+ <>
+ <Box sx={{ width: '100%', typography: 'body1' }}>
+ <TabContext value={value}>
+ <div className="row align-items-center">
+ <div className="col-3">
+ <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+ <TabList onChange={handleChange} aria-label="lab API tabs example">
+ <Tab label="Patient Needs" value="1" />
+ <Tab label="Scientific Challenges" value="2" />
+ <Tab label="Academic consideration" value="3" />
+ <Tab label="Ethical questions" value="4" />
+ <Tab label="Medical perspectives" value="5" />
+ </TabList>
+ </Box>
+ </div>
+ <div className="col">
+ <TabPanel value="1"> 1 </TabPanel>
+ <TabPanel value="2"> 2 </TabPanel>
+ <TabPanel value="3"> 3 </TabPanel>
+ <TabPanel value="4"> 4 </TabPanel>
+ <TabPanel value="5"> 5 </TabPanel>
+ </div>
+ </div>
+ </TabContext>
+ </Box>
+ </>
+ )
+}
+{/*
+
+
+
+
+
+
+ */}
+
+/* <Tab label="Problem" value="1" />
+ <Tab label="Influence" value="5" />
+ <Tab label="Patient Needs" value="2" />
+ <Tab label="Scientific Challenges" value="3" />
+ <Tab label="Surveys" value="4" /> */
+
+function HPOverview(){
+ return(
+ <section id="Overview" className="section">
+ <div className="center" >
+ <h3 className="col personalstyleone">Overview</h3>
+ </div>
+ <div className="col" style={{position: "relative", height: "fit-content"}}>
+ <MindMapTwo></MindMapTwo>
+ </div>
+ </section>
+ )
+}
+
+function HPTimeline(){
+ return(
+ <section id="Timeline" className="section">
+ <div className="center">
+ <h3 className="col personalstyleone">Timeline</h3>
+ </div>
+ <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
+ <AllPopus></AllPopus>
+ <ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
+ <BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
+ </section>
+ )
+}
function MindMapTwo(){
return(
diff --git a/src/pages.ts b/src/pages.ts
index ee334517..f0705c37 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -133,7 +133,7 @@ const Pages: (Page | Folder)[] = [
path: "/human-practices",
component: HumanPractices,
header: HPH,
- navlist: ["Overview", "Timeline", "Reflection", "Feedback", "Surveys"],
+ navlist: ["Overview", "Timeline", "Inspiration", "Methods", "Analysis", "Reflection", "Implementation"],
},
{
name: "Home",
--
GitLab