Skip to content
Snippets Groups Projects
Commit f950e385 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

sidebars

parent 29b7a8d7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App/App.css
+ 5
− 1
View file @ f950e385
...@@ -944,7 +944,7 @@ button.tabbutton:nth-child(1){ ...@@ -944,7 +944,7 @@ button.tabbutton:nth-child(1){
background-color: var(--accent-primary); background-color: var(--accent-primary);
} }
.Academia, button.tabbutton:nth-child(4){ .Academia, .Research, button.tabbutton:nth-child(4){
background-color: var(--lightblue); background-color: var(--lightblue);
} }
...@@ -955,6 +955,10 @@ button.tabbutton:nth-child(6){ ...@@ -955,6 +955,10 @@ button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen); background-color: var(--igemlightgreen);
} }
.Ethics{
background-color: var(--offblack);
}
.timelineolli { .timelineolli {
position: relative; position: relative;
display: inline-block; display: inline-block;
......
src/components/HorizontalTimeline.tsx
+ 35
− 2
View file @ f950e385
...@@ -177,7 +177,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -177,7 +177,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tag: "Patient", tag: "Patient",
author: "Max Beckmann", author: "Max Beckmann",
tabid: "InvMax", tabid: "InvMax",
text: " "}, text: " "
},
{ {
title: "Physiotherapie" , title: "Physiotherapie" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg", pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
...@@ -194,6 +195,22 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -194,6 +195,22 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tabid: "InvOlariu", tabid: "InvOlariu",
text: "Text", 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??" , title: "Approach??" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg", pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
...@@ -217,7 +234,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -217,7 +234,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
author: "Mattijs Bulcaen", author: "Mattijs Bulcaen",
tabid: "InvBulcaen1", tabid: "InvBulcaen1",
text: "Text", text: "Text",
} },
{ {
title: "First Steps in LNP" , title: "First Steps in LNP" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg", pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
...@@ -226,6 +243,22 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -226,6 +243,22 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tabid: "InvKolonko", tabid: "InvKolonko",
text: "Text", 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: "" , title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg", pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
......
src/contents/human-practices.tsx
+ 147
− 27
View file @ f950e385
...@@ -13,8 +13,9 @@ import { AllPopus } from "../components/HorizontalTimeline"; ...@@ -13,8 +13,9 @@ import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs"; import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { TabButtonRow, openTab } from "../components/Buttons"; import { TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes"; import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
import React from "react";
let timelinebuttonrowdata = [ let timelinebuttonrowdata = [
...@@ -69,7 +70,7 @@ let timelinepersontabs =[ ...@@ -69,7 +70,7 @@ let timelinepersontabs =[
node: <> node: <>
</>, </>,
cssname: "Friedlein" cssname: "InvFriedlein"
}, },
{ {
node: <> node: <>
...@@ -83,13 +84,26 @@ let timelinepersontabs =[ ...@@ -83,13 +84,26 @@ let timelinepersontabs =[
<h3>Mattijs</h3> <h3>Mattijs</h3>
<p></p> <p></p>
</>, </>,
cssname: "InvBulcaen" cssname: "InvBulcaen1"
},
{
node: <>
<h3>Mattijs</h3>
<p></p>
</>,
cssname: "InvBulcaen2"
}, },
{ {
node: <> node: <>
</>, </>,
cssname: "Eltern" cssname: "InvJulia"
},
{
node: <>
</>,
cssname: "InvJoshua"
}, },
{ {
node: <> node: <>
...@@ -138,48 +152,154 @@ export function HumanPractices() { ...@@ -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." 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" cite="- Peter Carr, Director of Judging"
/> />
<section id="Overview" className="section"> <HPOverview/>
<div className="center" > <HPTimeline/>
<h3 className="col personalstyleone">Overview</h3> <section id="Inspiration" className="section">
</div>
<div className="col" style={{position: "relative", height: "fit-content"}}>
<MindMapTwo></MindMapTwo>
</div>
</section>
<section id="Timeline" className="section">
<div className="center"> <div className="center">
<h3 className="col personalstyleone">Timeline</h3> <h3 className="col personalstyleone">Inspiration</h3>
</div> </div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
<AllPopus></AllPopus>
<ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
<BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
</section> </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" > <section id="Reflection" >
<div className="center"> <div className="center">
<h3 className="col personalstyleone">Reflection Framework</h3> <h3 className="col personalstyleone">Reflection Framework</h3>
</div> </div>
<HPTabsTwo/>
</section> </section>
<section id="Feedback" className="section"> <section id="Implementation" className="section">
<div className="center"> <div className="center">
<h3 className="col personalstyleone">Feedback Cycle</h3> <h3 className="col personalstyleone">Implementation</h3>
</div> </div>
</section> </section>
<section id="Surveys" className="section">
<div className="center">
<h3 className="col personalstyleone">Surveys</h3>
</div>
</section>
</div> </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(){ function MindMapTwo(){
return( return(
......
src/pages.ts
+ 1
− 1
View file @ f950e385
...@@ -133,7 +133,7 @@ const Pages: (Page | Folder)[] = [ ...@@ -133,7 +133,7 @@ const Pages: (Page | Folder)[] = [
path: "/human-practices", path: "/human-practices",
component: HumanPractices, component: HumanPractices,
header: HPH, header: HPH,
navlist: ["Overview", "Timeline", "Reflection", "Feedback", "Surveys"], navlist: ["Overview", "Timeline", "Inspiration", "Methods", "Analysis", "Reflection", "Implementation"],
}, },
{ {
name: "Home", name: "Home",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment