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 (448)
348 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 572 additions and 650 deletions
.gitignore
View file @ 3fd292fd
......@@ -18,3 +18,5 @@ code/test.bib
.DS_Store
code/test file gitignore.txt
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 = () => {
<>
<Header />
{/* Page content */}
<div className="container-fluid">
<div className="container-fluid" >
<div className="row">
<Sidebar />
<div className="full-col-phone col-9">
<Sidebar/>
<div className="full-col-phone col-9 max-1240">
<Component />
<Villbuttonrow />
</div>
......
src/App/Timelines.css
View file @ 3fd292fd
......@@ -7,10 +7,11 @@
white-space: nowrap;
min-height: 700px;
width: 75vw;
overflow-x: auto;
overflow-y: hidden;
overflow-x: auto !important;
max-width: inherit !important;
overflow-y: hidden !important;
width: 100%;
background-color: inherit;
font-size: 1rem;
/* align items center */
align-items: center !important;
/* row */
......@@ -184,7 +185,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen);
}
.Ethics{
.Other{
background-color: var(--offblack);
}
......
src/App/mediarules.css
View file @ 3fd292fd
......@@ -27,9 +27,6 @@
align-items: center;
}
h1 {
font-size: 2rem;
}
.col-6 {
width: 100%; /* Full width on tablets */
......@@ -132,6 +129,26 @@
max-width: 100%;
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***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
......@@ -177,12 +194,6 @@
width: 50% !important;
}
/***Description***/
#Cystic\ Fibrosis6 h2 {
font-size: 1.5em !important;
}
#Our\ Vision h2 {
font-size: 1 em !important;
}
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
......@@ -262,9 +273,6 @@
.winner{
font-size: x-large;
}
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{
display: block !important;
}
......@@ -304,13 +312,6 @@ svg text{
padding-top: 10px;
padding-bottom: 5px;
}
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle {
width: 450px !important;
height: 200px !important;
......@@ -345,41 +346,20 @@ body {
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{
width: 100vw !important;
}
}
/*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 390px){
@media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 80%; /* Full width on small screens */
height: auto; /* Maintain aspect ratio */
max-width: 100%; /* Limit the image width to fit the screen */
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{
......
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
......@@ -326,7 +326,7 @@ export function BFHTimeline () {
<p>
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
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
population with regional companies and institutes to inform them about their work - including our iGEM team!
</p>
......
src/components/Breathe.tsx
View file @ 3fd292fd
......@@ -94,13 +94,13 @@ export function Breathe(){
'opacity': `${isVisible ? '1' : '0'}`,
'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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}>
<p 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'}}>Take a moment to</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -111,13 +111,13 @@ export function Breathe(){
'scale': `${isVisible2 ? '1' : '0'}`,
'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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}>
<p style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>breathe out...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -128,17 +128,17 @@ export function Breathe(){
'scale': `${isVisible3 ? '0' : '1'}`,
'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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p 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'}}>You feel <strong>revitalized</strong></p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p 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'}}>Now deeply breathe in</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
......@@ -150,7 +150,7 @@ export function Breathe(){
'scale': `${isVisible4 ? '1' : '0'}`,
'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>
{/* black */}
......@@ -168,7 +168,7 @@ export function Breathe(){
'opacity': `${isVisible5 ? '1' : '0'}`,
'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>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
......@@ -179,10 +179,10 @@ export function Breathe(){
'height': '60vh',
'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>
<p style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p style={{'fontSize' : '2.5em'}}>essential.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>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'}}>struggle with it.</p> */}
......@@ -196,13 +196,13 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`,
'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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>That is why we </p>
<p style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p style={{'fontSize' : '2.5em'}}><b>cystic fibrosis.</b></p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div>
{/* grey */}
<div
......@@ -219,14 +219,14 @@ export function Breathe(){
'opacity': `${isVisible8 ? '1' : '0'}`,
'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>
</div>
<p style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p style={{'fontSize' : '2.5em'}}>on their own.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</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 */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
......
src/components/Buttons.tsx
View file @ 3fd292fd
......@@ -31,7 +31,7 @@ export function Villbuttonrow(){
<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="/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="/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>
......@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
if (!classy){
classy = ""
}
let classname = "tabbutton " + type + " " + classy;
let classname = "btn1 tabbutton " + type + " " + classy;
return(
<>
<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
)
}
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}){
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}){
const {goToPageWithTabAndScroll} = useNavigation();
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}){
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}){
const { goToPagesAndOpenTab } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
<a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
<button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
)
}
else{
return(
<div className="boxy-1">
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
</div>
<button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
)
}
}
......@@ -230,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
<a onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
<button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
)
}
else{
......@@ -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}){
return(
<div className="boxy-1">
<span typeof="button" onClick={openThem({it: open, scrollToId})}>
<div className="btn-new btn-one">
{label}
</div></span>
</div>
<button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
)
}
......
src/components/Calendar/cal-content.tsx
View file @ 3fd292fd
......@@ -32,7 +32,7 @@ let tabs = [
<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>
<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>
......@@ -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>
<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>
<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 = [
<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>
<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>
<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 = [
<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>
<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>
<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";
export default function SVG(){
const { goToPageWithTabAndScroll /* , goToTextsAndOpenCollapsible */ } = useNavigation();
const { goToPageWithTabAndScroll/* , goToTextsAndOpenCollapsible */ } = useNavigation();
return(
<svg
viewBox="0 0 1000 500"
overflow="hidden"
version="1.1"
id="svg367"
width={"500"}
height={"100%"}
inkscape:export-ydpi="9.5955524"
xmlns="http://www.w3.org/2000/svg">
<defs
......@@ -1201,7 +1203,7 @@ export default function SVG(){
fillRule="evenodd"
id="path149" />
{/* nSpuFz1 */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nic1head"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2807,7 +2809,7 @@ export default function SVG(){
fillRule="evenodd"
id="path351" />
{/* MLH1dn */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2828,7 +2830,7 @@ export default function SVG(){
transform="matrix(1,0,0,-1,16740.5,9532.5)"
id="path352" />
{/* La(1-194) */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2859,7 +2861,7 @@ export default function SVG(){
fillRule="evenodd"
id="path354" />
{/* PE6c reverse transcriptase */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2885,14 +2887,14 @@ export default function SVG(){
transform="matrix(-1,0,0,1,10490.8,8509.5)"
id="path356" />
{/* PCS/RTT */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pegrna', path: '/engineering', scrollToId: "pegrna-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
fontWeight="400"
fontSize="440px"
transform="translate(7802.59,8667)"
id="text357">PCS/RTT</text>
id="text357">PVS/RTT</text>
</a>
<path
d="M 0,0 4324.02,3.60892e-4"
......@@ -2931,7 +2933,7 @@ export default function SVG(){
transform="matrix(-1,0,0,1,13708.3,11011.5)"
id="spacerline" />
{/* Spacer */}
<a>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2939,9 +2941,9 @@ export default function SVG(){
fontSize="440px"
transform="translate(8283.81,11166)"
id="text360">Spacer</text>
</a>
{/* nPlmCasX */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nickase-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......
src/components/Figures.tsx
View file @ 3fd292fd
interface FigureProps{
pic1: string,
pic2: string,
pic2?: string,
pic3?: string,
pic4?: string,
pic5?: string,
pic6?: string,
description: React.ReactNode | 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}:FigureProps){
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}/>
<img src={pic2}/>
<img src={pic3}/>
<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 TwoVertical({description, num, pic1, pic2}:FigureProps){
export function TwoHorizontal({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1}/>
<img src={pic2}/>
<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 TwoHorizontal({description, num, pic1, pic2}:FigureProps){
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}/>
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2}/>
<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 ThreeHorizontal({description, num, pic1, pic2, pic3}:FigureProps){
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}/>
<img src={pic1} />
</div>
<div className="col">
<img src={pic2}/>
</div>
<div className="col">
<img src={pic3}/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
<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() {
<div className="small-row align-items-center">
<div className="col-sm-4">
<div className="col">
info@igem-bielefeld.de
info[at]igem-bielefeld[dot]de
</div>
<div className="col"> </div>
<div className="col">
......@@ -70,37 +70,40 @@ export function Footer() {
<div className="col-4 footer-slider">
<SimpleSlider>
<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 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">
<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 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 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 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 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 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 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 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 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 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>
</SimpleSlider>
</div>
......
src/components/Graph.tsx
View file @ 3fd292fd
......@@ -57,7 +57,7 @@ const PieChart: React.FC = () => {
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
display: true, // possible to blend out legend
position: 'bottom' as const, // Puts labels below the chart
labels: {
boxWidth: 20, // Controls the size of the color box next to the labels
......@@ -65,6 +65,10 @@ const PieChart: React.FC = () => {
usePointStyle: true,
},
},
title: {
display: true,
text: 'Types of mutations',
},
},
};
......@@ -173,7 +177,7 @@ export const WhoAffectedatients: React.FC = () => {
title: {
display: true,
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 = () => {
},
title: {
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: {
......@@ -543,7 +547,7 @@ export const AgeDiagnosisatients: React.FC = () => {
},
title: {
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: {
......@@ -675,7 +679,7 @@ export const HeardOfCFPublic: React.FC = () => {
plugins: {
title: {
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 = () => {
},
title: {
display: true,
text: 'How did you mainly learn about cystic fibrosis? ',
text: 'How did you mainly learn about Cystic Fibrosis? ',
},
},
scales: {
......@@ -836,7 +840,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
maintainAspectRatio: false,
plugins: { title: {
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 = () => {
},
title: {
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: {
......
src/components/HP-timeline.tsx
View file @ 3fd292fd
......@@ -5,6 +5,7 @@ import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){
return(
<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>
<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}){
idtext = stringToSlug(text);
}
return(
<div className="h2-box">
<h2 className="h2" id={idtext}>{text}</h2>
<div>
<h1 id={idtext}>{text}</h1>
</div>
)
......@@ -89,7 +89,7 @@ export function H3({text, id}:{text: string, id?: string}){
}
return(
<div>
<h3 className="h3" id={idtext}> {text} </h3>
<h2 id={idtext}> {text} </h2>
</div>
)
......@@ -97,7 +97,7 @@ export function H3({text, id}:{text: string, id?: string}){
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
return(
<div>
<h3 className="h3" id={id}> {children} </h3>
<h2 id={id}> {children} </h2>
</div>
)
......@@ -112,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){
}
return(
<div>
<h4 className="h4" id={idtext}> {text} </h4>
<h3 id={idtext}> {text} </h3>
</div>
)
......@@ -126,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text);
}
return(
<div className="h5-box">
<h5 className="h5" id={idtext}> {text} </h5>
</div>
<h4 id={idtext}> {text} </h4>
)
}
......
src/components/HorizontalTimeline.tsx
View file @ 3fd292fd
......@@ -133,7 +133,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>)
}
}
......@@ -171,7 +170,7 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
interface ItemProps {
title: string ,
children: React.ReactNode;
children?: React.ReactNode;
tag: string,
pic: string,
author: string,
......@@ -200,7 +199,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItemMeta>)
}
else{
......@@ -218,7 +216,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>)
}
......@@ -246,7 +243,6 @@ function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>)
}
}
......
src/components/Link.tsx
View file @ 3fd292fd
import { useNavigation } from "../utils"
import { Ourlink } from "./interfaces";
export function TabScrollLink({tab, scrollId, num}:{tab: string, scrollId: string, num: string}){
const {goToPageWithTabAndScroll} = useNavigation();
return(
<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
src/components/Pdfs.tsx
View file @ 3fd292fd
......@@ -33,7 +33,7 @@ export function TwoLinePDF({link, name}: {link: string, name:string}){
export default function BFHpdf(){
return(
<>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
<div className="row align-items-center" >
<div className="col">
<ButtonOne text="Flyers" open="flyers"></ButtonOne>
</div>
......
src/components/Photo-grid.tsx
View file @ 3fd292fd
......@@ -41,15 +41,16 @@ const images = [
export default function BFHGallery(){
let rows: JSX.Element[] = []
for ( let i = 0; i < images.length; i++ ){
rows.push(<div><img src={images[i].src}/></div>)
export default function BFHGallery() {
let rows: JSX.Element[] = [];
for (let i = 0; i < images.length; i++) {
rows.push(
<div key={i} className="bfhgal-item">
<img src={images[i].src} alt={`Image ${i + 1}`} />
</div>
);
}
return(
<div id="gallery">
{rows}
</div>
)
return <div className="bfhgal">{rows}</div>;
}