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(){
<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,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}){
const { goToPagesAndOpenTab } = useNavigation();
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(
<div className="boxy-1">
<a onClick={() => goToPagesAndOpenTab(open, "")}>
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div></span>
</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}){
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
This diff is collapsed.
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;
}
return(
<>
<div className="row">
<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>
<div className="row align-items-center">
<div className="col" >
<img className="img-round" src={pic}/>
<div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
<div className={cl}>
{tag}
</div>
<div className="col">
</div>
<div className="col" >
{title}
<div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
{month}
</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">
<p style={{marginTop: "10px"}}>{author}</p>
</div>
<div className="col-4">
<div className="tab">
<HPMoreButton name={tabid}/>
<NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
</div>
</div>
</div>
......@@ -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(
<li className="timelineolli">
<div className="timeline-item time-meta moretop">
<div className="">
<div className=" t-tag colour-meta-tag">
{tag}
</div>
<div className="row align-items-center">
<div className="col" >
<img className="img-cube" src={pic} />
<div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
<div className={`${cl} col-6 t-tag `}>
{tag}
</div>
<div className="col">
</div>
<div className="col" >
{title}
<div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
{month}
</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">
<p style={{marginTop: "10px"}}>{author}</p>
</div>
<div className="col-4">
<div className="tab">
<HPMoreButton name={tabid}/>
<NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
</div>
</div>
</div>
......@@ -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}){
let nod;
......@@ -104,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;
......@@ -131,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{
......@@ -148,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>)
}
......@@ -160,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;
......@@ -171,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/Loremipsum.tsx
View file @ 3fd292fd
export function LoremMedium(){
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.
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
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
</>
</p>
)
}
export function LoremShort(){
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.
</>
</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 Nav from "react-bootstrap/Nav";
import BootstrapNavbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
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) => {
if ("folder" in item && item.folder) {
......@@ -20,11 +91,12 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
key={`subpage-${pageIndex}-${subpageIndex}`}
as={Link}
to={subpage.path}
>
>
{subpage.name}
</NavDropdown.Item>
);
}
return null;
});
return (
<NavDropdown
......@@ -32,7 +104,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
title={item.name}
renderMenuOnMount={true}
id="basic-nav-dropdown"
>
>
{folderItems}
</NavDropdown>
);
......@@ -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">
<Container>
<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.Toggle aria-controls="basic-navbar-nav"/>
<BootstrapNavbar.Collapse id="basic-navbar-nav">
......@@ -58,8 +142,11 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
{isLightMode ? '🌙' : '🔆' }
</button> */}
{pages}
</Nav>
</BootstrapNavbar.Collapse>
</Nav>
</BootstrapNavbar.Collapse>
<div id="scroll-progress" className="scroll-progress" ref={progressBarRef}>
</div>
</Container>
</BootstrapNavbar>
);
......
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,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/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/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/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/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/orgateam.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},
{src:"https://static.igem.wiki/teams/5247/photos/meetup/orgateam.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/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},
]
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.