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 4740 additions and 238 deletions
src/components/Buttons.tsx
View file @ 3fd292fd
...@@ -31,7 +31,7 @@ export function Villbuttonrow(){ ...@@ -31,7 +31,7 @@ export function Villbuttonrow(){
<div className="small-row align-items-center bottom-buttons"> <div className="small-row align-items-center bottom-buttons">
<Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton> <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
<Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton> <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton> <Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
<Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton> <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
<Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton> <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
<Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton> <Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
...@@ -72,19 +72,49 @@ const handleDownload = () => { ...@@ -72,19 +72,49 @@ const handleDownload = () => {
console.error("Error fetching the file:", error); 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 ( return (
<a type="button" onClick={handleDownload} className="download-butt"> <a type="button" onClick={handleDownload} className="download-butt-image">
Download {children}
</a> </a>
); );
}; };
export function TabButtonRow({data, classy, opentype, closing}: {data: Array<TabDatensatz>, classy?: string, opentype: string, closing: string}){ 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++ ){ for ( let i = 0; i < data.length; i++ ){
if(classy){ if(classy){
rows.push(<TabButton classy={classy} type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>) 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 ...@@ -106,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
if (!classy){ if (!classy){
classy = "" classy = ""
} }
let classname = "tabbutton " + type + " " + classy; let classname = "btn1 tabbutton " + type + " " + classy;
return( return(
<> <>
<button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button> <button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
...@@ -114,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps ...@@ -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( 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( 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,57 +175,44 @@ function expandIt({it}: {it: string}){ ...@@ -143,57 +175,44 @@ function expandIt({it}: {it: string}){
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-two">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){ export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
const { goToPagesAndOpenTab } = useNavigation(); const { goToPagesAndOpenTab } = useNavigation();
if (openclass) { if (openclass) {
return(
<button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
)
}
else{
return(
<button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
)
}
}
export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:string, scrollId: string, open:string, openclass?: string}){
const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) {
return(
<button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
)
}
else{
return( return(
<div className="boxy-1"> <div className="boxy-1">
<a onClick={() => goToPagesAndOpenTab(open, "")}> <span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one"> <div className="btn-new btn-one">
{text} {text}
</div> </div></span>
</a>
</div> </div>
) )
} }
return(
<div className="boxy-1">
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
</div>
)
} }
export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){ export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
<span typeof="button" onClick={openThem({it: open, scrollToId})}>
<div className="btn-new btn-one">
{label}
</div></span>
</div>
) )
} }
......
src/components/Calendar/Calendar.tsx
View file @ 3fd292fd
...@@ -2,8 +2,8 @@ import { CalTabs } from "./cal-content"; ...@@ -2,8 +2,8 @@ import { CalTabs } from "./cal-content";
export function Calendar(){ export function Calendar(){
let arrows = Arrows(); let arrows: JSX.Element[] = Arrows();
let tabs = CalTabs(); let tabs: JSX.Element[] = CalTabs();
return( return(
<div className="cal"> <div className="cal">
...@@ -38,7 +38,7 @@ let tabs = CalTabs(); ...@@ -38,7 +38,7 @@ let tabs = CalTabs();
function Arrows(){ function Arrows(){
const months = ["February", "March", "April", "May", "June", "July", "August", "September", "October"] 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++) { for (let index = 0; index < months.length; index++) {
if (index == 0) { if (index == 0) {
console.log(`months[index] = ${months[index]}` ) console.log(`months[index] = ${months[index]}` )
...@@ -115,7 +115,6 @@ function switchTo(month: string){ ...@@ -115,7 +115,6 @@ function switchTo(month: string){
console.log("new month is: " + month + " and we are calling " + `${month}-name`) console.log("new month is: " + month + " and we are calling " + `${month}-name`)
if (document.getElementById(`${month}-dates`)) { if (document.getElementById(`${month}-dates`)) {
console.info("document.getElementById(`${month}-dates`); exists")
let newdates = document.getElementById(`${month}-dates`); let newdates = document.getElementById(`${month}-dates`);
(newdates as HTMLElement).style.display = "block"; (newdates as HTMLElement).style.display = "block";
} }
...@@ -270,7 +269,7 @@ const May = <ul id="May-dates" className="days hideable" style={{display: "none" ...@@ -270,7 +269,7 @@ const May = <ul id="May-dates" className="days hideable" style={{display: "none"
<li>19</li> <li>19</li>
<li>20</li> <li>20</li>
<li>21</li> <li>21</li>
<li>22</li> <li><a onClick={showEntry("may22")}><span className="active">22</span></a></li>
<li>23</li> <li>23</li>
<li>24</li> <li>24</li>
<li>25</li> <li>25</li>
......
src/components/Calendar/cal-content.tsx
View file @ 3fd292fd
import { H5 } from "../Headings"; import { H5 } from "../Headings";
import PreCyse from "../precyse";
export function CalTabs(){ export function CalTabs(){
let tablist = []; let tablist: JSX.Element[] = [];
for (let index = 0; index < tabs.length; index++) { for (let index = 0; index < tabs.length; index++) {
tablist.push( tablist.push(
<div className="cal-entry" id={tabs[index].cssname} style={{display: "none"}}> <div className="cal-entry" id={tabs[index].cssname} style={{display: "none"}}>
...@@ -31,7 +32,7 @@ let tabs = [ ...@@ -31,7 +32,7 @@ let tabs = [
<h2>Public Outreach</h2> <h2>Public Outreach</h2>
<p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p> <p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p>
<h2>Jamboree & MeetUps</h2> <h2>Jamboree & MeetUps</h2>
<p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p> <p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p>
...@@ -170,7 +171,7 @@ let tabs = [ ...@@ -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> <p>Cyanobacteria blooms pose significant ecological threats, and current control methods are inadequate. The proposed solution involves using peptides from algae to prevent blooms while preserving ecosystems. Key pathways and targets were identified, emphasizing the need for conservation and biodiversity.</p>
<h3>Fourth Presentation: Cystic Fibrosis</h3> <h3>Fourth Presentation: Cystic Fibrosis</h3>
<p>Cystic fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p> <p>Cystic Fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p>
<h3>Further Presentations</h3> <h3>Further Presentations</h3>
<p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p> <p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p>
...@@ -284,7 +285,7 @@ let tabs = [ ...@@ -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> <p>Plans for the European Meet-Up include creating a list of snacks with names, dates, types, and quantities to ensure adequate preparation.</p>
<h2>Mechanism</h2> <h2>Mechanism</h2>
<p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in cystic fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p> <p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in Cystic Fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p>
<h2>Delivery</h2> <h2>Delivery</h2>
<p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p> <p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p>
...@@ -425,7 +426,7 @@ let tabs = [ ...@@ -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> <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> <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> <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> <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 = [ ...@@ -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> <p>Primer design is challenging due to inexperience, but the team aims to meet BioBrick standards once the vectors are available. Kai and Christian are selecting candidates for Fanzor mutations, and testing editing via GFP is planned, requiring adaptation of the plasmid for stable transfection into cells.</p>
<h2>Human Practices</h2> <h2>Human Practices</h2>
<p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with cystic fibrosis.</p> <p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with Cystic Fibrosis.</p>
<h2>Sponsoring</h2> <h2>Sponsoring</h2>
<p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p> <p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p>
......
src/components/Complex-svg.tsx 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}){ ...@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
</> </>
); );
} }
\ No newline at end of file
src/components/Figures.tsx 0 → 100644
View file @ 3fd292fd
interface FigureProps{
pic1: string,
pic2?: string,
pic3?: string,
pic4?: string,
pic5?: string,
pic6?: string,
alt1: string,
description: React.ReactNode | string,
description2?: React.ReactNode | string,
num: string |number;
num2?: string |number;
bg?: string;
}
export function ThreeVertical({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<img src={pic3} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoVertical({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoHorizontal({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2}className="responsive-image"/>
</div>
<div className="col">
<img src={pic3} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function OneFigure({description, num, pic1, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoFigureRow({description,description2, num, num2, pic1, pic2, bg}:FigureProps) {
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} />
</div>
<div className="col">
<img src={pic2}/>
</div>
</div>
<figcaption>
<div className="row align-items-center">
<div className="col">
<b>Figure {num}:</b> {description}.
</div>
<div className="col">
<b>Figure {num2}:</b> {description2}.
</div>
</div>
</figcaption>
</figure>
</div>
)
}
src/components/Footer.tsx
View file @ 3fd292fd
...@@ -56,12 +56,12 @@ export function Footer() { ...@@ -56,12 +56,12 @@ export function Footer() {
<div className="small-row align-items-center"> <div className="small-row align-items-center">
<div className="col-sm-4"> <div className="col-sm-4">
<div className="col"> <div className="col">
info@igem-bielefeld.de info[at]igem-bielefeld[dot]de
</div> </div>
<div className="col"> </div> <div className="col"> </div>
<div className="col"> <div className="col">
iGEM2024 iGEM2024
Universitätsstraße 25, 33613 Bielefeld Universitätsstraße 25, 33615 Bielefeld
Centrum für Biotechnologie (CeBiTec) Centrum für Biotechnologie (CeBiTec)
Universität Bielefeld Universität Bielefeld
</div> </div>
...@@ -70,37 +70,40 @@ export function Footer() { ...@@ -70,37 +70,40 @@ export function Footer() {
<div className="col-4 footer-slider"> <div className="col-4 footer-slider">
<SimpleSlider> <SimpleSlider>
<a className="sponsor-container" href="https://www.plasmidfactory.com/"> <a className="sponsor-container" href="https://www.plasmidfactory.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
</a> </a>
<a className="sponsor-container" href="https://bio.nrw.de/">
<img className="img-sponsor-partner-page side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bionrw-logo.png"/>
</a>
<a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften"> <a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
</a> </a>
<a className="sponsor-container" href="https://www.jenabioscience.com/"> <a className="sponsor-container" href="https://www.jenabioscience.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
</a> </a>
<a className="sponsor-container" href="https://www.gip.com/home/"> <a className="sponsor-container" href="https://www.gip.com/home/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
</a> </a>
<a className="sponsor-container" href="https://www.integra-biosciences.com"> <a className="sponsor-container" href="https://www.integra-biosciences.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
</a> </a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/"> <a className="sponsor-container" href="https://www.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
</a> </a>
<a className="sponsor-container" href="www.snapgene.com"> <a className="sponsor-container" href="www.snapgene.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
</a> </a>
<a className="sponsor-container" href="https://bts-ev.de/"> <a className="sponsor-container" href="https://bts-ev.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
</a> </a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/"> <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
</a> </a>
<a className="sponsor-container" href="www.idtdna.com"> <a className="sponsor-container" href="www.idtdna.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
</a> </a>
<a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/"> <a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
</a> </a>
</SimpleSlider> </SimpleSlider>
</div> </div>
......
src/components/Graph.tsx
View file @ 3fd292fd
This diff is collapsed.
src/components/HP-timeline.tsx
View file @ 3fd292fd
import { TabButtonRow } from "./Buttons"; import { TabButtonRow } from "./Buttons";
import TimeHori from "./HorizontalTimeline"; import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs"; import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
import { timelinedata } from "../data/hptimelinedata"; import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){ export function HPTimeline(){
return( return(
<section id="Timeline" className="section"> <section id="Timeline" className="section">
<p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
<div className="center"> <div className="center">
</div> </div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" /> <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
...@@ -41,7 +42,23 @@ export function HPTimeline(){ ...@@ -41,7 +42,23 @@ export function HPTimeline(){
node: <TimeHori tab="Industry" ></TimeHori>, node: <TimeHori tab="Industry" ></TimeHori>,
buttonname: "Industry", buttonname: "Industry",
cssname: "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"; import { Hwave } from "./Headings";
interface Props{ interface Props{
title: string, title: string ,
title2?: string, title2?: string,
children?: React.ReactNode, 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 = ""; var ti: string = "";
if (title2) { if (title2) {
ti = title2; ti = title2;
} }
return( return(
<> <>
<div className="row"> <div className="col">
<div className="col header-container"> <div className="col header-container">
<div className="row header-title"> <div className="row header-title" id={id}>
<Hwave text={title}></Hwave> <Hwave text={title}></Hwave>
<Hwave text={ti}></Hwave> <Hwave text={ti}></Hwave>
......
src/components/Headings.tsx
View file @ 3fd292fd
import { stringToSlug } from "../utils"; import { stringToSlug } from "../utils";
export function Hhopp({text, id}:{text: string, id?: string}){ export function Hhopp({text, id}:{text: string, id?: string}){
const arr = []; const arr: JSX.Element[] = [];
var idtext: string; var idtext: string;
if (id) { if (id) {
idtext = id; idtext = id;
...@@ -21,7 +21,7 @@ export function Hhopp({text, id}:{text: string, id?: string}){ ...@@ -21,7 +21,7 @@ export function Hhopp({text, id}:{text: string, id?: string}){
} }
export function Hsmoke({text, id}:{text: string, id?: string}){ export function Hsmoke({text, id}:{text: string, id?: string}){
const arr = []; const arr: JSX.Element[] = [];
var idtext: string; var idtext: string;
if (id) { if (id) {
idtext = id; idtext = id;
...@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){ ...@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<div className="h2-box"> <div>
<h2 className="h2" id={idtext}>{text}</h2> <h1 id={idtext}>{text}</h1>
</div> </div>
) )
...@@ -89,7 +89,15 @@ export function H3({text, id}:{text: string, id?: string}){ ...@@ -89,7 +89,15 @@ export function H3({text, id}:{text: string, id?: string}){
} }
return( return(
<div> <div>
<h3 className="h3" id={idtext}> {text} </h3> <h2 id={idtext}> {text} </h2>
</div>
)
}
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
return(
<div>
<h2 id={id}> {children} </h2>
</div> </div>
) )
...@@ -104,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){ ...@@ -104,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){
} }
return( return(
<div> <div>
<h4 className="h4" id={idtext}> {text} </h4> <h3 id={idtext}> {text} </h3>
</div> </div>
) )
...@@ -118,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){ ...@@ -118,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<div className="h5-box"> <h4 id={idtext}> {text} </h4>
<h5 className="h5" id={idtext}> {text} </h5>
</div>
) )
} }
...@@ -150,7 +156,7 @@ export function Hwave({text, id}:{text: string, id?: string}){ ...@@ -150,7 +156,7 @@ export function Hwave({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<svg id={idtext} className="bigtitle" viewBox="0 0 100 20"> /* <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
<defs> <defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stopColor="#850F78"/> <stop offset="5%" stopColor="#850F78"/>
...@@ -169,9 +175,32 @@ export function Hwave({text, id}:{text: string, id?: string}){ ...@@ -169,9 +175,32 @@ export function Hwave({text, id}:{text: string, id?: string}){
</path> </path>
</pattern> </pattern>
</defs> </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="white" fillOpacity="1">{text}</text>
<text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.3">{text}</text> <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)" fillOpacity="0.7">{text}</text>
</svg> <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"; 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; let cl = "t-tag " + tag;
return( return(
<li className="timelineolli"> <li className="timelineolli">
<div className="timeline-item moretop"> <div className="timeline-item moretop">
<div className=""> <div className="">
<div className={cl}> <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
{tag} <div className={cl}>
</div> {tag}
</div>
<div className="row align-items-center"> <div className="col">
<div className="col" >
<img className="img-round" src={pic}/>
</div> </div>
<div className="col" > <div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
{title} {month}
</div> </div>
</div> </div>
<div className="row align-items-center">
<div className="fillup-wrapper">
<div className="row align-items-center fillup">
<div className="col" >
<img className="img-round" src={pic} />
</div>
<div className="col" >
{title}
</div>
</div>
</div>
<div className="row align-items-center hpbuttonrow">
<div className="col"> <div className="col">
<p style={{marginTop: "10px"}}>{author}</p> <p style={{marginTop: "10px"}}>{author}</p>
</div> </div>
<div className="col-4"> <div className="col-4">
<div className="tab"> <div className="tab">
<HPMoreButton name={tabid}/> <NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
</div> </div>
</div> </div>
</div> </div>
...@@ -36,30 +46,42 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -36,30 +46,42 @@ 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( return(
<li className="timelineolli"> <li className="timelineolli">
<div className="timeline-item time-meta moretop"> <div className="timeline-item time-meta moretop">
<div className=""> <div className="">
<div className=" t-tag colour-meta-tag"> <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
{tag} <div className={`${cl} col-6 t-tag `}>
</div> {tag}
</div>
<div className="row align-items-center"> <div className="col">
<div className="col" >
<img className="img-cube" src={pic} />
</div> </div>
<div className="col" > <div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
{title} {month}
</div> </div>
</div> </div>
<div className="row align-items-center">
<div className="fillup-wrapper">
<div className="row align-items-center fillup">
<div className="col" >
<img className="img-cube" src={pic} />
</div>
<div className="col" >
{title}
</div>
</div>
</div>
<div className="row align-items-center hpbuttonrow">
<div className="col"> <div className="col">
<p style={{marginTop: "10px"}}>{author}</p> <p style={{marginTop: "10px"}}>{author}</p>
</div> </div>
<div className="col-4"> <div className="col-4">
<div className="tab"> <div className="tab">
<HPMoreButton name={tabid}/> <NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
</div> </div>
</div> </div>
</div> </div>
...@@ -71,7 +93,51 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -71,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}){ export default function TimeHori({tab}:{tab: string}){
let nod; let nod;
...@@ -104,18 +170,19 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -104,18 +170,19 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
interface ItemProps { interface ItemProps {
title: string , title: string ,
children: React.ReactNode; children?: React.ReactNode;
tag: string, tag: string,
pic: string, pic: string,
author: string, author: string,
tabid: string tabid: string
month: string
} }
function AllItems(){ function AllItems(){
let rows = [] let rows: JSX.Element[] = []
for ( let i = 0; i < timelinedata.length; i++ ){ for ( let i = 0; i < timelinedata.length; i++ ){
if (timelinedata[i].type === "meta"){ if (timelinedata[i].type === "meta"){
var name: string; var name: string;
...@@ -131,8 +198,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -131,8 +198,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
tag={timelinedata[i].tag} tag={timelinedata[i].tag}
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
> month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItemMeta>) </TimeItemMeta>)
} }
else{ else{
...@@ -148,9 +214,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -148,9 +214,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
pic={timelinedata[i].pictureurl} pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag} tag={timelinedata[i].tag}
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
> month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>) </TimeItem>)
} }
...@@ -160,7 +225,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -160,7 +225,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
export function getItemsByType(tabid: string) { export function getItemsByType(tabid: string) {
let rows = [] let rows: JSX.Element[] = []
for (let i = 0; i < timelinedata.length; i++) { for (let i = 0; i < timelinedata.length; i++) {
if (tabid === timelinedata[i].tag) { if (tabid === timelinedata[i].tag) {
var name: string; var name: string;
...@@ -171,14 +236,13 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ...@@ -171,14 +236,13 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
name = timelinedata[i].vorname + " " + timelinedata[i].nachnname; name = timelinedata[i].vorname + " " + timelinedata[i].nachnname;
} }
rows.push(<TimeItem rows.push(<TimeItem
key={i} key={i}
title={timelinedata[i].heading} title={timelinedata[i].heading}
pic={timelinedata[i].pictureurl} pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag} tag={timelinedata[i].tag}
author={name} author={name}
tabid={timelinedata[i].interviewtabid} tabid={timelinedata[i].interviewtabid}
> month={timelinedata[i].months} >
{timelinedata[i].cardtext}
</TimeItem>) </TimeItem>)
} }
} }
......
src/components/Link.tsx
View file @ 3fd292fd
import { useNavigation } from "../utils" import { useNavigation } from "../utils"
import { Ourlink } from "./interfaces";
export function TabScrollLink({tab, scrollId, num}:{tab: string, scrollId: string, num: string}){ export function TabScrollLink({tab, scrollId, num}:{tab: string, scrollId: string, num: string}){
const {goToPageWithTabAndScroll} = useNavigation(); const {goToPageWithTabAndScroll} = useNavigation();
return( return(
<sup><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scrollId})}>{num}</a></sup> <sup><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scrollId})}>{num}</a></sup>
) )
}
// 2^4 = 16 possible combinations + special cases müssen eventuell ergänzt werden
export function OurLink({path, scrollToId, tabId, subTabId, collapseId, text, tabincolId}:Ourlink){
const {goToPlace} = useNavigation();
// 1. [1-1-1-1] go to page and open tab and open subTab and open colapsible in subtab and scroll to something
if(tabId && subTabId && scrollToId && collapseId && !tabincolId) {
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
}
// special case if a tab in the collapsible shall be opened too
if(tabId && subTabId && scrollToId && collapseId && tabincolId) {
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
// 2. [1-1-1-0] go to page and open tab and open subtab and scroll to something
else if (tabId && subTabId && scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId})}>{text}</a>)
}
//++3. [1-1-0-1] go to page and open tab and open collapsible
else if (tabId && subTabId && !scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, collapseId:collapseId})}>{text}</a>)
}
//special case: go to page and open tab and open collapsible and open tab in collapsible
else if (tabId && subTabId && !scrollToId && collapseId &&tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
//++4. [1-1-0-0] go to page and opent tab and open subtab NO SCROLLING
else if (tabId && subTabId && !scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId})}>{text}</a>)
}
//++5. [1-0-1-1] go to page and open tab and open collapsible and scroll to something in the collapsible
else if (tabId && !subTabId && scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
}
//special case: go to page and open tab and open collapsible open tab i collapsible and scroll to something in the tab
else if (tabId && !subTabId && scrollToId && collapseId && tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
//++6. [1-0-1-0] go to page and open tab and scroll to something
else if (tabId && !subTabId && scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId})}>{text}</a>)
}
//++7. [1-0-0-1] go to page and open tab and open collapsible in tab
else if (tabId && !subTabId && !scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, collapseId:collapseId})}>{text}</a>)
}
//special case: go to page and open tab and open collapsible in tab and open tab in collapsible
else if (tabId && !subTabId && !scrollToId && collapseId && tabincolId){
return(<a onClick={() => goToPlace({path: path, tabId: tabId, collapseId:collapseId, tabincolId:tabincolId})}>{text}</a>)
}
//++8. [1-0-0-0] go to page and open a tab
else if (tabId && !subTabId && !scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, tabId:tabId})}>{text}</a>)
}
//++9. [0-1-1-1] go to page and open a collapsible and open a subtab in the collapsible and scroll to something in the subtab
else if (!tabId && tabincolId && scrollToId && collapseId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, tabincolId:tabincolId, scrollToId:scrollToId})}>{text}</a>)
}
//++10. [0-1-1-0] it is not possible to only open a subtab and scroll to something there
/* */
//++11. [0-1-0-1] go to page and open a collapsible and scroll to something in the collapsible
else if (!tabId && subTabId && !scrollToId && collapseId && !tabincolId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, subTabId:subTabId})}>{text}</a>)
}
//special case: go to page and open a collapsible and open a tab in the collapsible and scroll to something in the tab
else if (!tabId && subTabId && !scrollToId && collapseId && tabincolId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, subTabId:subTabId, tabincolId:tabincolId})}>{text}</a>)
}
//++12: [0-1-0-0] it is not possible to go to a page and only open a subtab
/* */
//++13. [0-0-1-1] go to page and open a collapsible scroll to something in the collapsible
else if (!tabId && !subTabId && scrollToId && collapseId){
return(<a onClick={() => goToPlace({path: path, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
}
//++14. [0-0-1-0] go to a page and scroll to something
else if (!tabId && !subTabId && scrollToId && !collapseId){
return(<a onClick={() => goToPlace({path: path, scrollToId:scrollToId})}>{text}</a>)
}
// 15. [0-0-0-1] go to a page and open a collapsible
else if (!tabId && !subTabId && !scrollToId && collapseId){
return(<a onClick={() => goToPlace({path: path, collapseId:collapseId})}>{text}</a>)
}
// 16. [0-0-0-0] Catch all - just go to the page
else {
return(<a onClick={() => goToPlace({path: path})}>{text}</a>)
}
} }
\ No newline at end of file
src/components/Loremipsum.tsx
View file @ 3fd292fd
export function LoremMedium(){ export function LoremMedium(){
return( return(
<> <p className="lorem">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
...@@ -8,14 +8,14 @@ Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie co ...@@ -8,14 +8,14 @@ Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie co
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</> </p>
) )
} }
export function LoremShort(){ export function LoremShort(){
return( return(
<> <p className="lorem">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</> </p>
) )
} }
\ No newline at end of file
src/components/Navbar.tsx
View file @ 3fd292fd
import { useEffect, useRef } from 'react';
import Container from "react-bootstrap/Container"; import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav"; import Nav from "react-bootstrap/Nav";
import BootstrapNavbar from "react-bootstrap/Navbar"; import BootstrapNavbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown"; import NavDropdown from "react-bootstrap/NavDropdown";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { NavPages } from "../pages.ts"; import {NavPages }from "../pages.ts";
export function Navbar(/* {isLightMode, setIsLightMode}:any */) { export function Navbar() {
const navbarCollapseRef = useRef<HTMLDivElement>(null);
const progressBarRef = useRef<HTMLDivElement>(null);
const progressImageRef = useRef<HTMLImageElement>(null);
let scrollTimeout: NodeJS.Timeout;
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Use document.body.scrollHeight to get the full height of the document
const scrollHeight = document.body.scrollHeight - window.innerHeight;
// Calculate the scroll percentage properly
const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
// Only collapse the navbar on larger screens (greater than 768px)
// Progress bar logic
if (progressBarRef.current) {
progressBarRef.current.style.width = `${scrollPercentage}%`;
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (progressImageRef.current) {
progressImageRef.current.classList.remove('walking');
progressImageRef.current.style.transform = 'translateY(0)';
}
}, 1000);
}
};
const onLoad = () => {
// Trigger scroll event manually to ensure progress is set correctly on load
handleScroll();
};
// Listen for the page load event to ensure content is fully loaded
window.addEventListener('scroll', handleScroll);
window.addEventListener('load', onLoad); // Trigger when the page is fully loaded
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('load', onLoad);
clearTimeout(scrollTimeout);
};
}, []);
useEffect(() => {
const handleLinkClick = (event: Event) => {
if (navbarCollapseRef.current && navbarCollapseRef.current.classList.contains('show')) {
const target = event.target as HTMLElement;
if (target.closest('.dropdown-text')) {
navbarCollapseRef.current.classList.remove('show');
}
}
};
const links = document.querySelectorAll('.navbar-text');
links.forEach(link => link.addEventListener('click', handleLinkClick));
return () => {
links.forEach(link => link.removeEventListener('click', handleLinkClick));
};
}, []);
// Handle the dropdown toggle state individually
/* const handleToggle = () => {
setIsLightMode(!isLightMode);
}; */
const pages = NavPages.map((item, pageIndex) => { const pages = NavPages.map((item, pageIndex) => {
if ("folder" in item && item.folder) { if ("folder" in item && item.folder) {
...@@ -20,11 +91,12 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) { ...@@ -20,11 +91,12 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
key={`subpage-${pageIndex}-${subpageIndex}`} key={`subpage-${pageIndex}-${subpageIndex}`}
as={Link} as={Link}
to={subpage.path} to={subpage.path}
> >
{subpage.name} {subpage.name}
</NavDropdown.Item> </NavDropdown.Item>
); );
} }
return null;
}); });
return ( return (
<NavDropdown <NavDropdown
...@@ -32,7 +104,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) { ...@@ -32,7 +104,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
title={item.name} title={item.name}
renderMenuOnMount={true} renderMenuOnMount={true}
id="basic-nav-dropdown" id="basic-nav-dropdown"
> >
{folderItems} {folderItems}
</NavDropdown> </NavDropdown>
); );
...@@ -49,7 +121,19 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) { ...@@ -49,7 +121,19 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
<BootstrapNavbar className="navbar-custom" expand="lg" bg="bg-transparent" variant="light"/* bg={isLightMode ? "d" : "l"} variant={isLightMode ? "dark" : "light"} */fixed="top"> <BootstrapNavbar className="navbar-custom" expand="lg" bg="bg-transparent" variant="light"/* bg={isLightMode ? "d" : "l"} variant={isLightMode ? "dark" : "light"} */fixed="top">
<Container> <Container>
<BootstrapNavbar.Brand> <BootstrapNavbar.Brand>
{import.meta.env.VITE_TEAM_NAME} <div className="row">
<div className="col" style={{width: "fit-content"}}>
<a href='home'><img src='https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png' style={{maxHeight: "5vh"}}/> </a>
</div>
<div className="col" style={{width: "fit-content"}}>
<img src='https://static.igem.wiki/teams/5247/logos-team/line-for-logos-offblack.svg' style={{maxHeight: "5vh"}}/>
</div>
<div className="col" style={{width: "fit-content"}}>
<a href='igem-bielefeld'> <img src='https://static.igem.wiki/teams/5247/logos-team/igem-bielefeld-logo-our-colours.png' style={{maxHeight: "5vh"}}/>
</a>
</div>
</div>
</BootstrapNavbar.Brand> </BootstrapNavbar.Brand>
<BootstrapNavbar.Toggle aria-controls="basic-navbar-nav"/> <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav"/>
<BootstrapNavbar.Collapse id="basic-navbar-nav"> <BootstrapNavbar.Collapse id="basic-navbar-nav">
...@@ -58,8 +142,11 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) { ...@@ -58,8 +142,11 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
{isLightMode ? '🌙' : '🔆' } {isLightMode ? '🌙' : '🔆' }
</button> */} </button> */}
{pages} {pages}
</Nav> </Nav>
</BootstrapNavbar.Collapse> </BootstrapNavbar.Collapse>
<div id="scroll-progress" className="scroll-progress" ref={progressBarRef}>
</div>
</Container> </Container>
</BootstrapNavbar> </BootstrapNavbar>
); );
......
src/components/Pdfs.tsx
View file @ 3fd292fd
...@@ -3,13 +3,20 @@ import { ButtonOne, DownloadLink } from "./Buttons" ...@@ -3,13 +3,20 @@ import { ButtonOne, DownloadLink } from "./Buttons"
export function PDF({link, name}: {link: string, name:string}){ export function PDF({link, name}: {link: string, name:string}){
return( return(
<div className='row align-items-center'>
<iframe src={link} width="100%" title="title" className='one-pdf-line small-i'> <div className="col">
</iframe> <div className='align-items-center'>
<div className='row download-col'> <div className="iframe-container">
<DownloadLink url={link} fileName={name} ></DownloadLink> <iframe src={link} title="title" className='one-pdf-line small-i'>
</div> </iframe>
</div> </div>
</div>
<div className='row download-col'>
<DownloadLink url={link} fileName={name} ></DownloadLink>
</div>
</div>
) )
} }
export function TwoLinePDF({link, name}: {link: string, name:string}){ export function TwoLinePDF({link, name}: {link: string, name:string}){
...@@ -26,7 +33,7 @@ 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(){ export default function BFHpdf(){
return( return(
<> <>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}> <div className="row align-items-center" >
<div className="col"> <div className="col">
<ButtonOne text="Flyers" open="flyers"></ButtonOne> <ButtonOne text="Flyers" open="flyers"></ButtonOne>
</div> </div>
......
src/components/Photo-grid.tsx
View file @ 3fd292fd
...@@ -17,32 +17,40 @@ const images = [ ...@@ -17,32 +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/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/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/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/orgateam.jpeg", 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/badges.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/joern.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/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/sinan.jpeg", width: 320, height: 212, tabs: ""},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/party.jpeg", width: 320, height: 212}, {src:"https://static.igem.wiki/teams/5247/photos/meetup/socializing11.jpeg", width: 320, height: 212},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.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/orgateam.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/orgateam.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/orgateam.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:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.jpeg", width: 320, height: 212},
] ]
export default function BFHGallery(){
let rows = []
for ( let i = 0; i < images.length; i++ ){ export default function BFHGallery() {
rows.push(<div><img src={images[i].src}/></div>) 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"> return <div className="bfhgal">{rows}</div>;
{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(){ ...@@ -63,7 +63,7 @@ function Sidebar(){
console.log(nums) console.log(nums)
let content = []; let content: JSX.Element[] = [];
for(let idx in nums){ for(let idx in nums){
const item = nums[idx]; const item = nums[idx];
/* console.log("idx: " + idx); /* console.log("idx: " + idx);
......
src/components/Svgs.tsx
View file @ 3fd292fd
This diff is collapsed.