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
Hide whitespace changes
Inline Side-by-side
Showing
with 1687 additions and 566 deletions
src/components/HorizontalTimeline.tsx
View file @ 3fd292fd
import { HPMoreButton } from "./Buttons";
function TimeItem({tag, title, pic, author, tabid}: ItemProps){
import { NewHPMoreButton } from "./Buttons";
import { timelinedata } from "../data/hptimelinedata";
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,20 +93,53 @@ 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 AllPopus(){
let rows = []
for ( let i = 0; i < data.length; i++ ){
rows.push(<Popup person={data[i].author}>
Hi
</Popup>)
}
return rows;
}
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 function TimeHori({tab}:{tab: string}){
export default function TimeHori({tab}:{tab: string}){
let nod;
/* console.log("TimeHori") */
if (tab === ""){
......@@ -110,87 +165,57 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
)
}
function Open({person}:{person: string}){
const openPop = (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
var popup = document.getElementById(person);
popup!.classList.toggle("show");
}
return openPop;
}
interface PopProps {
person: string,
children: React.ReactNode
}
function Popup({person, children}: PopProps){
return(
<div id="myPopup" className="popup">
<span className="popuptext" id={person}>
<div>
{children}
</div>
<button onClick={Open({person})} >Close</button>
</span>
</div>
)
}
export function openCity({cityName}:{cityName: string}) {
const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
(tabcontent[i] as HTMLElement).style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName)!.style.display = "block";
event.currentTarget.className += " active";
}
return opencity;
}
interface ItemProps {
title: string ,
children: React.ReactNode;
children?: React.ReactNode;
tag: string,
pic: string,
author: string,
tabid: string
month: string
}
function AllItems(){
let rows = []
for ( let i = 0; i < data.length; i++ ){
if (data[i].type === "meta"){
let rows: JSX.Element[] = []
for ( let i = 0; i < timelinedata.length; i++ ){
if (timelinedata[i].type === "meta"){
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(<TimeItemMeta
title={data[i].title}
pic={data[i].pic}
tag={data[i].tag}
author={data[i].author}
tabid={data[i].tabid}
>
{data[i].text}
title={timelinedata[i].heading}
pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
</TimeItemMeta>)
}
else{
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
title={data[i].title}
pic={data[i].pic}
tag={data[i].tag}
author={data[i].author}
tabid={data[i].tabid}
>
{data[i].text}
title={timelinedata[i].heading}
pic={timelinedata[i].pictureurl}
tag={timelinedata[i].tag}
author={name}
tabid={timelinedata[i].interviewtabid}
month={timelinedata[i].months} >
</TimeItem>)
}
......@@ -200,266 +225,28 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
export function getItemsByType(tabid: string) {
let rows = []
for (let i = 0; i < data.length; i++) {
if (tabid === data[i].tag) {
let rows: JSX.Element[] = []
for (let i = 0; i < timelinedata.length; i++) {
if (tabid === 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={data[i].title}
pic={data[i].pic}
tag={data[i].tag}
author={data[i].author}
tabid={data[i].tabid}
>
{data[i].text}
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;
}
let data = [
{
title: "Team",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Tag",
author: "Name",
tabid: "",
text: " ",
type: "meta"
},
{
title: "Erste Presi",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Tag",
author: "Name",
tabid: "",
text: " ",
type: "meta"
},
{
title: "Verworfenes",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Tag",
author: "Name",
tabid: "",
text: " ",
type: "meta"
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Kristian",
tabid: "",
text: " "
},
{
title: "First Impression",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Patient",
author: "Max Beckmann",
tabid: "InvMax1",
text: " "
},
{
title: "Approach??" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Prof. Dr. Christoph Weber",
tabid: "InvWeber",
text: "Text",
},
{
title: "Brainstorming",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Tag",
author: "Name",
tabid: "",
text: " ",
type: "meta"
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Industry",
author: "Michaela",
tabid: "",
text: " "
},
{
title: "More Experts",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Tag",
author: "Name",
tabid: "",
text: " ",
type: "meta"
},
{
title: "Progress",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Tag",
author: "Name",
tabid: "",
text: " ",
type: "meta"
},
{
title: "Breathing therapy" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Medical Professional",
author: "Katrin Westhoff",
tabid: "InvWesthoff",
text: "Text",
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Medical Professional",
author: "Cristian-Gabriel Olariu",
tabid: "InvOlariu",
text: "Text",
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Mattijs Bulcaen",
tabid: "InvBulcaen1",
text: "Text",
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Nicole Friedlein",
tabid: "InvFriedlein",
text: "Text",
},
{
title: "Physiotherapie live" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Medical Professional",
author: "Katrin Westhoff",
tabid: "BesWesthoff",
text: "Text",
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Patient",
author: "Julia",
tabid: "InvJulia",
text: "Text",
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Patient",
author: "Joshua",
tabid: "InvJoshua",
text: "Text",
},
{
title: "Research Group Cellular Neurophysiology" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Prof. Dr. Erhard Wischmeyer",
tabid: "InvWischmeyer",
text: "Text",
},
/* {
title: "Approach??" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Prof. Dr. Stefan Hammer",
tabid: "InvHammer",
text: "Text",
}, */
{
title: "First Steps in LNP" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Dr. Katharina Kolonko",
tabid: "InvKolonko",
text: "Text",
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Vinke",
tabid: "",
text: " "
},
{
title: "Hygiene Concept",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Patient",
author: "Max Beckmann",
tabid: "InvMax2",
text: " "
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Dr. Eva-Maria Berens",
tabid: "Berens",
text: ""
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Collabs",
tabid: "",
text: " "
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Industry",
author: "RNale",
tabid: "InvRNale",
text: "Text",
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "LiU",
tabid: "",
text: " "
},
{
title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Corden Pharma",
tabid: "",
text: " "
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Mattijs Bulcaen",
tabid: "InvBulcaen2",
text: "Text",
},
{
title: "Research Group Cellular Neurophysiology" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Dr. Oliver Dräger",
tabid: "InvWischmeyer",
text: "Text",
},
]
\ No newline at end of file
\ No newline at end of file
src/components/ImageEvent.tsx deleted 100644 → 0
View file @ 629d14c7
import React from 'react';
import Event from './Event';
import { joinClassNames } from './classNames';
export function ImageAtom({ src, alt }:{src: string, alt: string}) {
return <img className='img-timeline' src={src} alt={alt}/>;
}
function ImageCredit({ text}:{text: string}) {
return (
<div className='img-credit'>
{text}
</div>
);
}
function ImageText({ text, }:{text: string}) {
return (
<div className='img-text'>
{text}
</div>
);
}
interface ImageEventProps{
date : string,
src: string,
alt: string,
credit: string,
text: string,
marker?: React.ReactNode,
children?: React.ReactNode,
id: string,
card?: Function,
}
/**
* Renders a responsive image as an event.
*/
export const ImageEvent = ({date,src,alt,credit,text,children,id,card,}: ImageEventProps) => {
return (
<Event
className={joinClassNames({ classNames: ['image-event'] })}
date={date}
card={card}
id={id}
text={text} layout='default' >
{text && <ImageText text={text} />}
<ImageAtom src={src} alt={alt} />
{credit && <ImageCredit text={credit} />}
{children}
</Event>
);
}
export default ImageEvent;
\ No newline at end of file
src/components/Link.tsx 0 → 100644
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 → 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/MindMapTwo.tsx 0 → 100644
View file @ 3fd292fd
export function MindMapTwo(){
return(
<div className="mindmap">
{/* <!--LEFT--> */}
<ol className="children children_leftbranch">
<li className="children_item">
<div className="node" >
<div id="L1" className="node_text"> Medical <br/> Professionals</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="L1.1" className="node_text">Katrin</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="L1.2" className="node_text">Cristian</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="L2" className="node_text">Industry</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div className="node_text">L2.1</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.2</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.3</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="L3" className="node_text">iGEM</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div className="node_text">L2.1</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.2</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">L2.3</div>
</div>
</li>
</ol>
</li>
</ol>
{/* <!--CENTER--> */}
<div className="node node_root">
<div className="node_text">Stakeholders</div>
</div>
{/* <!--RIGHT--> */}
<ol className="children children_rightbranch">
<li className="children_item">
<div className="node">
<div id="R1" className="node_text">Patients & <br/> next of kin </div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="R1.1" className="node_text">Max</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="R1.2" className="node_text">Julia</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="R1.3" className="node_text">Joshua</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="R2" className="node_text">Academia</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="R2.1" className="node_text">Mattijs</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R2.2</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R2.3</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R2.4</div>
</div>
</li>
</ol>
</li>
<li className="children_item">
<div className="node">
<div id="R3" className="node_text">Society</div>
</div>
<ol className="children">
<li className="children_item">
<div className="node">
<div id="R3.1" className="node_text">Krankk.</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div id="R3.2" className="node_text">Ethik</div>
</div>
</li>
<li className="children_item">
<div className="node">
<div className="node_text">R3.3</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
)
}
\ 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 → 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 → 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/PrimeGuide.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function PrimeGuideAnimOne(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
return (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone1.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone2.webp">
</img>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone3.webp">
</img>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone4.webp">
</img>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone5.webp">
</img>
</div>
</>
);
}
export function PrimeGuideAnimTwo(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
const [isVisible6, setVisible6] = useState(false);
const domRef6 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible6(entry.isIntersecting));
});
observer.observe(domRef6.current!);
}, []);
return (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo1.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo2.webp">
</img>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo3.webp">
</img>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo4.webp">
</img>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo5.webp">
</img>
</div>
{/* Six */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible6 ? '1' : '0'}`,
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
ref={domRef6}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo6.webp">
</img>
</div>
</>
);
}
\ No newline at end of file
src/components/Problems.tsx 0 → 100644
View file @ 3fd292fd
import { useEffect, useRef, useState } from "react";
export function Problems(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
const [isVisible2, setVisible2] = useState(false);
const domRef2 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible2(entry.isIntersecting));
});
observer.observe(domRef2.current!);
}, []);
const [isVisible3, setVisible3] = useState(false);
const domRef3 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible3(entry.isIntersecting));
});
observer.observe(domRef3.current!);
}, []);
const [isVisible4, setVisible4] = useState(false);
const domRef4 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible4(entry.isIntersecting));
});
observer.observe(domRef4.current!);
}, []);
const [isVisible5, setVisible5] = useState(false);
const domRef5 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible5(entry.isIntersecting));
});
observer.observe(domRef5.current!);
}, []);
const Title1 = "Cystic Fibrosis";
const Title2 = "makes life breathtaking";
const Prob11 = "Thick mucus blocking airway and prevents"
const Prob12 = "oxygen absorption, leading to bronchial"
const Prob13 = "obstructions, organ failue an death" ;
const Prob21 = "Chronic inflammation occurs periodically";
const Prob22 = "due to a high vulnerability ";
const Prob23 = "to bacterial and viral infections";
const Prob31 = "Heightened safety considerations and";
const Prob32 = "emotional stress promote depression";
const Prob33 = "and psychological issues";
return (
<>
{/* One */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
</img>
</div>
{/* Two */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
</div>
{/* Three */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
</div>
{/* Four */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
</div>
{/* Five */}
<div
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p id="breatht1"style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p id="breatht2"style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p id="breath3"style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}></p>
</div>
<div id="sciency"></div>
</>
);
}
\ No newline at end of file
src/components/Quiz.tsx 0 → 100644
View file @ 3fd292fd
import { HideSolution, ShowSolution } from "./Buttons";
interface QuizProps{
name: string;
front: string;
back: string
}
export function QuizQuestion({name, front, back}: QuizProps){
return(
<div className="quiz-wrapper">
<div className="col quiz-front" id={`front-${name}`}>
{QuizHeading}
<div className="row quiz-text">
<div className="col">
{front}
</div>
</div>
<br/>
<div className="row quiz-button-box">
<ShowSolution element={name}/>
</div>
</div>
<div className="col quiz-back" id={`back-${name}`} style={{display: "none"}}>
{QuizHeading}
<div className="row quiz-text">
<div className="col">
{back}
</div>
</div>
<br/>
<div className="row quiz-button-box">
<HideSolution element={name}/>
</div>
</div>
</div>
)
}
const QuizHeading = <div className="col"><div className="quiz-heading">Quiz Question!</div></div>
\ No newline at end of file
src/components/Quotes.tsx
View file @ 3fd292fd
......@@ -4,10 +4,10 @@ export function BlockQuote({text, cite}: {text: string; cite: string}){
return(
<div className="blockquote-wrapper">
<div className="blockquote">
<h2>
<h2 className="block-h2">
{text}
</h2>
<h4><em>{cite}</em></h4>
<h4 className="block-h4"><em>{cite}</em></h4>
</div>
</div>
)
......@@ -19,10 +19,10 @@ export function BlockQuoteB({text, cite, id}: {text: string; cite: string, id?:
return(
<div className="blockquote-wrapper">
<div className="blockquotex">
<h2>
<h2 className="block-h2">
{text}
</h2>
<h4><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
<h4 className="block-h4"><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
</div>
</div>
)
......
src/components/goto.tsx → src/components/ScrollLink.tsx
View file @ 3fd292fd
import { openThem } from "../contents";
export const goTo = (el: HTMLElement): void => {
const elementRect = el.getBoundingClientRect();
const elementTop = elementRect.top + window.pageYOffset; // Absolute position from the top of the document
const viewportHeight = window.innerHeight;
// Calculate the scroll position so the top of the element is centered in the viewport
const middlePosition = elementTop - (viewportHeight / 2 - el.offsetHeight / 2);
window.scrollTo({
top: middlePosition,
behavior: 'smooth'
});
};
/* import { openThem } from "../contents";
*/
import { goTo } from "../utils/goto";
interface ScrollLinkProps {
targetId: string;
label: string;
}
interface ScrollLinkWithChildProps {
targetId: string;
children: React.ReactNode;
}
interface OpenScrollLinkWithChildProps {
targetId: string;
children: React.ReactNode;
openThis: string; /*(_event: MouseEvent<HTMLElement, MouseEvent>) => void; */
label?: string;
children?: React.ReactNode;
openThis?: string; /*(_event: MouseEvent<HTMLElement, MouseEvent>) => void; */
}
interface SupScrollLinkProps {
label: string;
}
export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
event.preventDefault(); // Prevent default anchor behavior
const targetElement = document.getElementById(targetId);
if (targetElement) {
goTo(targetElement);
const elementRect = targetElement.getBoundingClientRect();
const elementTop = elementRect.top + window.scrollY;
const viewportHeight = window.innerHeight;
const scrollOffset = elementTop - (viewportHeight / 5 - targetElement.offsetHeight / 2);
console.log(`Element Top: ${elementTop}`);
console.log(`Viewport Height: ${viewportHeight}`);
console.log(`Scroll Offset: ${scrollOffset}`);
window.scrollTo({
top: scrollOffset,
behavior: "smooth"
});
console.log(`Scrolled to ${targetId}`)
} else {
console.error(`Element with ID ${targetId} not found.`);
}
};
return (
<a href={`#${targetId}`} onClick={handleClick}>
{label}
<a className="scrolllink" href={`#${targetId}`} onClick={handleClick}>
<span>{label}</span>
</a>
);
};
export const ScrollLinkSidebar: React.FC<OpenScrollLinkWithChildProps> = ({ targetId, children, openThis}) => {
export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
let targetId = "desc-" + label
const handleClick = () => {
const targetElement = document.getElementById(targetId);
if (targetElement) {
goTo(targetElement);
}
openThem({it: openThis});
};
return (
<a onClick={handleClick}>
{children}
<sup><a onClick={handleClick}>
{label}
</a>
</sup>
);
};
export const ScrollLinkWithChild: React.FC<ScrollLinkWithChildProps> = ({ targetId, children }) => {
const handleClick = () => {
/* export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
event.preventDefault(); // Prevent default anchor behavior
const targetElement = document.getElementById(targetId);
if (targetElement) {
goTo(targetElement);
}
};
return (
<a href={`#${targetId}`} onClick={handleClick}>
{label}
</a>
);
}; */
/* export const ScrollLinkSidebar: React.FC<OpenScrollLinkWithChildProps> = ({ targetId, children, openThis}) => {
const handleClick = () => {
const targetElement = document.getElementById(targetId);
if (targetElement) {
goTo(targetElement);
}
openThem({it: openThis});
};
return (
<a onClick={handleClick}>
{children}
</a>
);
};
}; */
export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
let targetId = "desc-" + label
export const ScrollLinkWithChild: React.FC<ScrollLinkProps> = ({ targetId, children }) => {
const handleClick = () => {
const targetElement = document.getElementById(targetId);
if (targetElement) {
......@@ -91,18 +101,8 @@ export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
};
return (
<sup><a onClick={handleClick}>
{label}
<a onClick={handleClick}>
{children}
</a>
</sup>
);
};
/*
export const goToTextsAndOpenCollapsible = ({collapseId, path}: {collapseId: string, path: string}) => {
const navigate = useNavigate();
navigate(`${path}${collapseId}`);
};
export const goToPagesAndOpenTab = (tabId: string, path: string) => {
const navigate = useNavigate();
navigate(`${path}${tabId}`);
}; */
\ No newline at end of file
};
\ No newline at end of file
src/components/Sidebar.tsx
View file @ 3fd292fd
import { useEffect } from 'react';
import { Highlight } from '../utils/Highlight-functions';
function SideItem({hesh, num}:{hesh: string; num: number}){
let link = "#" + hesh
let subdi = "subtitle" + num
......@@ -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);
......@@ -96,28 +96,5 @@ function Sidebar(){
export function Highlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitle: HTMLElement | null}){
let TopDistance = 100;
if (el != null && subtitle != null){
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "white";
subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
subtitle.style.borderRadius = "15px";
subtitle.style.borderWidth = "15px";
subtitle.style.borderColor = "#850F78";
/* console.log("subtitle: ",subtitle)
console.log("style: ", subtitle.style)
console.log("color: ",subtitle.style.color)
console.log("backcolor: ",subtitle.style.backgroundColor) */
}
else{
subtitle.style.color = "#850F78";
subtitle.style.backgroundColor = "";
}
}
}
export default Sidebar;
\ No newline at end of file
src/components/slider.tsx → src/components/Slider.tsx
View file @ 3fd292fd
File moved
src/components/svgs.tsx → src/components/Svgs.tsx
View file @ 3fd292fd
import { useNavigation } from "../utils"
import { ScrollLinkWithChild } from "./goto";
import { ScrollLinkWithChild } from "./ScrollLink";
export function Complex(){
const { goToPagesAndOpenTab /* , goToTextsAndOpenCollapsible */ } = useNavigation();
return(
......@@ -692,13 +692,13 @@ export function Complex(){
cy="641.6452"
r="9" />
<path
style={{fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 525.09492,662.08075 C 375.66161,714.42751 375.66161,714.42751 375.66161,714.42751"
id="path89" />
<ScrollLinkWithChild targetId="riboswitch">
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="ribotext"
......@@ -706,36 +706,36 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="ribotext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="ribotext">Riboswitch</tspan></tspan></text>
</ScrollLinkWithChild>
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 714.57654,286.73782 C 603.08853,373.95263 603.08853,373.95263 603.08853,373.95263"
id="path90" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 1103.7358,196.5664 C 1273.6985,45.590255 1273.6985,45.590255 1273.6985,45.590255"
id="path91" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="m 1379.6899,405.17969 c 155.4063,-8.16843 155.4063,-8.16843 155.4063,-8.16843"
id="path92" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="m 1047.3061,690.69055 c 108.107,155.37789 108.107,155.37789 108.107,155.37789"
id="path93" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="m 440.96587,225.1945 c -203.4394,37.82614 -203.4394,37.82614 -203.4394,37.82614"
id="path94" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 372.73265,118.88705 C 234.25926,81.796787 234.25926,81.796787 234.25926,81.796787"
id="path95" />
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="stemlooptext"
......@@ -743,11 +743,11 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="stemlooptext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="stemlooptext">Stem Loop</tspan></tspan></text>
<a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="rnabindingtext"
......@@ -763,7 +763,7 @@ export function Complex(){
{/* pegRNA Text */}
<a onClick={() => goToPagesAndOpenTab('tab-pegrna', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="pegrnatext"
......@@ -771,7 +771,7 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="pegrnatext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="pegrnatext">pegRNA</tspan></tspan></text>
</a>
<g
......@@ -780,7 +780,7 @@ export function Complex(){
<a onClick={() => goToPagesAndOpenTab('tab-nikase', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="nikasetext"
......@@ -792,7 +792,7 @@ export function Complex(){
</g>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="linkertext"
......@@ -802,7 +802,7 @@ export function Complex(){
id="tspan12">Linker</tspan></text>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="text89-49"
......@@ -810,11 +810,11 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="PEtext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="PEtext">PE</tspan><tspan
style={{fontSize:"65%",baselineShift:"super"}}
id="PEtextlow">CO</tspan><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="PEtext">-Mini RT</tspan></tspan></text>
</svg>
</>
......@@ -865,7 +865,7 @@ export function EngineeringCycle(){
id="path25"
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text31"
transform="translate(5.6902194,-0.11551883)"><textPath
xlinkHref="#path25"
......@@ -891,7 +891,7 @@ export function EngineeringCycle(){
style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text28"
transform="translate(-0.03023506,-5.9602336)"><textPath
......@@ -915,7 +915,7 @@ export function EngineeringCycle(){
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text32"
transform="translate(-5.7110315,1.7453243)"><textPath
xlinkHref="#path24"
......@@ -930,7 +930,7 @@ export function EngineeringCycle(){
transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text29"
transform="translate(8.4052921,8.8553334)"><textPath
xlinkHref="#path22"
......@@ -985,7 +985,7 @@ export function EngineeringCycleZwei(){
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text31"
transform="translate(5.6902194,-0.11551883)"><textPath
id="textPath33">Learn<tspan
......@@ -1010,7 +1010,7 @@ export function EngineeringCycleZwei(){
style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text28"
transform="translate(-0.03023506,-5.9602336)"><textPath
id="textPath28">Test</textPath></text>
......@@ -1032,7 +1032,7 @@ export function EngineeringCycleZwei(){
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text32"
transform="translate(-5.7110315,1.7453243)"><textPath
id="textPath32">Build<tspan
......@@ -1046,7 +1046,7 @@ export function EngineeringCycleZwei(){
transform="matrix(2.8248588,0,0,2.8248588,876.19464,131.34384)" />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text29"
transform="translate(952.39772,348.16894)"><textPath
id="textPath34">Design<tspan
......
src/components/Table.tsx 0 → 100644
View file @ 3fd292fd
import { Part } from "../data/parts";
import { Res } from "../data/results-table";
export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}){
let list: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
list.push(
<tr>
<td>{data[index].partname}</td>
<td><a href={data[index].url}>{data[index].registrycode}</a></td>
<td>{data[index].description}</td>
<td>{data[index].length}</td>
<td>{data[index].type}</td>
</tr>
)
}
let heads: JSX.Element[] = [];
for (let index = 0; index < cols.length; index++) {
heads.push(<td><b>{cols[index]}</b></td>)
}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center parttable">
<thead className="bg-d">
<tr>
{heads}
</tr>
</thead>
<tbody>
{list}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
export function ResTable({data, cols}: {data: Array<Res>, cols: Array<string>}){
let list: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
list.push(
<tr>
<td>{data[index].nr}</td>
<td>{data[index].silent}</td>
<td>{data[index].pbs}</td>
<td>{data[index].rtt}</td>
<td>{data[index].q1}</td>
</tr>
)
}
let heads: JSX.Element[] = [];
for (let index = 0; index < cols.length; index++) {
heads.push(<td><b>{cols[index]}</b></td>)
}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center restable">
<thead className="bg-d">
<tr>
{heads}
</tr>
</thead>
<tbody>
{list}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
\ No newline at end of file
src/components/Tabs.tsx
View file @ 3fd292fd
// The main tab has to be given display: block; via id css or be given the id "First"
export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
rows.push(
<div id={data[i].cssname} className={cla}>
{data[i].node}
</div>
)
if(data[i].main == true){
rows.push(<div id={data[i].cssname} className={cla} style={{display: "block"}}>
{data[i].node}
</div>)
}
else{
rows.push(<div id={data[i].cssname} className={cla} style={{display: "none"}}>
{data[i].node}
</div>)
}
}
return rows;
}
import React from "react";
import { BlockQuoteB } from "./Quotes";
import { TimelineDatenpunkt } from "../data/hptimelinedata";
import Collapsible from "./Collapsible";
import { stringToSlug } from "../utils";
/* import { stringToSlug } from "../utils"; */
export function BFHStyleTabs({data, cla}: {data: Array<TimelineDatenpunkt>, cla: string}) {
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
var problem: Boolean = false;
var problem_desc: Array<string> = [];
/* Language */
var lang;
if(data[i].language === "en"){
lang = "Original language: English"
}
else if(data[i].language === "de"){
lang = "Original language: German"
}
else{
lang = ""
}
/* else if(data[i].type != "meta"){
problem = true;
problem_desc.push("interview language");
} */
/* Expert on */
let expert = "";
if (data[i].experton) {
expert = `Expert on ${data[i].experton}`;
}
/* Aim/Goal */
var goalheading: string = "";
if(data[i].type === "meta"){
goalheading = "Goals";
}
else{
goalheading = "Aim of contact"
}
/* Quotation */
var quoted: string = "";
if(data[i].quote != ""){
if(data[i].quoteNachname && data[i].quoteVorname){
quoted = data[i].quoteVorname + " " + data[i].quoteNachname;
}
else{
quoted = data[i].vorname + " " + data[i].nachnname;
}
}
/* else{
problem = true;
problem_desc.push("quote missing");
} */
let inv_img: React.ReactNode = <></>;
let imp_img: React.ReactNode = <></>;
let aim_img: React.ReactNode = <></>;
// Restliche Logik der Schleife...
// Bildzuweisungen basierend auf den Daten
if (data[i].pictureurl_interview) {
inv_img = <div className="hti-box">
<img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right" />
</div>;
}
if (data[i].pictureurl_implementation) {
imp_img = <div className="hti-box">
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-left" />
</div>;
}
if (data[i].pictureurl_aim) {
aim_img = <div className="hti-box">
<img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left" />
</div>;
}
/* textparts */
let aiM: JSX.Element = <></>
if(data[i].aimofcontact){
aiM = <>
<h4>{goalheading}</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].aimofcontact}</p>
{aim_img}
</div>
</>
}
let insighT: JSX.Element = <></>
if(data[i].insights){
insighT = <>
<h4>Insights</h4>
<div className="flexbox">
{inv_img}
<p className="hp-timeline-p">{data[i].insights}</p>
</div>
</>
}
let imP: JSX.Element = <></>
if(data[i].implementation){
imP = <>
<h4>Implementation</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].implementation}</p>
{imp_img}
</div>
</>
}
/* if(data[i].aimofcontact === ""){
problem = true;
problem_desc.push(" " + goalheading + " missing");
}
if(data[i].insights === ""){
problem = true;
problem_desc.push(" insights missing");
}
if(data[i].implementation === ""){
problem = true;
problem_desc.push(" implementation missing");
} */
/* Clarification */
var clari: React.ReactNode = <></>
if(data[i].clarification){
clari = <>
<h4>Clarification</h4>
<p>{data[i].clarification}</p>
</>
}
/* Other warnings */
if(data[i].interviewtabid === ""){
problem = true;
problem_desc.push(" interviewtabid missing");
}
/* if(data[i].cardtext === ""){
problem = true;
problem_desc.push(" cardtext missing");
} */
/* if(data[i].type !== "meta"){
if(data[i].affiliation === undefined || data[i].affiliation === ""){
problem = true;
problem_desc.push(" affiliation missing");
}
if(data[i].job === undefined || data[i].job === ""){
problem = true;
problem_desc.push(" job missing" );
}
} */
/* if(data[i].type === "meta"){
if(data[i].quoteVorname === undefined || data[i].quoteVorname === ""){
problem = true;
problem_desc.push(" who is the quote from?" );
}
} */
/* References */
var refs: React.ReactNode = <></>;
if (data[i].references) {
refs = <> <h4>References </h4> {data[i].references}</>
}
/* Further pictures */
/* var inv_img: React.ReactNode = <></>;
if (data[i].pictureurl_interview) {
console.info("before: inv_img is: " + inv_img)
console.info(data[i].vorname + " has pictureurl_interview")
inv_img = <> <div className="hti-box"> <img id={`${data[i].vorname}-inv-img`} src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
console.info("after: inv_img is: " + inv_img)
}
var imp_img: React.ReactNode = <></>;
if (data[i].pictureurl_implementation) {
console.info(data[i].vorname + " has pictureurl_implementation")
console.info("before: imp_img is: " )
console.info(imp_img)
imp_img = <> <div className="hti-abstand"/><div className="hti-box">
<img id={`${data[i].vorname}-imp-img`} src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
</div>
</>
console.info("after: imp_img is: " )
console.info(imp_img)
}
var aim_img: React.ReactNode = <></>;
if (data[i].pictureurl_aim) {
console.info(data[i].vorname + " has pictureurl_aim")
console.info("before: aim_img is: " )
console.info(aim_img)
aim_img = <> <div className="hti-abstand"/> <div className="hti-box">
<img id={`${data[i].vorname}-aim-img`} src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/>
</div></>
console.info("after: aim_img is: " )
console.info(aim_img)
} */
let int = <></>;
let int_id = stringToSlug(`${data[i].vorname}-inv-collapsible`)
if (data[i].interview) {
int = <div className="hp-collaps"><Collapsible title="Read full Interview here" id={int_id}>
{data[i].interview}
</Collapsible></div>
}
let morepics: JSX.Element[] = [];
let oldpics: string[] = [];
/* if(data[i].more_pictures){ */
if (!data[i].aimofcontact && data[i].pictureurl_aim) {
oldpics.push(data[i].pictureurl_aim!)
}
if (!data[i].insights && data[i].pictureurl_interview) {
oldpics.push(data[i].pictureurl_interview!)
}
if (!data[i].implementation && data[i].pictureurl_implementation) {
oldpics.push(data[i].pictureurl_implementation!)
}
let newlist = oldpics.concat(data[i].more_pictures!);
for (let ind = 0; ind < (newlist.length - 1); ind += 2) {
console.info(data[i].vorname)
console.info(ind + newlist[ind])
console.info(ind+1 + newlist[ind+1])
morepics.push(
<div className="row">
<div className="col">
<img src={newlist[ind]}/>
</div>
<div className="col">
<img src={newlist[ind+1]}/>
</div>
</div>
)
}
/* } */
let node = <>
<br/>
<h3 id={`${data[i].interviewtabid}-heading`}>{data[i].title} {data[i].vorname} {data[i].nachnname}</h3>
<hr/>
<div className="row">
<div className="col-6">
<div className={"t-tag " + data[i].tag}>
{data[i].job} - {data[i].affiliation}
</div>
</div>
<div className="col" style={{padding: "5px"}}>{expert}</div>
<div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
</div>
<div className="row align-items-stretch">
<div className="col d-flex flex-column">
<div className="row flex-grow-1 mitte">
<h4 style={{paddingTop: "50px"}}>Summary:</h4>
<p>{data[i].summary}</p>
</div>
<div className="row unten" style={{fontSize: "large"}}>
</div>
</div>
<div className="col-3">
<img className="middle sechpro img-fluid" src={data[i].pictureurl} />
</div>
</div>
{/* <div className="row">
<div className="col">
<p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
<p>{data[i].summary}</p>
</div>
<div className="col-3">
<img className="middle sechpro" src={data[i].pictureurl}/>
</div>
</div> */}
{aiM}
{insighT}
{clari}
{imP}
<div className="col">
<BlockQuoteB text={data[i].quote!} cite={quoted}></BlockQuoteB>
</div>
{data[i].text}
{morepics}
{int}
{refs}
</>
if(problem){
rows.push(
<div id={data[i].interviewtabid} className={cla} style={{ backgroundColor: "black", color: "white"}}>
<h1>PROBLEM with {data[i].vorname} {data[i].nachnname}</h1>
<p> because of: </p>
{problem_desc}
</div>
)
}
else{
if (data[i].interviewtabid === "timeline"){
rows.push(
<div id={data[i].interviewtabid} className={`${cla} timelinetab bg-db`} style={{display: "block"}}>
{node}
</div>
)
}
else{
rows.push(
<div id={data[i].interviewtabid} className={`${cla} timelinetab bg-db`}>
{node}
</div>
)
}
}
}
return rows;
}
export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
let rows = []
/* Interview */
export function OLDBFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
if (data[i].cssname === "timeline"){
if (data[i].cssname == "timeline"){
rows.push(
<div id={data[i].cssname} className={cla} style={{display: "block"}}>
{data[i].node}
......@@ -29,4 +364,4 @@ export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: stri
}
}
return rows;
}
\ No newline at end of file
}
src/components/testsvganimation.tsx → src/components/Testsvganimation.tsx
View file @ 3fd292fd
......@@ -3,7 +3,8 @@ import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { useRef } from 'react';
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
import { LoremMedium } from "./loremipsum";
import { LoremMedium } from "./Loremipsum";
import { H2 } from "./Headings";
......@@ -67,13 +68,13 @@ console.log("Started TestSVG")
stroke="white" strokeWidth="10px" width="10px"></path>
*/}
<foreignObject x="5vw" y="5vh" className="box1">
<h2>Mutation canidates</h2>
<H2 id="mutcans" text="Mutation canidates"/>
<p >
<LoremMedium></LoremMedium>
</p>
</foreignObject>
<foreignObject className="box2">
<h2>Mutation canidates</h2>
<H2 id="mutcans2" text="Mutation canidates"/>
<p>
<LoremMedium></LoremMedium>
</p>
......
src/components/TextEvent.tsx deleted 100644 → 0
View file @ 629d14c7
import React from 'react';
import Event from './Event';
import { joinClassNames } from './classNames';
export function TextAtom({ text }:{text:string}) {
return (
<div className="text-atom">
{text}
</div>
);
}
interface TextEventProps {
children?: React.ReactNode;
date: string;
text: string;
marker?: React.ReactNode;
id?: string;
card?: Function;
}
/**
* Use `TextEvent` to render text (including markdown) as an event.
*/
export const TextEvent = ({ children, date, text, marker, card}: TextEventProps) => {
return (
<Event
date={date}
marker={marker}
card={card}
className={joinClassNames({classNames: ['text-event']})}
text={text}
layout='default'
>
<TextAtom text={text} />
{children}
</Event>
);
}
export default TextEvent;
\ No newline at end of file