Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Commits on Source (540)
440 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 625 additions and 620 deletions
.gitignore
View file @ 3fd292fd
...@@ -18,3 +18,5 @@ code/test.bib ...@@ -18,3 +18,5 @@ code/test.bib
.DS_Store .DS_Store
code/test file gitignore.txt code/test file gitignore.txt
src/.DS_Store src/.DS_Store
vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
vite.config.js.timestamp-1733161862061-488217339257e.mjs
src/.DS_Store
View file @ 3fd292fd
No preview for this file type
src/App/App.css
View file @ 3fd292fd
This diff is collapsed.
src/App/App.tsx
View file @ 3fd292fd
...@@ -81,10 +81,10 @@ const App = () => { ...@@ -81,10 +81,10 @@ const App = () => {
<> <>
<Header /> <Header />
{/* Page content */} {/* Page content */}
<div className="container-fluid"> <div className="container-fluid" >
<div className="row"> <div className="row">
<Sidebar /> <Sidebar/>
<div className="full-col-phone col-9"> <div className="full-col-phone col-9 max-1240">
<Component /> <Component />
<Villbuttonrow /> <Villbuttonrow />
</div> </div>
......
src/App/Timelines.css
View file @ 3fd292fd
...@@ -7,10 +7,11 @@ ...@@ -7,10 +7,11 @@
white-space: nowrap; white-space: nowrap;
min-height: 700px; min-height: 700px;
width: 75vw; width: 75vw;
overflow-x: auto; overflow-x: auto !important;
overflow-y: hidden; max-width: inherit !important;
overflow-y: hidden !important;
width: 100%;
background-color: inherit; background-color: inherit;
font-size: 1rem;
/* align items center */ /* align items center */
align-items: center !important; align-items: center !important;
/* row */ /* row */
...@@ -184,7 +185,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){ ...@@ -184,7 +185,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen); background-color: var(--igemlightgreen);
} }
.Ethics{ .Other{
background-color: var(--offblack); background-color: var(--offblack);
} }
......
src/App/mediarules.css
View file @ 3fd292fd
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
align-items: center; align-items: center;
} }
h1 {
font-size: 2rem;
}
.col-6 { .col-6 {
width: 100%; /* Full width on tablets */ width: 100%; /* Full width on tablets */
...@@ -132,6 +129,26 @@ ...@@ -132,6 +129,26 @@
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/ /***Biosafty***/
#safehead { #safehead {
background-size: contain; /* Adjust the image to fit within the container */ background-size: contain; /* Adjust the image to fit within the container */
...@@ -177,12 +194,6 @@ ...@@ -177,12 +194,6 @@
width: 50% !important; width: 50% !important;
} }
/***Description***/ /***Description***/
#Cystic\ Fibrosis6 h2 {
font-size: 1.5em !important;
}
#Our\ Vision h2 {
font-size: 1 em !important;
}
.pie-chart-container-small { .pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */ width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */ height: 300px !important; /* Adjust height accordingly */
...@@ -262,9 +273,6 @@ ...@@ -262,9 +273,6 @@
.winner{ .winner{
font-size: x-large; font-size: x-large;
} }
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{ .small-only{
display: block !important; display: block !important;
} }
...@@ -304,13 +312,6 @@ svg text{ ...@@ -304,13 +312,6 @@ svg text{
padding-top: 10px; padding-top: 10px;
padding-bottom: 5px; padding-bottom: 5px;
} }
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle { .bigtitle {
width: 450px !important; width: 450px !important;
height: 200px !important; height: 200px !important;
...@@ -345,36 +346,26 @@ body { ...@@ -345,36 +346,26 @@ body {
display: grid !important; display: grid !important;
} }
.h4{
margin-top: 5px;
color: var(--offblack) !important;
margin-top: 10px !important ;
font-size: medium !important;
color:#444;
word-spacing:1px;
font-weight:normal;
letter-spacing: 0px !important;
text-align: justify !important;
/* text-transform: uppercase; */
font-weight: 900 !important;
display: grid;
grid-template-columns:none;
grid-template-rows: 0px 0;
grid-gap: 20px !important;
align-items: center;
}
.h2{
font-size: large !important;
font-weight: 900 !important;
grid-template-columns: none;
}
.full-col-phone{ .full-col-phone{
width: 100vw !important; width: 100vw !important;
} }
} }
/*For small Smartphones*/ /*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 750px){ @media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 100% !important; /* Full width on small screens */
height: 10% !important; /* Maintain aspect ratio */
max-width: 100% !important; /* Limit the image width to fit the screen */
margin: 0 auto; /* Center the image horizontally */
overflow: visible !important;
}
.figure-wrapper:first-of-type img{
text-align: center; /* Ensure the figure caption is centered */
}
} }
/* Big computer screens */ /* Big computer screens */
......
src/components/.DS_Store
View file @ 3fd292fd
No preview for this file type
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
...@@ -326,7 +326,7 @@ export function BFHTimeline () { ...@@ -326,7 +326,7 @@ export function BFHTimeline () {
<p> <p>
Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them
using the skills learned in this workshop. Our team revised their plans for explaining gene editing to using the skills learned in this workshop. Our team revised their plans for explaining gene editing to
children and started developing experiments to help them better understand cystic fibrosis, which we children and started developing experiments to help them better understand Cystic Fibrosis, which we
presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local
population with regional companies and institutes to inform them about their work - including our iGEM team! population with regional companies and institutes to inform them about their work - including our iGEM team!
</p> </p>
......
src/components/Breathe.tsx
View file @ 3fd292fd
...@@ -94,13 +94,13 @@ export function Breathe(){ ...@@ -94,13 +94,13 @@ export function Breathe(){
'opacity': `${isVisible ? '1' : '0'}`, 'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}` 'visibility': `${isVisible ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp"> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img> </img>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}> <div style={{ 'height': '100vh'}} ref={domRef2}>
<p style={{'fontSize' : '2.5em'}}>Take a moment to</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
...@@ -111,13 +111,13 @@ export function Breathe(){ ...@@ -111,13 +111,13 @@ export function Breathe(){
'scale': `${isVisible2 ? '1' : '0'}`, 'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}` 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}> <div style={{ 'height': '100vh'}} ref={domRef3}>
<p style={{'fontSize' : '2.5em'}}>and deeply.</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>breathe out...</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
...@@ -128,17 +128,17 @@ export function Breathe(){ ...@@ -128,17 +128,17 @@ export function Breathe(){
'scale': `${isVisible3 ? '0' : '1'}`, 'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}` 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p> <p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'fontSize' : '2.5em'}}>Your body and mind</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}> <div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
...@@ -150,7 +150,7 @@ export function Breathe(){ ...@@ -150,7 +150,7 @@ export function Breathe(){
'scale': `${isVisible4 ? '1' : '0'}`, 'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}` 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
</div> </div>
{/* black */} {/* black */}
...@@ -168,7 +168,7 @@ export function Breathe(){ ...@@ -168,7 +168,7 @@ export function Breathe(){
'opacity': `${isVisible5 ? '1' : '0'}`, 'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}` 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp"> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img> </img>
<div style={{ 'height': '100vh'}} ref={domRef6}> <div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{ <img style={{
...@@ -179,10 +179,10 @@ export function Breathe(){ ...@@ -179,10 +179,10 @@ export function Breathe(){
'height': '60vh', 'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}` 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div> </div>
<p style={{'fontSize' : '2.5em'}}>Not everyone </p> <p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p> {/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p> <p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */} <p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
...@@ -196,13 +196,13 @@ export function Breathe(){ ...@@ -196,13 +196,13 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`, 'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}` 'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p> <p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p> <p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div> </div>
{/* grey */} {/* grey */}
<div <div
...@@ -219,14 +219,14 @@ export function Breathe(){ ...@@ -219,14 +219,14 @@ export function Breathe(){
'opacity': `${isVisible8 ? '1' : '0'}`, 'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}` 'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp"> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img> </img>
</div> </div>
<p style={{'fontSize' : '2.5em'}}>texttexttext</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p style={{'fontSize' : '2.5em'}}>texttexttext,</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p> <p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p> <p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
</> </>
......
src/components/Buttons.tsx
View file @ 3fd292fd
...@@ -31,7 +31,7 @@ export function Villbuttonrow(){ ...@@ -31,7 +31,7 @@ export function Villbuttonrow(){
<div className="small-row align-items-center bottom-buttons"> <div className="small-row align-items-center bottom-buttons">
<Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton> <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
<Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton> <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton> <Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
<Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton> <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
<Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton> <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
<Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton> <Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
...@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps ...@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
if (!classy){ if (!classy){
classy = "" classy = ""
} }
let classname = "tabbutton " + type + " " + classy; let classname = "btn1 tabbutton " + type + " " + classy;
return( return(
<> <>
<button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button> <button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
...@@ -144,23 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps ...@@ -144,23 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
) )
} }
export function HPMoreButton({name}: {name: string}){
let c = "timelinepersontabs"
return(
<button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button>
)
}
export function BFHMoreButton({it}: {it: string}){ export function BFHMoreButton({it}: {it: string}){
return( return(
<button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button> <button className="tablinks btn1" onClick={expandIt({it})}> More</button>
) )
} }
export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){ export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
const {goToPageWithTabAndScroll} = useNavigation(); const {goToPageWithTabAndScroll} = useNavigation();
return( return(
<button className="tablinks bfh-more-button" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button> <button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
) )
} }
...@@ -180,48 +175,17 @@ function expandIt({it}: {it: string}){ ...@@ -180,48 +175,17 @@ function expandIt({it}: {it: string}){
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-two">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){ export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
const { goToPagesAndOpenTab } = useNavigation(); const { goToPagesAndOpenTab } = useNavigation();
if (openclass) { if (openclass) {
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
<a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
) )
} }
else{ else{
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
</div>
) )
} }
} }
...@@ -230,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str ...@@ -230,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
const { goToPageWithTabAndScroll } = useNavigation(); const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) { if (openclass) {
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
<a onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
) )
} }
else{ else{
...@@ -254,12 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str ...@@ -254,12 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){ export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
<span typeof="button" onClick={openThem({it: open, scrollToId})}>
<div className="btn-new btn-one">
{label}
</div></span>
</div>
) )
} }
......
src/components/Calendar/cal-content.tsx
View file @ 3fd292fd
...@@ -32,7 +32,7 @@ let tabs = [ ...@@ -32,7 +32,7 @@ let tabs = [
<h2>Public Outreach</h2> <h2>Public Outreach</h2>
<p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p> <p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p>
<h2>Jamboree & MeetUps</h2> <h2>Jamboree & MeetUps</h2>
<p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p> <p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p>
...@@ -171,7 +171,7 @@ let tabs = [ ...@@ -171,7 +171,7 @@ let tabs = [
<p>Cyanobacteria blooms pose significant ecological threats, and current control methods are inadequate. The proposed solution involves using peptides from algae to prevent blooms while preserving ecosystems. Key pathways and targets were identified, emphasizing the need for conservation and biodiversity.</p> <p>Cyanobacteria blooms pose significant ecological threats, and current control methods are inadequate. The proposed solution involves using peptides from algae to prevent blooms while preserving ecosystems. Key pathways and targets were identified, emphasizing the need for conservation and biodiversity.</p>
<h3>Fourth Presentation: Cystic Fibrosis</h3> <h3>Fourth Presentation: Cystic Fibrosis</h3>
<p>Cystic fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p> <p>Cystic Fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p>
<h3>Further Presentations</h3> <h3>Further Presentations</h3>
<p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p> <p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p>
...@@ -285,7 +285,7 @@ let tabs = [ ...@@ -285,7 +285,7 @@ let tabs = [
<p>Plans for the European Meet-Up include creating a list of snacks with names, dates, types, and quantities to ensure adequate preparation.</p> <p>Plans for the European Meet-Up include creating a list of snacks with names, dates, types, and quantities to ensure adequate preparation.</p>
<h2>Mechanism</h2> <h2>Mechanism</h2>
<p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in cystic fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p> <p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in Cystic Fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p>
<h2>Delivery</h2> <h2>Delivery</h2>
<p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p> <p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p>
...@@ -447,7 +447,7 @@ let tabs = [ ...@@ -447,7 +447,7 @@ let tabs = [
<p>Primer design is challenging due to inexperience, but the team aims to meet BioBrick standards once the vectors are available. Kai and Christian are selecting candidates for Fanzor mutations, and testing editing via GFP is planned, requiring adaptation of the plasmid for stable transfection into cells.</p> <p>Primer design is challenging due to inexperience, but the team aims to meet BioBrick standards once the vectors are available. Kai and Christian are selecting candidates for Fanzor mutations, and testing editing via GFP is planned, requiring adaptation of the plasmid for stable transfection into cells.</p>
<h2>Human Practices</h2> <h2>Human Practices</h2>
<p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with cystic fibrosis.</p> <p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with Cystic Fibrosis.</p>
<h2>Sponsoring</h2> <h2>Sponsoring</h2>
<p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p> <p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p>
......
src/components/Complex-svg.tsx
View file @ 3fd292fd
...@@ -2,13 +2,15 @@ import { useNavigation } from "../utils"; ...@@ -2,13 +2,15 @@ import { useNavigation } from "../utils";
export default function SVG(){ export default function SVG(){
const { goToPageWithTabAndScroll /* , goToTextsAndOpenCollapsible */ } = useNavigation(); const { goToPageWithTabAndScroll/* , goToTextsAndOpenCollapsible */ } = useNavigation();
return( return(
<svg <svg
viewBox="0 0 1000 500" viewBox="0 0 1000 500"
overflow="hidden" overflow="hidden"
version="1.1" version="1.1"
id="svg367" id="svg367"
width={"500"}
height={"100%"}
inkscape:export-ydpi="9.5955524" inkscape:export-ydpi="9.5955524"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<defs <defs
...@@ -1201,7 +1203,7 @@ export default function SVG(){ ...@@ -1201,7 +1203,7 @@ export default function SVG(){
fillRule="evenodd" fillRule="evenodd"
id="path149" /> id="path149" />
{/* nSpuFz1 */} {/* nSpuFz1 */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nic1head"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2807,7 +2809,7 @@ export default function SVG(){ ...@@ -2807,7 +2809,7 @@ export default function SVG(){
fillRule="evenodd" fillRule="evenodd"
id="path351" /> id="path351" />
{/* MLH1dn */} {/* MLH1dn */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2828,7 +2830,7 @@ export default function SVG(){ ...@@ -2828,7 +2830,7 @@ export default function SVG(){
transform="matrix(1,0,0,-1,16740.5,9532.5)" transform="matrix(1,0,0,-1,16740.5,9532.5)"
id="path352" /> id="path352" />
{/* La(1-194) */} {/* La(1-194) */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2859,7 +2861,7 @@ export default function SVG(){ ...@@ -2859,7 +2861,7 @@ export default function SVG(){
fillRule="evenodd" fillRule="evenodd"
id="path354" /> id="path354" />
{/* PE6c reverse transcriptase */} {/* PE6c reverse transcriptase */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2885,14 +2887,14 @@ export default function SVG(){ ...@@ -2885,14 +2887,14 @@ export default function SVG(){
transform="matrix(-1,0,0,1,10490.8,8509.5)" transform="matrix(-1,0,0,1,10490.8,8509.5)"
id="path356" /> id="path356" />
{/* PCS/RTT */} {/* PCS/RTT */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pegrna', path: '/engineering', scrollToId: "pegrna-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
fontWeight="400" fontWeight="400"
fontSize="440px" fontSize="440px"
transform="translate(7802.59,8667)" transform="translate(7802.59,8667)"
id="text357">PCS/RTT</text> id="text357">PVS/RTT</text>
</a> </a>
<path <path
d="M 0,0 4324.02,3.60892e-4" d="M 0,0 4324.02,3.60892e-4"
...@@ -2931,7 +2933,7 @@ export default function SVG(){ ...@@ -2931,7 +2933,7 @@ export default function SVG(){
transform="matrix(-1,0,0,1,13708.3,11011.5)" transform="matrix(-1,0,0,1,13708.3,11011.5)"
id="spacerline" /> id="spacerline" />
{/* Spacer */} {/* Spacer */}
<a>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2939,9 +2941,9 @@ export default function SVG(){ ...@@ -2939,9 +2941,9 @@ export default function SVG(){
fontSize="440px" fontSize="440px"
transform="translate(8283.81,11166)" transform="translate(8283.81,11166)"
id="text360">Spacer</text> id="text360">Spacer</text>
</a>
{/* nPlmCasX */} {/* nPlmCasX */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nickase-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......
src/components/FadeIn.tsx
View file @ 3fd292fd
...@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){ ...@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
</> </>
); );
} }
\ No newline at end of file
src/components/Figures.tsx 0 → 100644
View file @ 3fd292fd
interface FigureProps{
pic1: string,
pic2?: string,
pic3?: string,
pic4?: string,
pic5?: string,
pic6?: string,
alt1: string,
description: React.ReactNode | string,
description2?: React.ReactNode | string,
num: string |number;
num2?: string |number;
bg?: string;
}
export function ThreeVertical({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<img src={pic3} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoVertical({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoHorizontal({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2}className="responsive-image"/>
</div>
<div className="col">
<img src={pic3} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function OneFigure({description, num, pic1, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoFigureRow({description,description2, num, num2, pic1, pic2, bg}:FigureProps) {
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} />
</div>
<div className="col">
<img src={pic2}/>
</div>
</div>
<figcaption>
<div className="row align-items-center">
<div className="col">
<b>Figure {num}:</b> {description}.
</div>
<div className="col">
<b>Figure {num2}:</b> {description2}.
</div>
</div>
</figcaption>
</figure>
</div>
)
}
src/components/Footer.tsx
View file @ 3fd292fd
...@@ -56,7 +56,7 @@ export function Footer() { ...@@ -56,7 +56,7 @@ export function Footer() {
<div className="small-row align-items-center"> <div className="small-row align-items-center">
<div className="col-sm-4"> <div className="col-sm-4">
<div className="col"> <div className="col">
info@igem-bielefeld.de info[at]igem-bielefeld[dot]de
</div> </div>
<div className="col"> </div> <div className="col"> </div>
<div className="col"> <div className="col">
...@@ -70,37 +70,40 @@ export function Footer() { ...@@ -70,37 +70,40 @@ export function Footer() {
<div className="col-4 footer-slider"> <div className="col-4 footer-slider">
<SimpleSlider> <SimpleSlider>
<a className="sponsor-container" href="https://www.plasmidfactory.com/"> <a className="sponsor-container" href="https://www.plasmidfactory.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
</a> </a>
<a className="sponsor-container" href="https://bio.nrw.de/">
<img className="img-sponsor-partner-page side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bionrw-logo.png"/>
</a>
<a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften"> <a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
</a> </a>
<a className="sponsor-container" href="https://www.jenabioscience.com/"> <a className="sponsor-container" href="https://www.jenabioscience.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
</a> </a>
<a className="sponsor-container" href="https://www.gip.com/home/"> <a className="sponsor-container" href="https://www.gip.com/home/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
</a> </a>
<a className="sponsor-container" href="https://www.integra-biosciences.com"> <a className="sponsor-container" href="https://www.integra-biosciences.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
</a> </a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/"> <a className="sponsor-container" href="https://www.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
</a> </a>
<a className="sponsor-container" href="www.snapgene.com"> <a className="sponsor-container" href="www.snapgene.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
</a> </a>
<a className="sponsor-container" href="https://bts-ev.de/"> <a className="sponsor-container" href="https://bts-ev.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
</a> </a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/"> <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
</a> </a>
<a className="sponsor-container" href="www.idtdna.com"> <a className="sponsor-container" href="www.idtdna.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
</a> </a>
<a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/"> <a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
</a> </a>
</SimpleSlider> </SimpleSlider>
</div> </div>
......
src/components/Graph.tsx
View file @ 3fd292fd
...@@ -57,7 +57,7 @@ const PieChart: React.FC = () => { ...@@ -57,7 +57,7 @@ const PieChart: React.FC = () => {
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { plugins: {
legend: { legend: {
display: true, display: true, // possible to blend out legend
position: 'bottom' as const, // Puts labels below the chart position: 'bottom' as const, // Puts labels below the chart
labels: { labels: {
boxWidth: 20, // Controls the size of the color box next to the labels boxWidth: 20, // Controls the size of the color box next to the labels
...@@ -65,6 +65,10 @@ const PieChart: React.FC = () => { ...@@ -65,6 +65,10 @@ const PieChart: React.FC = () => {
usePointStyle: true, usePointStyle: true,
}, },
}, },
title: {
display: true,
text: 'Types of mutations',
},
}, },
}; };
...@@ -173,7 +177,7 @@ export const WhoAffectedatients: React.FC = () => { ...@@ -173,7 +177,7 @@ export const WhoAffectedatients: React.FC = () => {
title: { title: {
display: true, display: true,
text: [ text: [
'Are you affected by cystic fibrosis yourself ', 'or are you related to someone with cystic fibrosis?' 'Are you affected by Cystic Fibrosis yourself ', 'or are you related to someone with Cystic Fibrosis?'
], ],
}, },
} }
...@@ -348,7 +352,7 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => { ...@@ -348,7 +352,7 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: ["How much does cystic fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"] text: ["How much does Cystic Fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"]
}, },
}, },
scales: { scales: {
...@@ -543,7 +547,7 @@ export const AgeDiagnosisatients: React.FC = () => { ...@@ -543,7 +547,7 @@ export const AgeDiagnosisatients: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: 'At what age were you or your relative diagnosed with cystic fibrosis?', text: 'At what age were you or your relative diagnosed with Cystic Fibrosis?',
}, },
}, },
scales: { scales: {
...@@ -675,7 +679,7 @@ export const HeardOfCFPublic: React.FC = () => { ...@@ -675,7 +679,7 @@ export const HeardOfCFPublic: React.FC = () => {
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Have you heard of cystic fibrosis?', text: 'Have you heard of Cystic Fibrosis?',
}, },
} }
}; };
...@@ -751,7 +755,7 @@ export const HowDidYouLearnPublic: React.FC = () => { ...@@ -751,7 +755,7 @@ export const HowDidYouLearnPublic: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: 'How did you mainly learn about cystic fibrosis? ', text: 'How did you mainly learn about Cystic Fibrosis? ',
}, },
}, },
scales: { scales: {
...@@ -836,7 +840,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => { ...@@ -836,7 +840,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { title: { plugins: { title: {
display: true, display: true,
text: 'How well informed are you about cystic fibrosis?', text: 'How well informed are you about Cystic Fibrosis?',
}, },
} }
}; };
...@@ -913,7 +917,7 @@ export const WhatMeasuresPublic: React.FC = () => { ...@@ -913,7 +917,7 @@ export const WhatMeasuresPublic: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: 'What measures do you think could be taken to raise awareness of cystic fibrosis?', text: 'What measures do you think could be taken to raise awareness of Cystic Fibrosis?',
}, },
}, },
scales: { scales: {
......
src/components/HP-timeline.tsx
View file @ 3fd292fd
...@@ -5,6 +5,7 @@ import { timelinedata } from "../data/hptimelinedata"; ...@@ -5,6 +5,7 @@ import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){ export function HPTimeline(){
return( return(
<section id="Timeline" className="section"> <section id="Timeline" className="section">
<p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
<div className="center"> <div className="center">
</div> </div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" /> <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
......
src/components/Headings.tsx
View file @ 3fd292fd
...@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){ ...@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<div className="h2-box"> <div>
<h2 className="h2" id={idtext}>{text}</h2> <h1 id={idtext}>{text}</h1>
</div> </div>
) )
...@@ -89,7 +89,7 @@ export function H3({text, id}:{text: string, id?: string}){ ...@@ -89,7 +89,7 @@ export function H3({text, id}:{text: string, id?: string}){
} }
return( return(
<div> <div>
<h3 className="h3" id={idtext}> {text} </h3> <h2 id={idtext}> {text} </h2>
</div> </div>
) )
...@@ -97,7 +97,7 @@ export function H3({text, id}:{text: string, id?: string}){ ...@@ -97,7 +97,7 @@ export function H3({text, id}:{text: string, id?: string}){
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){ export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
return( return(
<div> <div>
<h3 className="h3" id={id}> {children} </h3> <h2 id={id}> {children} </h2>
</div> </div>
) )
...@@ -112,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){ ...@@ -112,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){
} }
return( return(
<div> <div>
<h4 className="h4" id={idtext}> {text} </h4> <h3 id={idtext}> {text} </h3>
</div> </div>
) )
...@@ -126,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){ ...@@ -126,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<div className="h5-box"> <h4 id={idtext}> {text} </h4>
<h5 className="h5" id={idtext}> {text} </h5>
</div>
) )
} }
......
src/components/HorizontalTimeline.tsx
View file @ 3fd292fd
import { HPMoreButton, NewHPMoreButton } from "./Buttons"; import { NewHPMoreButton } from "./Buttons";
import { timelinedata } from "../data/hptimelinedata"; import { timelinedata } from "../data/hptimelinedata";
function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
let cl = "t-tag " + tag; let cl = "t-tag " + tag;
...@@ -133,7 +133,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ ...@@ -133,7 +133,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} > month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>) </TimeItem>)
} }
} }
...@@ -171,7 +170,7 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ ...@@ -171,7 +170,7 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
interface ItemProps { interface ItemProps {
title: string , title: string ,
children: React.ReactNode; children?: React.ReactNode;
tag: string, tag: string,
pic: string, pic: string,
author: string, author: string,
...@@ -200,7 +199,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ ...@@ -200,7 +199,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} > month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItemMeta>) </TimeItemMeta>)
} }
else{ else{
...@@ -218,7 +216,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ ...@@ -218,7 +216,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} > month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>) </TimeItem>)
} }
...@@ -246,7 +243,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){ ...@@ -246,7 +243,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} > month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>) </TimeItem>)
} }
} }
......
src/components/Link.tsx
View file @ 3fd292fd
import { useNavigation } from "../utils" import { useNavigation } from "../utils"
import { Ourlink } from "./interfaces";
export function TabScrollLink({tab, scrollId, num}:{tab: string, scrollId: string, num: string}){ export function TabScrollLink({tab, scrollId, num}:{tab: string, scrollId: string, num: string}){
const {goToPageWithTabAndScroll} = useNavigation(); const {goToPageWithTabAndScroll} = useNavigation();
return( return(
<sup><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scrollId})}>{num}</a></sup> <sup><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scrollId})}>{num}</a></sup>
) )
}
// 2^4 = 16 possible combinations + special cases müssen eventuell ergänzt werden
export function OurLink({path, scrollToId, tabId, subTabId, collapseId, text, tabincolId}:Ourlink){
const {goToPlace} = useNavigation();
// 1. [1-1-1-1] go to page and open tab and open subTab and open colapsible in subtab and scroll to something
if(tabId && subTabId && scrollToId && collapseId && !tabincolId) {
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
}
// special case if a tab in the collapsible shall be opened too
if(tabId && subTabId && scrollToId && collapseId && tabincolId) {
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
// 2. [1-1-1-0] go to page and open tab and open subtab and scroll to something
else if (tabId && subTabId && scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId})}>{text}</a>)
}
//++3. [1-1-0-1] go to page and open tab and open collapsible
else if (tabId && subTabId && !scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, collapseId:collapseId})}>{text}</a>)
}
//special case: go to page and open tab and open collapsible and open tab in collapsible
else if (tabId && subTabId && !scrollToId && collapseId &&tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
//++4. [1-1-0-0] go to page and opent tab and open subtab NO SCROLLING
else if (tabId && subTabId && !scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId})}>{text}</a>)
}
//++5. [1-0-1-1] go to page and open tab and open collapsible and scroll to something in the collapsible
else if (tabId && !subTabId && scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
}
//special case: go to page and open tab and open collapsible open tab i collapsible and scroll to something in the tab
else if (tabId && !subTabId && scrollToId && collapseId && tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
//++6. [1-0-1-0] go to page and open tab and scroll to something
else if (tabId && !subTabId && scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId})}>{text}</a>)
}
//++7. [1-0-0-1] go to page and open tab and open collapsible in tab
else if (tabId && !subTabId && !scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, collapseId:collapseId})}>{text}</a>)
}
//special case: go to page and open tab and open collapsible in tab and open tab in collapsible
else if (tabId && !subTabId && !scrollToId && collapseId && tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
//++8. [1-0-0-0] go to page and open a tab
else if (tabId && !subTabId && !scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId:tabId})}>{text}</a>)
}
//++9. [0-1-1-1] go to page and open a collapsible and open a subtab in the collapsible and scroll to something in the subtab
else if (!tabId && tabincolId && scrollToId && collapseId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, tabincolId:tabincolId, scrollToId:scrollToId})}>{text}</a>)
}
//++10. [0-1-1-0] it is not possible to only open a subtab and scroll to something there
/* */
//++11. [0-1-0-1] go to page and open a collapsible and scroll to something in the collapsible
else if (!tabId && subTabId && !scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, subTabId:subTabId})}>{text}</a>)
}
//special case: go to page and open a collapsible and open a tab in the collapsible and scroll to something in the tab
else if (!tabId && subTabId && !scrollToId && collapseId && tabincolId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, subTabId:subTabId, tabincolId:tabincolId})}>{text}</a>)
}
//++12: [0-1-0-0] it is not possible to go to a page and only open a subtab
/* */
//++13. [0-0-1-1] go to page and open a collapsible scroll to something in the collapsible
else if (!tabId && !subTabId && scrollToId && collapseId){
return(<a onClick={() => goToPlace({path: path, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
}
//++14. [0-0-1-0] go to a page and scroll to something
else if (!tabId && !subTabId && scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, scrollToId:scrollToId})}>{text}</a>)
}
// 15. [0-0-0-1] go to a page and open a collapsible
else if (!tabId && !subTabId && !scrollToId && collapseId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId})}>{text}</a>)
}
// 16. [0-0-0-0] Catch all - just go to the page
else {
return(<a onClick={() => goToPlace({path: path})}>{text}</a>)
}
} }
\ No newline at end of file