From dd670d845af795723d708bbfab05297317d915f0 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 29 Jul 2024 16:14:46 +0200
Subject: [PATCH] timeline
---
src/App/App.css | 26 ++++--
src/App/App.tsx | 10 ++-
src/components/HorizontalTimeline.tsx | 97 ++++++++++++----------
src/contents/human-practices.tsx | 112 ++++++++++----------------
src/pages.ts | 6 +-
src/utils/getPathMapping.ts | 2 +-
6 files changed, 127 insertions(+), 126 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 9ac10bbe..ecdf0f37 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -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
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 1d351f96..d70cf1a3 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -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 />
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 11ff8da3..f2af7bdc 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -1,6 +1,6 @@
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
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 7660c4f3..b0d266c7 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -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(
diff --git a/src/pages.ts b/src/pages.ts
index ee805268..ee334517 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -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",
diff --git a/src/utils/getPathMapping.ts b/src/utils/getPathMapping.ts
index ef66f295..69ea2137 100644
--- a/src/utils/getPathMapping.ts
+++ b/src/utils/getPathMapping.ts
@@ -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) {
--
GitLab