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){
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;
......
src/components/HorizontalTimeline.tsx
+ 35
− 2
View file @ f950e385
......@@ -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",
......
src/contents/human-practices.tsx
+ 147
− 27
View file @ f950e385
......@@ -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(
......
src/pages.ts
+ 1
− 1
View file @ f950e385
......@@ -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",
......
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