diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx index 94738a32e0707c4055c1f221e3497ebde6b2c84f..852c082c6cd9b894c2bd8ad234d1f3544edb3004 100644 --- a/src/components/HorizontalTimeline.tsx +++ b/src/components/HorizontalTimeline.tsx @@ -1,5 +1,5 @@ import { HPMoreButton } from "./Buttons"; - +import { data } from "./data/hptimelinedata"; function TimeItem({tag, title, pic, author, tabid}: ItemProps){ let cl = "t-tag " + tag; return( @@ -71,18 +71,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ ) } - - - - 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 TimeHori({tab}:{tab: string}){ let nod; @@ -110,51 +99,8 @@ 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 , @@ -218,248 +164,4 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){ 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/photos/hp/kristian.jpeg", - tag: "Academia", - author: "Kristian", - tabid: "", - text: " " - }, - { - title: "First Impression", - pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg", - 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/photos/hp/hp-katrin-portrait.jpg", - tag: "Medical Professional", - author: "Katrin Westhoff", - tabid: "InvWesthoff", - text: "Text", - }, - { - title: "" , - pic: "https://static.igem.wiki/teams/5247/photos/hp/olariu-cristian.jpg", - tag: "Medical Professional", - author: "Cristian-Gabriel Olariu", - tabid: "InvOlariu", - text: "Text", - }, - { - title: "" , - pic: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg", - 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/photos/hp/hp-katrin-portrait.jpg", - tag: "Medical Professional", - author: "Katrin Westhoff", - tabid: "BesWesthoff", - text: "Text", - }, - { - title: "" , - pic: "https://static.igem.wiki/teams/5247/photos/hp/julia.jpg", - 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/photos/hp/kolonko-neu.jpg", - 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/photos/hp/hp-max-portrait.jpg", - tag: "Patient", - author: "Max Beckmann", - tabid: "InvMax2", - text: " " - }, - { - title: "", - pic: "https://static.igem.wiki/teams/5247/photos/hp/berens.jpg", - 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/photos/hp/mattijs.jpg", - 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 diff --git a/src/components/My-Timeline.tsx b/src/components/My-Timeline.tsx index 05849f0a847065ddad65d5cd868497247f5cbdfc..03b573dc9f426dd87e6d6d68e519c002e81585c2 100644 --- a/src/components/My-Timeline.tsx +++ b/src/components/My-Timeline.tsx @@ -22,8 +22,6 @@ interface ItemProps { -/* import ImageEvent from './ImageEvent.tsx'; -import UrlButton from './UrlButton.tsx'; */ export const TimelineItemPic = ({ heading, text, vorname, nachname, date, tag, color, children, csstag, url }:ItemProps) => ( <div className="timeline-item"> <div className="timeline-item-content"> diff --git a/src/components/data/hptimelinedata.ts b/src/components/data/hptimelinedata.ts new file mode 100644 index 0000000000000000000000000000000000000000..3698da338a80bc877b6e13ef5f4c08f3d748464b --- /dev/null +++ b/src/components/data/hptimelinedata.ts @@ -0,0 +1,244 @@ +export const 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/photos/hp/kristian.jpeg", + tag: "Academia", + author: "Kristian", + tabid: "", + text: " " + }, + { + title: "First Impression", + pic: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg", + 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/photos/hp/hp-katrin-portrait.jpg", + tag: "Medical Professional", + author: "Katrin Westhoff", + tabid: "InvWesthoff", + text: "Text", + }, + { + title: "" , + pic: "https://static.igem.wiki/teams/5247/photos/hp/olariu-cristian.jpg", + tag: "Medical Professional", + author: "Cristian-Gabriel Olariu", + tabid: "InvOlariu", + text: "Text", + }, + { + title: "" , + pic: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg", + 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/photos/hp/hp-katrin-portrait.jpg", + tag: "Medical Professional", + author: "Katrin Westhoff", + tabid: "BesWesthoff", + text: "Text", + }, + { + title: "" , + pic: "https://static.igem.wiki/teams/5247/photos/hp/julia.jpg", + 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/photos/hp/kolonko-neu.jpg", + 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/photos/hp/hp-max-portrait.jpg", + tag: "Patient", + author: "Max Beckmann", + tabid: "InvMax2", + text: " " + }, + { + title: "", + pic: "https://static.igem.wiki/teams/5247/photos/hp/berens.jpg", + 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/photos/hp/mattijs.jpg", + 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 diff --git a/src/components/headings.tsx b/src/components/headings.tsx index 583d6a0ebd7d7ca0ebd37eaca59f6682f02bcc20..06dc8178fa6a35a380b18c9c700e45a159a3b767 100644 --- a/src/components/headings.tsx +++ b/src/components/headings.tsx @@ -1,26 +1,40 @@ import { stringToSlug } from "../utils"; -export function Hhopp({text}:{text: string}){ +export function Hhopp({text, id}:{text: string, id?: string}){ const arr = []; + var idtext: string; + if (id) { + idtext = id; + } + else{ + idtext = stringToSlug(text); + } for (let i = 0; i < text.length; i++) { const x = text.charAt(i); arr.push(<span aria-hidden="true">{x}</span>) } return( - <h1 className="playful" aria-label="Wash your hands"> + <h1 id={idtext} className="playful" aria-label="Wash your hands"> {arr} </h1> ) } -export function Hsmoke({text}:{text: string}){ +export function Hsmoke({text, id}:{text: string, id?: string}){ const arr = []; + var idtext: string; + if (id) { + idtext = id; + } + else{ + idtext = stringToSlug(text); + } for (let i = 0; i < text.length; i++) { const x = text.charAt(i); arr.push(<span aria-hidden="true">{x}</span>) } return( - <h1 className="smoke" aria-label="Wash your hands"> + <h1 id={idtext} className="smoke" aria-label="Wash your hands"> {arr} </h1> ) @@ -95,9 +109,16 @@ export function Hspoiler({children}:{children: React.ReactNode}){ ) } -export function Hwave({text}:{text: string}){ +export function Hwave({text, id}:{text: string, id?: string}){ + var idtext: string; + if (id) { + idtext = id; + } + else{ + idtext = stringToSlug(text); + } return( - <svg viewBox="0 0 100 20"> + <svg id={idtext} viewBox="0 0 100 20"> <defs> <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="#850F78"/> @@ -122,9 +143,16 @@ export function Hwave({text}:{text: string}){ ) } -export function Hpopart({text}:{text: string}){ +export function Hpopart({text, id}:{text: string, id?: string}){ + var idtext: string; + if (id) { + idtext = id; + } + else{ + idtext = stringToSlug(text); + } return( - <div className="row"> + <div id={idtext} className="row"> <div className="col"> <div className="relative popart-wrapper"> <div className="absolute popart">