Skip to content
Snippets Groups Projects
Commit dd670d84 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

timeline

parent 908f9544
No related branches found
No related tags found
No related merge requests found
Pipeline #398126 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/App/App.css
+ 20
− 6
View file @ dd670d84
......@@ -897,8 +897,12 @@ svg{
/* Horizontal */
.timeline {
white-space: nowrap;
min-height: 500px;
max-width: 83vw;
overflow-x: auto;
overflow-y: hidden;
background-color: inherit;
font-size: 1rem;
}
.timelineol {
......@@ -992,7 +996,7 @@ button.tabbutton:nth-child(6){
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
font-size: 0.9rem;
white-space: normal;
color: black;
background: white;
......@@ -1036,10 +1040,7 @@ button.tabbutton:nth-child(6){
.timeline {
background-color: inherit;
font-size: 1rem;
}
.card {
border-radius: 4px;
......@@ -1281,6 +1282,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
position: relative;
display: inline-block;
cursor: pointer;
left: 10%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
......@@ -2792,6 +2794,7 @@ span{
padding-top: 40px;
padding-bottom: 40px;
padding-right: 10px;
width: 100%;
background-color: var(--text-primary);
color: var(--ourbeige);
border-radius: 10px;
......@@ -3044,4 +3047,15 @@ span{
text-align: center;
vertical-align: middle;
padding-top: 15px;
}
\ No newline at end of file
}
/* #sidebarbox{
visibility: visible !important;
background-color: red !important;
width: 16.66666667% !important
} */
div.timeline-item.moretop div div.row.align-items-center div.col p{
text-align: left;
}
\ No newline at end of file
src/App/App.tsx
+ 7
− 3
View file @ dd670d84
......@@ -14,6 +14,7 @@ import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/highlight.js";
import LoadingScreen from "../components/LoadingScreen.tsx";
import "../components/LoadingScreen.css";
import Sidebar from "../components/Sidebar.tsx";
const App = () => {
const [isLoading, setIsLoading] = useState(true);
......@@ -55,7 +56,7 @@ const App = () => {
{/* Header and PageContent */}
<Routes>
{Object.entries(pathMapping).map(([path, {header: Header, component: Component}]) => (
{Object.entries(pathMapping).map(([path, {header: Header, component: Component, navlist}]) => (
<Route
key={path}
path={path}
......@@ -65,8 +66,11 @@ const App = () => {
{/* Page content */}
<div className="container-fluid">
<div className="row">
<div className="col-1 d-none d-lg-block">
{/* <!-- empty so far --> */}
<div id="sidebarbox" className="col-2 d-none d-lg-block">
<div className="sticky-top sidebar" /* style="top: 80px; overflow-wrap: break-word;" */>
{/* <Sidebar></Sidebar> */}
<Sidebar nums={navlist}></Sidebar>
</div>
</div>
<div className="col">
<Component />
......
src/components/HorizontalTimeline.tsx
+ 55
− 42
View file @ dd670d84
import { HPMoreButton } from "./Buttons";
function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
function TimeItem({tag, title, pic, author, tabid}: ItemProps){
let cl = "t-tag " + tag;
return(
<li className="timelineolli">
......@@ -9,6 +9,7 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
<div className={cl}>
{tag}
</div>
<div className="row align-items-center">
<div className="col" >
<span className="tl-butt" onClick={Open({person: author})}> <img className="img-round" src={pic} /></span>
......@@ -17,11 +18,18 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
{title}
</div>
</div>
<p>{author}</p>
<p>{children}</p>
<div className="tab">
<HPMoreButton name={tabid}/>
<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>
......@@ -178,47 +186,52 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
tabid: "InvWesthoff",
text: "Text",
},
{
title: "Deutlich längerer Titel zum Test" ,
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Medical Professional",
author: "Dr. Christian Olariu",
tabid: "InvOlariu",
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: "Medical Professional",
author: "Dr. Christian Olariu",
tabid: "InvOlariu",
tag: "Academia",
author: "Prof. Dr. Christoph Weber",
tabid: "InvWeber",
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: "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: "Deutlich längerer Titel zum Test" ,
},
{
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: "Industry",
author: "RNale",
tabid: "InvRNale",
text: "Text",
},{
title: "Deutlich längerer Titel zum Test" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Mattijs Bulcaen",
tabid: "InvBulcaen",
text: "Text",
}]
\ No newline at end of file
},
{
title: "" ,
pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
tag: "Academia",
author: "Mattijs Bulcaen",
tabid: "InvBulcaen",
text: "Text",
}
]
\ No newline at end of file
src/contents/human-practices.tsx
+ 41
− 71
View file @ dd670d84
......@@ -119,6 +119,13 @@ let timelinepersontabs =[
</>,
cssname: "InvWeber"
},
{
node: <>
<h3>Hammer</h3>
<p></p>
</>,
cssname: "InvHammer"
},
]
// die height für className="timeline row align-items-center" muss angepasst werden, damit die Boxen höher sein können
......@@ -126,90 +133,53 @@ let timelinepersontabs =[
export function HumanPractices() {
openTab({cityName: "All", cla: "timelinecardtabs"});
return (
<>
<div className="row mt-4">
<BlockQuoteB
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
/>
<div className="center">
<h3 className="col personalstyleone">Overview</h3>
</div>
<div className="col" style={{position: "relative", height: "fit-content"}}>
<MindMapTwo></MindMapTwo>
</div>
<div className="center">
<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>
<div className="center">
<h3 className="col personalstyleone">Reflection Framework</h3>
</div>
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
/>
<section id="Overview" className="section">
<div className="center" >
<h3 className="col personalstyleone">Overview</h3>
</div>
<div className="col" style={{position: "relative", height: "fit-content"}}>
<MindMapTwo></MindMapTwo>
</div>
</section>
<section id="Timeline" className="section">
<div className="center">
<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>
<section id="Reflection" >
<div className="center">
<h3 className="col personalstyleone">Reflection Framework</h3>
</div>
</section>
<section id="Feedback" className="section">
<div className="center">
<h3 className="col personalstyleone">Feedback Cycle</h3>
</div>
</section>
<section id="Surveys" className="section">
<div className="center">
<h3 className="col personalstyleone">Surveys</h3>
<h3 className="col personalstyleone">Surveys</h3>
</div>
</section>
</div>
</>
);
}
function MindMap(){
return(
<svg className="flex-1 markmap mm-tsu1wj-1">
<g transform="translate(7.5,75) scale(1.0288808664259927)">
{/* Sec A */}
<path className="markmap-link" data-depth="2" data-path="1.2" d="M94,10C134,10,134,-27.5,174,-27.5" stroke="var(--accen-secondary)" stroke-width="1.5"></path>
{/* Sec B */}
<path className="markmap-link" data-depth="2" data-path="1.3" d="M94,10C134,10,134,-2.5,174,-2.5" stroke="rgb(44, 160, 44)" stroke-width="1.5"></path>
<path className="markmap-link" data-depth="2" data-path="1.4" d="M94,10C134,10,134,22.5,174,22.5" stroke="rgb(214, 39, 40)" stroke-width="1.5"></path>
<path className="markmap-link" data-depth="2" data-path="1.5" d="M94,10C134,10,134,47.5,174,47.5" stroke="rgb(148, 103, 189)" stroke-width="1.5"></path>
<g data-depth="2" data-path="1.5" transform="translate(174, 27.5)" className="markmap-node">
<line x1="-1" x2="105" y1="20" y2="20" stroke="rgb(148, 103, 189)" stroke-width="1.5"></line>
<foreignObject className="markmap-foreign" x="8" y="0" style={{opacity: "1"}} width="87" height="20">
<div>interactive</div>
</foreignObject>
</g>
<g data-depth="2" data-path="1.4" transform="translate(174, 2.5)" className="markmap-node">
<line x1="-1" x2="57" y1="20" y2="20" stroke="rgb(214, 39, 40)" stroke-width="1.5"></line>
<foreignObject className="markmap-foreign" x="8" y="0" style={{opacity: "1"}} width="39" height="20">
<div>easy</div>
</foreignObject>
</g>
{/* Sec B */}
<g data-depth="2" data-path="1.3" transform="translate(174, -22.5)" className="markmap-node">
<line x1="-1" x2="190" y1="20" y2="20" stroke="rgb(44, 160, 44)" stroke-width="1.5"></line>
<foreignObject className="markmap-foreign" x="8" y="0" style={{opacity: "1"}} width="172" height="20">
<div>Medical Professionals</div>
</foreignObject>
</g>
{/* Sec. A */}
<g data-depth="2" data-path="1.2" transform="translate(174, -47.5)" className="markmap-node">
<line x1="-1" x2="90" y1="20" y2="20" stroke="var(--accen-secondary)" stroke-width="1.5"></line>
<foreignObject className="markmap-foreign" x="8" y="0" style={{opacity: "1"}} width="72" height="20">
<div>Patients</div>
</foreignObject>
</g>
{/* First */}
<g data-depth="1" data-path="1" transform="translate(0,-10)" className="markmap-node">
<line x1="-1" x2="96" y1="20" y2="20" stroke="black" stroke-width="2"></line>
<circle stroke-width="1.5" cx="94" cy="20" r="6" stroke="black" fill="var(--background)"></circle>
<foreignObject className="markmap-foreign" x="8" y="0" style={{opacity: "1"}} width="78" height="20">
<div>markmap</div>
</foreignObject>
</g>
</g>
</svg>
)
}
function MindMapTwo(){
return(
......
src/pages.ts
+ 3
− 3
View file @ dd670d84
......@@ -43,7 +43,7 @@ class Page implements Base {
path: string | undefined;
component: React.FC | undefined;
header!: React.FC;
navlist?: Array<string> | undefined;
navlist!: Array<string>;
}
const Pages: (Page | Folder)[] = [
......@@ -133,7 +133,7 @@ const Pages: (Page | Folder)[] = [
path: "/human-practices",
component: HumanPractices,
header: HPH,
navlist: [""],
navlist: ["Overview", "Timeline", "Reflection", "Feedback", "Surveys"],
},
{
name: "Home",
......@@ -410,7 +410,7 @@ export const NavPages: (Page | Folder)[] = [
path: "/human-practices",
component: HumanPractices,
header: HPH,
navlist: [""],
navlist: ["Overview"],
},
{
name: "Interviews",
......
src/utils/getPathMapping.ts
+ 1
− 1
View file @ dd670d84
......@@ -7,7 +7,7 @@ export const getPathMapping = () => {
title: string | undefined;
component: React.FC;
header: React.FC;
navlist: Array<string> | undefined;
navlist: Array<string>;
};
}>((map, item) => {
if ("path" in item && item.path && item.component) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment