From 8c94441b74fd90cc44b02fc76abd97929847a528 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 9 Aug 2024 15:02:36 +0200
Subject: [PATCH] timeline
---
src/App/App.css | 330 +---------------------
src/App/App.tsx | 1 +
src/App/Timelines.css | 390 ++++++++++++++++++++++++++
src/components/HorizontalTimeline.tsx | 285 +++++++++++++++----
src/contents/human-practices.tsx | 5 +-
5 files changed, 624 insertions(+), 387 deletions(-)
create mode 100644 src/App/Timelines.css
diff --git a/src/App/App.css b/src/App/App.css
index d8f6de7b..23501b64 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -545,6 +545,9 @@ img .middle{
border-radius: 50%;
max-width: 80%;
}
+.img-cube{
+ max-width: 80%;
+}
.updown{
max-width: 3vw;
}
@@ -769,151 +772,7 @@ svg{
padding-top: 10px;
padding-bottom: 10px;
}
-/* TIMELINE EINS */
-
-.timeline-container {
- display: flex;
- flex-direction: column;
- position: relative;
- margin: 40px 0;
-}
-
-.timeline-container::after {
- background-color: var(--text-primary);
- position: absolute;
- left: calc(50% - 2px);
- content: "";
- width: 4px;
- height: 100%;
- z-index: 0;
-}
-.timeline-item {
- min-width: 100px;
- /* display: flex; */
- justify-content: flex-end;
- padding-right: 30px;
- position: relative;
- margin: 10px 0;
- width: 50%;
-}
-
-.timeline-item:nth-child(odd) {
- align-self: flex-end;
- justify-content: flex-start;
- padding-left: 30px;
- padding-right: 0;
-}
-.timeline-item-content {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 15px;
- position: relative;
- text-align: right;
-}
-.timeline-end{
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- padding: 15px;
- position: relative;
- text-align: center;
- z-index: 1;
- margin-top: 8vw;
-}
-.timeline-begin{
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- padding: 15px;
- position: relative;
- text-align: center;
- z-index: 1;
- margin-bottom: 8vw;
-}
-
-.timeline-item-content::after {
- background-color: #fff;
- box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
- position: absolute;
- right: -7.5px;
- top: calc(50% - 7.5px);
- transform: rotate(45deg);
- width: 15px;
- height: 15px;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content {
- text-align: left;
- align-items: flex-start;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content::after {
- right: auto;
- left: -7.5px;
- box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
-}
-.timeline-item-content .tag {
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- top: 5px;
- left: 5px;
- letter-spacing: 1px;
- padding: 5px;
- position: absolute;
- text-transform: uppercase;
-}
-.timeline-item:nth-child(odd) .timeline-item-content .tag {
- left: auto;
- right: 5px;
-}
-
-.timeline-item-content time {
- color: var(--lightblue);
- font-size: 12px;
- font-weight: bold;
-}
-
-.timeline-item-content p {
- font-size: 16px;
- line-height: 24px;
- margin: 15px 0;
-/* max-width: 250px; */
-}
-.timeline-item-content span{
- font-size: 18px;
-}
-
-.timeline-item-content a {
- font-size: 14px;
- font-weight: bold;
-}
-
-.timeline-item-content a::after {
- font-size: 12px;
-}
-
-.timeline-item-content .circle {
- background-color: #fff;
- border: 3px solid var(--text-primary);
- border-radius: 50%;
- position: absolute;
- top: calc(50% - 10px);
- right: -40px;
- width: 20px;
- height: 20px;
- z-index: 100;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content .circle {
- right: auto;
- left: -40px;
-}
@media only screen and (max-width: 1023px) {
.timeline-item-content {
max-width: 100%;
@@ -945,196 +804,15 @@ svg{
display: none;
}
}
-/* Horizontal */
-.timeline {
- white-space: nowrap;
- min-height: 500px;
- width: 83vw;
- overflow-x: auto;
- overflow-y: hidden;
- background-color: inherit;
- font-size: 1rem;
-}
-
-.timelineol {
- font-size: 0;
- width: 100vw;
- padding: 250px 0;
- transition: all 1s;
-}
-
-
-.t-tag{
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- letter-spacing: 1px;
- padding: 5px;
- margin-bottom: 10px;
- text-transform: uppercase;
- width: fit-content !important;
-}
-
-
-button.tabbutton.Patient.active, button.tabbutton.All.active,
-button.tabbutton.Industry.active, button.tabbutton.Academia.active,
-button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
- border-color: black;
-}
-
-button.tabbutton:nth-child(1){
- background-color: white;
-}
-
-.Patient, button.tabbutton:nth-child(2){
- background-color: var(--accen-secondary);
-}
-
-.Medical, button.tabbutton:nth-child(3){
- background-color: var(--accent-primary);
-}
-
-.Academia, .Research, button.tabbutton:nth-child(4){
- background-color: var(--lightblue);
-}
-
-.Industry, button.tabbutton:nth-child(5){
- background-color: var(--mediumpurple);
-}
-.Activist, button.tabbutton:nth-child(6){
- background-color: var(--igemlightgreen);
-}
-
-.Ethics{
- background-color: var(--offblack);
-}
-
-.timelineolli {
- position: relative;
- display: inline-block;
- list-style-type: none;
- width: 160px;
- height: 5px;
- /* background-image: url("../components/data/stroke.svg");
- background-size: auto 100%;
- background-repeat: round;
- background-position: 0em; */
- background: var(--text-primary);
-}
-.timeline ol li:last-child {
- width: 280px;
-}
-
-
-.timeline ol li:not(:first-child) {
- margin-left: 14px;
-}
-
-.timeline ol li:not(:last-child)::after {
- content: '';
- position: absolute;
- top: 50%;
- left: calc(100% + 1px);
- bottom: 0;
- width: 12px;
- height: 12px;
- transform: translateY(-50%);
- border-radius: 50%;
- background: var(--text-primary);
-}
-
-
-.timeline ol li .timeline-item {
- min-height: 310%;
- position: absolute;
- left: calc(100% + 7px);
- width: 280px;
- padding: 15px;
- font-size: 0.9rem;
- white-space: normal;
- color: black;
- background: white;
-}
-.timeline ol li:nth-child(2n+1) .moretop{
- top: -30px !important;
-}
-
-.timeline ol li .timeline-item::before {
- content: '';
- position: absolute;
- top: 100%;
- left: 0;
- width: 0;
- height: 0;
- border-style: solid;
-
-}
-
-.timeline ol li:nth-child(odd) .timeline-item {
- top: -16px;
- transform: translateY(-100%);
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-}
-
-.timeline ol li:nth-child(even) .timeline-item {
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- top: calc(100% + 16px);
-}
-.timeline ol li:nth-child(odd) .timeline-item::before {
- top: 100%;
- border-width: 8px 8px 0 0;
- border-color: white transparent transparent transparent;
-}
-.timeline ol li:nth-child(even) .timeline-item::before {
- top: -8px;
- border-width: 8px 0 0 8px;
- border-color: transparent transparent transparent white;
-}
-
-
-
-.card {
- border-radius: 4px;
- background-color: #fff;
- color: #333;
- padding: 10px;
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- width: 100%;
- max-width: 560px;
-
-}
-
-.date {
- background-color: var(--text-primary) !important;
- padding: 4px !important;
- color: #fff !important;
- border-radius: 4px !important;
- font-weight: 500;
- font-size: .85rem;
-}
-.imageAtom{
- object-fit: cover;
- overflow: hidden;
- width: 100%;
- max-height: 400px;
-}
.imageCredit { margin-top: 10px; font-size: 0.85rem }
.imageText { margin-bottom: 10px; font-size: 1rem }
.events{ padding: 10px }
.event { margin-bottom: 20px }
-.date-col{
- position: relative;
- background-color: #fff ;
- padding: 10px;
- width: 10%;
- border-right: #000;
- border-right-width: 2px;
-}
+
.card-col{
width: 100%;
diff --git a/src/App/App.tsx b/src/App/App.tsx
index fe6ceacd..d32c60b5 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import "./App.css";
+import "./Timelines.css";
import '../App/Graph.css';
import '../components/test.css'
import "../contents/example.css"
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
new file mode 100644
index 00000000..d5945a20
--- /dev/null
+++ b/src/App/Timelines.css
@@ -0,0 +1,390 @@
+/* * * * * * * * * * * */
+/* Horizontal Timeline */
+/* * * * * * * * * * * */
+
+/* This is the timeline container */
+.timeline {
+ white-space: nowrap;
+ min-height: 500px;
+ width: 83vw;
+ overflow-x: auto;
+ overflow-y: hidden;
+ background-color: inherit;
+ font-size: 1rem;
+ /* align items center */
+ align-items: center !important;
+ /* row */
+ --bs-gutter-x: 1.5rem;
+ --bs-gutter-y: 0;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(-1 * var(--bs-gutter-y));
+ margin-right: calc(-.5 * var(--bs-gutter-x));
+ margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+/* This is the timeline list container */
+ .timelineol {
+ font-size: 0;
+ width: 100vw;
+ padding: 250px 0;
+ transition: all 1s;
+}
+
+/* Positioning of the upper timeline cards */
+.timeline ol li:nth-child(2n+1) .time-meta::before{
+ top: 100%;
+ left: 8px !important;
+ border-color: #f6faf6 transparent transparent transparent !important;
+}
+.timeline ol li:nth-child(2n+1) .moretop{
+ top: -40px !important;
+}
+.timeline ol li:nth-child(odd) .timeline-item {
+ top: -16px;
+ transform: translateY(-100%);
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+}
+
+
+/* Positioning for the lower timeline cards */
+.timeline ol li:nth-child(2n) .time-meta::before{
+top: 100%;
+left: 8px !important;
+border-color: transparent transparent transparent #f6faf6 !important;
+}
+.timeline ol li:nth-child(2n) .moretop{
+top: 30px !important;
+}
+.timeline ol li:nth-child(even) .timeline-item {
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ top: calc(100% + 16px);
+}
+
+
+/* The DNA Strang of the timeline */
+.timelineolli {
+position: relative;
+display: inline-block;
+list-style-type: none;
+width: 190px;
+height: 20px;
+background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg");
+background-size: 100% 120%;
+}
+
+/* Timeline Pointers outline and form */
+.timeline ol li .timeline-item::before {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+.timeline ol li:nth-child(odd) .timeline-item::before {
+top: 100%;
+border-width: 20px 8px 0 0;
+border-color: white transparent transparent transparent;
+}
+.timeline ol li:nth-child(even) .timeline-item::before {
+top: -20px;
+border-width: 20px 0 0 8px;
+border-color: transparent transparent transparent white;
+}
+
+/* To extend the line at the end */
+.timelineolli:last-child{
+ background-size: 65% 120%;
+}
+.timeline ol li:last-child {
+ width: 300px;
+}
+
+/* For the points */
+.timeline ol li:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: calc(98%);
+ bottom: 0;
+ z-index: 4;
+ width: 40px;
+ height: 40px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background: var(--text-primary);
+}
+
+/* Card layout */
+
+.timeline ol li .timeline-item {
+ min-height: 310%;
+ position: absolute;
+ left: calc(100% + 7px);
+ width: 280px;
+ padding: 15px;
+ font-size: 0.9rem;
+ white-space: normal;
+ color: black;
+ background: white;
+}
+
+/* Layout for meta timeline cards */
+.time-meta{
+ background-color: #f6faf6 !important;
+ border-radius: 10px;
+}
+
+/* Tags */
+.t-tag{
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ padding: 5px;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ width: fit-content !important;
+ }
+
+ button.tabbutton.Patient.active, button.tabbutton.All.active,
+ button.tabbutton.Industry.active, button.tabbutton.Academia.active,
+ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
+ border-color: black;
+ }
+
+.colour-meta-tag{
+ background-color: var(--igemlightgreen);
+}
+/* and buttons */
+button.tabbutton:nth-child(1){
+ background-color: white;
+ }
+
+.Patient, button.tabbutton:nth-child(2){
+ background-color: var(--accen-secondary);
+ }
+
+ .Medical, button.tabbutton:nth-child(3){
+ background-color: var(--accent-primary);
+ }
+
+ .Academia, .Research, button.tabbutton:nth-child(4){
+ background-color: var(--lightblue);
+ }
+
+ .Industry, button.tabbutton:nth-child(5){
+ background-color: var(--mediumpurple);
+ }
+ .Activist, button.tabbutton:nth-child(6){
+ background-color: var(--igemlightgreen);
+ }
+
+ .Ethics{
+ background-color: var(--offblack);
+ }
+
+
+/* * * * * * * */
+/* TIMELINE BFH*/
+/* * * * * * * */
+
+/* Container */
+.timeline-container {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ margin: 40px 0;
+}
+/* Line */
+.timeline-container::after {
+ background-color: var(--text-primary);
+ position: absolute;
+ left: calc(50% - 2px);
+ content: "";
+ width: 4px;
+ height: 100%;
+ z-index: 0;
+ }
+
+/* Cards */
+.timeline-item {
+ min-width: 100px;
+ /* display: flex; */
+ justify-content: flex-end;
+ padding-right: 30px;
+ position: relative;
+ margin: 10px 0;
+ width: 50%;
+ }
+ .timeline-item-content {
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ border-radius: 5px;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ padding: 15px;
+ position: relative;
+ text-align: right;
+ }
+/* Accomodate for alteration in card design */
+.timeline-item:nth-child(odd) .timeline-item-content {
+ text-align: left;
+ align-items: flex-start;
+ }
+
+/* Tags */
+.timeline-item-content .tag {
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ top: 5px;
+ left: 5px;
+ letter-spacing: 1px;
+ padding: 5px;
+ position: absolute;
+ text-transform: uppercase;
+}
+ .timeline-item:nth-child(odd) .timeline-item-content .tag {
+ left: auto;
+ right: 5px;
+}
+/* Title design */
+.timeline-item-content time {
+ color: var(--lightblue);
+ font-size: 12px;
+ font-weight: bold;
+ }
+
+/* To create alternation */
+.timeline-item:nth-child(odd) {
+ align-self: flex-end;
+ justify-content: flex-start;
+ padding-left: 30px;
+ padding-right: 0;
+ }
+
+/* To create bigger first and final cards */
+.timeline-end{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: #fff;
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-top: 8vw;
+}
+.timeline-begin{
+box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+border-radius: 5px;
+background-color: #fff;
+padding: 15px;
+position: relative;
+text-align: center;
+z-index: 1;
+margin-bottom: 8vw;
+}
+
+/* Make short description on card bigger */
+.timeline-item-content span{
+ font-size: 18px;
+ }
+/* Make links on Cards fat */
+ .timeline-item-content a {
+ font-weight: bold;
+ }
+
+/* Circle */
+.timeline-item-content .circle {
+background-color: #fff !important;
+border: 3px solid var(--text-primary);
+border-radius: 50%;
+position: absolute;
+top: calc(50% - 10px);
+right: -54px !important;
+width: 20px;
+height: 20px;
+z-index: 100;
+}
+.timeline-item:nth-child(odd) .timeline-item-content .circle {
+ right: auto;
+ left: -53px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Checken ob wir das echt brauchen */
+/* .timeline ol li:not(:first-child) {
+ margin-left: 14px;
+ }
+ .timeline-item-content::after {
+ background-color: #fff;
+ box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ right: -7.5px;
+ top: calc(50% - 7.5px);
+ transform: rotate(45deg);
+ width: 15px;
+ height: 15px;
+ }
+ .timeline-item:nth-child(odd) .timeline-item-content::after {
+ right: auto;
+ left: -7.5px;
+ box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+ }
+ .timeline-item-content p {
+ font-size: 16px;
+ line-height: 24px;
+ margin: 15px 0;
+ }
+ .timeline-item-content a::after {
+ font-size: 12px;
+ }
+ .card {
+ border-radius: 4px;
+ background-color: #fff;
+ color: #333;
+ padding: 10px;
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ width: 100%;
+ max-width: 560px;
+
+}
+
+.date {
+ background-color: var(--text-primary) !important;
+ padding: 4px !important;
+ color: #fff !important;
+ border-radius: 4px !important;
+ font-weight: 500;
+ font-size: .85rem;
+}
+ .date-col{
+ position: relative;
+ background-color: #fff ;
+ padding: 10px;
+ width: 10%;
+ border-right: #000;
+ border-right-width: 2px;
+}
+ .imageAtom{
+ object-fit: cover;
+ overflow: hidden;
+ width: 100%;
+ max-height: 400px;
+}
+ */
\ No newline at end of file
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 617ecabd..29081385 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -12,7 +12,42 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
<div className="row align-items-center">
<div className="col" >
- <span className="tl-butt" onClick={Open({person: author})}> <img className="img-round" src={pic} /></span>
+ <img className="img-round" src={pic}/>
+ </div>
+ <div className="col" >
+ {title}
+ </div>
+ </div>
+ <div className="row align-items-center">
+ <div className="col">
+ <p style={{marginTop: "10px"}}>{author}</p>
+ </div>
+ <div className="col-4">
+ <div className="tab">
+ <HPMoreButton name={tabid}/>
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+ </div>
+ </li>
+ )
+ }
+
+ function TimeItemMeta({ tag, title, pic, author, tabid}: ItemProps){
+ 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>
<div className="col" >
{title}
@@ -62,7 +97,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
}
return(
<div>
- <section className="timeline row align-items-center">
+ <section className="timeline">
<ol className="timelineol">
{nod}
<li className="timelineolli"></li>
@@ -136,15 +171,29 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
function AllItems(){
let rows = []
for ( let i = 0; i < data.length; i++ ){
- 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}
- </TimeItem>)
+ if (data[i].type === "meta"){
+ 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}
+ </TimeItemMeta>)
+ }
+ else{
+ 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}
+ </TimeItem>)
+ }
+
}
return rows;
}
@@ -171,6 +220,41 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
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",
@@ -179,6 +263,49 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
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: "Physiotherapie" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
@@ -195,6 +322,30 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
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",
@@ -206,35 +357,27 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
- tag: "Academia",
- author: "Nicole Friedlein",
- tabid: "InvFriedlein",
+ tag: "Patient",
+ author: "Joshua",
+ tabid: "InvJoshua",
text: "Text",
},
{
+ title: "" ,
+ pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
+ tag: "Academia",
+ author: "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: "Approach??" ,
- pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
- tag: "Academia",
- author: "Prof. Dr. Christoph Weber",
- tabid: "InvWeber",
- text: "Text",
- },
- {
- title: "" ,
- pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
- tag: "Academia",
- author: "Mattijs Bulcaen",
- tabid: "InvBulcaen1",
- text: "Text",
- },
+ }, */
{
title: "First Steps in LNP" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
@@ -244,29 +387,37 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
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: "Hygiene Concept",
+ title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
- tag: "Patient",
- author: "Max Beckmann",
- tabid: "InvMax2",
+ tag: "Academia",
+ author: "Vinke",
+ tabid: "",
text: " "
},
- {
- title: "" ,
- pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
- tag: "Patient",
- author: "Joshua",
- tabid: "InvJoshua",
- text: "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: "Berens",
+ tabid: "",
+ 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",
@@ -276,11 +427,31 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
text: "Text",
},
{
- title: "" ,
+ title: "",
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
- tag: "Academia",
- author: "Mattijs Bulcaen",
- tabid: "InvBulcaen2",
- text: "Text",
- }
+ 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",
+ },
+
+
+
+
]
\ No newline at end of file
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index e5b1f15e..ab0ed6e2 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -4,7 +4,6 @@
- bei show more unten drunter Tabs öffnen
- wenn man auf die Person klickt soll es Infos über die Person anzeigen
- kann mn die Karten nach Links und nach rechts ausweiten zb für Mehr infos für die Person?
-- Meilensteine als Popup
- Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism)
- DNA Strang als Timeline?
*/
@@ -50,7 +49,6 @@
<p></p>
*/
import { TimeHori } from "../components/HorizontalTimeline";
-import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
import { ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
@@ -216,7 +214,7 @@ let timelinepersontabs =[
<h4>Implementation</h4>
<p></p>
</>,
- cssname: "Wischmeyer"
+ cssname: "InvWischmeyer"
},
{
node: <>
@@ -812,7 +810,6 @@ function HPTimeline(){
<h3 className="col personalstyleone">Timeline</h3>
</div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
- <AllPopus></AllPopus>
<ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
<BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
</section>
--
GitLab