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
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 3809 additions and 242 deletions
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'}}>Not everyone </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</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'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</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'}}>texttexttext</p>
<p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
<p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></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>
......@@ -72,19 +72,49 @@ const handleDownload = () => {
console.error("Error fetching the file:", error);
});
};
return (
<a type="button" onClick={handleDownload} className="download-butt">
<span>Download</span>
</a>
);
};
export const DownloadImageButton = ({ url, fileName, children}: {url: string, fileName: string, children: React.ReactNode}) => {
const handleDownload = () => {
fetch(url)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement("a");
link.href = url;
link.download = fileName || "downloaded-file";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch((error) => {
console.error("Error fetching the file:", error);
});
};
return (
<a type="button" onClick={handleDownload} className="download-butt">
Download
<a type="button" onClick={handleDownload} className="download-butt-image">
{children}
</a>
);
};
export function TabButtonRow({data, classy, opentype, closing}: {data: Array<TabDatensatz>, classy?: string, opentype: string, closing: string}){
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
if(classy){
rows.push(<TabButton classy={classy} type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
......@@ -106,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>
......@@ -114,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
)
}
export function HPMoreButton({name}: {name: string}){
let c = "timelinepersontabs"
export function BFHMoreButton({it}: {it: string}){
return(
<button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button>
<button className="tablinks btn1" onClick={expandIt({it})}> More</button>
)
}
export function BFHMoreButton({it}: {it: string}){
export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
const {goToPageWithTabAndScroll} = useNavigation();
return(
<button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button>
<button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
)
}
......@@ -143,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>
)
}
}
......@@ -193,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{
......@@ -217,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/Calendar.tsx
View file @ 3fd292fd
......@@ -2,8 +2,8 @@ import { CalTabs } from "./cal-content";
export function Calendar(){
let arrows = Arrows();
let tabs = CalTabs();
let arrows: JSX.Element[] = Arrows();
let tabs: JSX.Element[] = CalTabs();
return(
<div className="cal">
......@@ -38,7 +38,7 @@ let tabs = CalTabs();
function Arrows(){
const months = ["February", "March", "April", "May", "June", "July", "August", "September", "October"]
let arrows = [];
let arrows: JSX.Element[] = [];
for (let index = 0; index < months.length; index++) {
if (index == 0) {
console.log(`months[index] = ${months[index]}` )
......@@ -115,7 +115,6 @@ function switchTo(month: string){
console.log("new month is: " + month + " and we are calling " + `${month}-name`)
if (document.getElementById(`${month}-dates`)) {
console.info("document.getElementById(`${month}-dates`); exists")
let newdates = document.getElementById(`${month}-dates`);
(newdates as HTMLElement).style.display = "block";
}
......@@ -270,7 +269,7 @@ const May = <ul id="May-dates" className="days hideable" style={{display: "none"
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li><a onClick={showEntry("may22")}><span className="active">22</span></a></li>
<li>23</li>
<li>24</li>
<li>25</li>
......
src/components/Calendar/cal-content.tsx
View file @ 3fd292fd
import { H5 } from "../Headings";
import PreCyse from "../precyse";
export function CalTabs(){
let tablist = [];
let tablist: JSX.Element[] = [];
for (let index = 0; index < tabs.length; index++) {
tablist.push(
<div className="cal-entry" id={tabs[index].cssname} style={{display: "none"}}>
......@@ -31,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>
......@@ -170,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>
......@@ -284,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>
......@@ -425,7 +426,7 @@ let tabs = [
<p>A meeting with Verena Kräutner is scheduled for Monday, where a draw will determine the sponsorship winner, with Lydia suggesting a time of 5:30 PM. Additionally, a meeting with Stemcell will follow up on the provision of medium.</p>
<h2>Creativity</h2>
<p>The team has chosen the name "PreCyse" and is developing a logo, emphasizing simplicity and avoiding overly fine details or whimsical imagery. Feedback will be gathered on the proposed logos and name.</p>
<p>The team has chosen the name "<PreCyse/>" and is developing a logo, emphasizing simplicity and avoiding overly fine details or whimsical imagery. Feedback will be gathered on the proposed logos and name.</p>
<h2>Wiki</h2>
<p>There is a need for team members to write texts for the wiki, focusing on tasks outlined in the Wiki, Human Practices, and Design channels. The team should also agree on a citation style.</p>
......@@ -446,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 0 → 100644
View file @ 3fd292fd
This diff is collapsed.
src/components/FadeIn.tsx
View file @ 3fd292fd
......@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
<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,12 +56,12 @@ 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">
iGEM2024
Universitätsstraße 25, 33613 Bielefeld
Universitätsstraße 25, 33615 Bielefeld
Centrum für Biotechnologie (CeBiTec)
Universität Bielefeld
</div>
......@@ -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
......@@ -56,11 +56,20 @@ const PieChart: React.FC = () => {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: '',
legend: {
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
padding: 15, // Adds some padding between labels and the chart
usePointStyle: true,
},
}
},
title: {
display: true,
text: 'Types of mutations',
},
},
};
return (
......@@ -167,7 +176,9 @@ export const WhoAffectedatients: React.FC = () => {
plugins: {
title: {
display: true,
text: 'Are you affected by cystic fibrosis yourself or are you related to someone with cystic fibrosis?',
text: [
'Are you affected by Cystic Fibrosis yourself ', 'or are you related to someone with Cystic Fibrosis?'
],
},
}
};
......@@ -241,6 +252,22 @@ export const HowOftenTreatmentatients: React.FC = () => {
display: true,
text: 'How often do you or your relative need medical treatment or therapy?',
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
......@@ -281,6 +308,14 @@ export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
text: 'What concerns do you have about gene therapy?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
......@@ -317,7 +352,15 @@ 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: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
......@@ -361,6 +404,14 @@ export const WhichTherapyDoYouUseatients: React.FC = () => {
text: 'Which form(s) of therapy do you or your relative use?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
......@@ -404,6 +455,14 @@ export const WhichSymptomsatients: React.FC = () => {
text: 'Which symptoms do you or your relative have most frequently?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
......@@ -440,7 +499,15 @@ export const BasicPositionatients: React.FC = () => {
},
title: {
display: true,
text: 'What is your basic position on gene therapy? (1=Very negative, 5=Very positive)',
text: ['What is your basic position on gene therapy?',' (1=Very negative, 5=Very positive)']
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
......@@ -480,7 +547,15 @@ 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: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
......@@ -564,6 +639,14 @@ export const MoreInfoOnTherapyBoth: React.FC = () => {
text: 'Would you like to see more information on the subject of gene therapy?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
......@@ -596,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?',
},
}
};
......@@ -672,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: {
......@@ -683,6 +766,10 @@ export const HowDidYouLearnPublic: React.FC = () => {
},
y: {
beginAtZero: true,
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
......@@ -753,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?',
},
}
};
......@@ -800,7 +887,7 @@ export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
export const WhatMeasuresPublic: React.FC = () => {
const labels = ['Publicity campaigns on TV, radio and social media', 'Information events in schools and communities', "Information materials in doctors' surgeries and hospitals", 'Organization of fundraising runs and charity events', 'Online platforms and forums for affected and interested parties', 'Cooperation with companies for awareness-raising initiatives', 'Integration of the topic into school lessons', 'Documentaries and short films about life with cystic fibrosis'];
const labels = ['Media', 'Schools and Communities', "Doctors", 'Charities and Findraisers', 'Online Platforms and Forums', 'Cooperations with Companies', 'School Lessons', 'Documentaries and Short Films'];
const data = {
labels,
......@@ -830,7 +917,15 @@ 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: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
......@@ -910,6 +1005,14 @@ export const WhatCocernsAboutGeneTherapyPublic: React.FC = () => {
text: 'What concerns do you have about gene therapy?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
......@@ -953,6 +1056,14 @@ export const WhatFormMoreInfoPublic: React.FC = () => {
text: 'In what form would you like to see more information?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
......
src/components/HP-timeline.tsx
View file @ 3fd292fd
import { TabButtonRow } from "./Buttons";
import TimeHori from "./HorizontalTimeline";
import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
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" />
......@@ -41,7 +42,23 @@ export function HPTimeline(){
node: <TimeHori tab="Industry" ></TimeHori>,
buttonname: "Industry",
cssname: "Industry"
}
},
{
node: <TimeHori tab="Milestone" ></TimeHori>,
buttonname: "Milestones",
cssname: "Milestone"
},
{
node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
buttonname: "Education & Outreach",
cssname: "Education"
},
/*
{
node: <TimeHori tab="Outreach" ></TimeHori>,
buttonname: "Outreach",
cssname: "Outreach"
} */
]
......
src/components/HeaderBox.tsx
View file @ 3fd292fd
import { Hwave } from "./Headings";
interface Props{
title: string,
title: string ,
title2?: string,
children?: React.ReactNode,
id: string
}
export default function HeaderBox({children, title, title2}: Props ){
export default function HeaderBox({children, title, title2, id}: Props ){
var ti: string = "";
if (title2) {
ti = title2;
......@@ -15,7 +16,7 @@ export default function HeaderBox({children, title, title2}: Props ){
<>
<div className="col">
<div className="col header-container">
<div className="row header-title">
<div className="row header-title" id={id}>
<Hwave text={title}></Hwave>
<Hwave text={ti}></Hwave>
......
src/components/Headings.tsx
View file @ 3fd292fd
import { stringToSlug } from "../utils";
export function Hhopp({text, id}:{text: string, id?: string}){
const arr = [];
const arr: JSX.Element[] = [];
var idtext: string;
if (id) {
idtext = id;
......@@ -21,7 +21,7 @@ export function Hhopp({text, id}:{text: string, id?: string}){
}
export function Hsmoke({text, id}:{text: string, id?: string}){
const arr = [];
const arr: JSX.Element[] = [];
var idtext: string;
if (id) {
idtext = id;
......@@ -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,15 @@ export function H3({text, id}:{text: string, id?: string}){
}
return(
<div>
<h3 className="h3" id={idtext}> {text} </h3>
<h2 id={idtext}> {text} </h2>
</div>
)
}
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
return(
<div>
<h2 id={id}> {children} </h2>
</div>
)
......@@ -104,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>
)
......@@ -118,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>
)
}
......@@ -150,7 +156,7 @@ export function Hwave({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text);
}
return(
<svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
/* <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stopColor="#850F78"/>
......@@ -169,9 +175,32 @@ export function Hwave({text, id}:{text: string, id?: string}){
</path>
</pattern>
</defs>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)" fillOpacity="0.6">{text}</text>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.3">{text}</text>
</svg>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="white" fillOpacity="1">{text}</text>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)" fillOpacity="0.7">{text}</text>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.9">{text}</text>
</svg> */
<svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stopColor="#850F78" />
<stop offset="95%" stopColor="#A0A7F3" />
</linearGradient>
<pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
<path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)">
<animateTransform
attributeName="transform"
begin="0s"
dur="3s"
type="translate"
from="0,0"
to="40,0"
repeatCount="indefinite" />
</path>
</pattern>
</defs>
<text textAnchor="middle" x="50" y="15" fontSize="13" stroke="var(--ourbeige)" strokeWidth={"0.2px"} fill="url(#gradient)">{text}</text>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"stroke="var(--ourbeige)" strokeWidth={"0.2px"} fillOpacity="1">{text}</text>
</svg>
)
}
......
src/components/HorizontalTimeline.tsx
View file @ 3fd292fd
import { HPMoreButton } from "./Buttons";
import { NewHPMoreButton } from "./Buttons";
import { timelinedata } from "../data/hptimelinedata";
function TimeItem({tag, title, pic, author, tabid}: ItemProps){
function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
let cl = "t-tag " + tag;
return(
<li className="timelineolli">
<div className="timeline-item moretop">
<div className="">
<div className={cl}>
{tag}
<div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
<div className={cl}>
{tag}
</div>
<div className="col">
</div>
<div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
{month}
</div>
</div>
<div className="fillup-wrapper">
......@@ -26,7 +34,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
</div>
<div className="col-4">
<div className="tab">
<HPMoreButton name={tabid}/>
<NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
</div>
</div>
</div>
......@@ -38,15 +46,25 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
)
}
function TimeItemMeta({ tag, title, pic, author, tabid}: ItemProps){
function TimeItemMeta({ tag, title, pic, author, tabid, month}: ItemProps){
let cl = "t-tag " + tag;
return(
<li className="timelineolli">
<div className="timeline-item time-meta moretop">
<div className="">
<div className=" t-tag colour-meta-tag">
{tag}
<div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
<div className={`${cl} col-6 t-tag `}>
{tag}
</div>
<div className="col">
</div>
<div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
{month}
</div>
</div>
<div className="fillup-wrapper">
<div className="row align-items-center fillup">
<div className="col" >
......@@ -63,7 +81,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
</div>
<div className="col-4">
<div className="tab">
<HPMoreButton name={tabid}/>
<NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
</div>
</div>
</div>
......@@ -75,7 +93,51 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
)
}
export function CombiTimeHori({tab1, tab2}:{tab1: string, tab2: string}){
let nod;
/* console.log("Tab") */
nod = getItemsByTypes(tab1, tab2);
return(
<div>
<section className="timeline">
<ol className="timelineol">
{nod}
<li className="timelineolli"></li>
</ol>
</section>
</div>
)
}
export function getItemsByTypes(tabid1: string, tabid2: string) {
let rows: JSX.Element[] = []
for (let i = 0; i < timelinedata.length; i++) {
if (tabid1 === timelinedata[i].tag || tabid2 === timelinedata[i].tag) {
var name: string;
if (timelinedata[i].title) {
name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " + timelinedata[i].nachnname;
}
else{
name = timelinedata[i].vorname + " " + timelinedata[i].nachnname;
}
rows.push(<TimeItem
key={i}
title={timelinedata[i].heading}
pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
</TimeItem>)
}
}
return rows;
}
export default function TimeHori({tab}:{tab: string}){
let nod;
......@@ -108,18 +170,19 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
interface ItemProps {
title: string ,
children: React.ReactNode;
children?: React.ReactNode;
tag: string,
pic: string,
author: string,
tabid: string
month: string
}
function AllItems(){
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < timelinedata.length; i++ ){
if (timelinedata[i].type === "meta"){
var name: string;
......@@ -135,8 +198,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
>
{timelinedata[i].cardtext}
month={timelinedata[i].months} >
</TimeItemMeta>)
}
else{
......@@ -152,9 +214,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
>
{timelinedata[i].cardtext}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
</TimeItem>)
}
......@@ -164,7 +225,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
export function getItemsByType(tabid: string) {
let rows = []
let rows: JSX.Element[] = []
for (let i = 0; i < timelinedata.length; i++) {
if (tabid === timelinedata[i].tag) {
var name: string;
......@@ -175,14 +236,13 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
name = timelinedata[i].vorname + " " + timelinedata[i].nachnname;
}
rows.push(<TimeItem
key={i}
title={timelinedata[i].heading}
pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
>
{timelinedata[i].cardtext}
key={i}
title={timelinedata[i].heading}
pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
</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/Navbar.tsx
View file @ 3fd292fd
This diff is collapsed.
src/components/Pdfs.tsx
View file @ 3fd292fd
......@@ -3,13 +3,20 @@ import { ButtonOne, DownloadLink } from "./Buttons"
export function PDF({link, name}: {link: string, name:string}){
return(
<div className='row align-items-center'>
<iframe src={link} width="100%" title="title" className='one-pdf-line small-i'>
</iframe>
<div className='row download-col'>
<DownloadLink url={link} fileName={name} ></DownloadLink>
</div>
</div>
<div className="col">
<div className='align-items-center'>
<div className="iframe-container">
<iframe src={link} title="title" className='one-pdf-line small-i'>
</iframe>
</div>
</div>
<div className='row download-col'>
<DownloadLink url={link} fileName={name} ></DownloadLink>
</div>
</div>
)
}
export function TwoLinePDF({link, name}: {link: string, name:string}){
......@@ -26,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
......@@ -17,22 +17,40 @@ const images = [
{src:"https://static.igem.wiki/teams/5247/photos/meetup/dietz.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/wageningen.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/aachen.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/posterexhibition-refiba.jpg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/socializing17.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/badges.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/posterexhibition-teddy.jpg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/chekin.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/sinan.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/socializing11.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/teamphotos6.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/teamphotos.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/teamphotos5.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/socializing19.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/posterexhibition-isabell-erkl-rt.jpg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/j-rn3.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/hall.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/abend-spikeball5.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/abend-interssierte.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
]
/* {src:"", width: 320, height: 212}, */
export default function BFHGallery(){
let rows = []
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>;
}
src/components/Problems.tsx
View file @ 3fd292fd
This diff is collapsed.
src/components/Sidebar.tsx
View file @ 3fd292fd
......@@ -63,7 +63,7 @@ function Sidebar(){
console.log(nums)
let content = [];
let content: JSX.Element[] = [];
for(let idx in nums){
const item = nums[idx];
/* console.log("idx: " + idx);
......
src/components/Svgs.tsx
View file @ 3fd292fd
This diff is collapsed.