diff --git a/src/.DS_Store b/src/.DS_Store
index 802c317c98bb427ab59dcb891d444ce67690040e..92bfd67c03c9b81f29147bd5c5e666e6ac59cca2 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 9597f299477fc6cd1d1330684d448f9ab81fd34b..3b026d613c6061cfa11f20f269c010968fc1fa4d 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -84,7 +84,7 @@ const App = () => {
<div className="container-fluid">
<div className="row">
<Sidebar />
- <div className="col-9">
+ <div className="full-col-phone col-9">
<Component />
<Villbuttonrow />
</div>
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index f0aa7b46e03252cddb5dd2c6ef7aa7422f7a71ba..f44c57fec01e01f85f4f94e9937eb6719a653cc0 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -155,9 +155,7 @@ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: var(--offblack);
}
-.colour-meta-tag{
-background-color: var(--igemlightgreen);
-}
+
/* and buttons */
button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: white; /* soll whit ebleiben! */
@@ -178,8 +176,12 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple);
}
-.Activist, .Milestone, .Education, .Outreach{
- background-color: var(--igemlightgreen) !important;
+.Activist, .Milestone{
+ background-color: var(--igemmediumgreen) !important;
+}
+
+.Education, .Outreach{
+ background-color: var(--igemlightgreen);
}
.Ethics{
diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index ba4a5510120e6a8ef60d8b5ecf772819d648a669..026a9acc0df46543ebc6f26bce45ffe44adfc6e9 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -110,7 +110,13 @@
max-width: 100%;
height: auto;
}
-
+ /***Biosafty***/
+ #safehead {
+ background-size: contain; /* Adjust the image to fit within the container */
+ background-position: center; /* Push the image down for better visibility */
+ height: 300px; /* Adjust the height for mobile screens */
+ padding-top: 0px; /* Add padding to push down content and make image more visible */
+ }
/***Description***/
#Cystic\ Fibrosis6 h2 {
font-size: 1.5em !important;
@@ -122,27 +128,27 @@
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
}
- .quiz-wrapper {
+ .quiz-wrapper {
flex-direction: column;
padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */
}
- .quiz-front, .quiz-back {
+ .quiz-front, .quiz-back {
padding: 10px !important;
}
- .quiz-heading {
+ .quiz-heading {
font-size: 1.2em;
}
- .quiz-text {
+ .quiz-text {
font-size: 1em;
margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */
}
- .quiz-button-box {
+ .quiz-button-box {
margin-top: 5px !important;
justify-content: space-evenly;
}
@@ -252,8 +258,12 @@ h2, h3 {
word-wrap: break-word;
}
+.framecycletab{
+ margin-left: 0 !important;
+}
+
body {
- padding: 10px !important;
+/* padding: 10px !important; */
width: 202% ;
overflow-x: hidden; /* Prevents horizontal scrolling */
margin: 0;
@@ -299,6 +309,9 @@ body {
font-weight: 900 !important;
grid-template-columns: none;
}
+.full-col-phone{
+ width: 100vw !important;
+}
}
/*For small Smartphones*/
diff --git a/src/components/.DS_Store b/src/components/.DS_Store
index 95d45d71e17c56b40efcb050129b4d0969ed2d14..062912e3f42e5f5e6c33a5b17f8f223a7003610a 100644
Binary files a/src/components/.DS_Store and b/src/components/.DS_Store differ
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index ff972aeea6be9de657e421d28c561bde1d69dfa8..e6cca0a629e39d3b68139d5c41f01a1c46e2fdc8 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -115,7 +115,6 @@ function switchTo(month: string){
console.log("new month is: " + month + " and we are calling " + `${month}-name`)
if (document.getElementById(`${month}-dates`)) {
- console.info("document.getElementById(`${month}-dates`); exists")
let newdates = document.getElementById(`${month}-dates`);
(newdates as HTMLElement).style.display = "block";
}
diff --git a/src/components/HP-timeline.tsx b/src/components/HP-timeline.tsx
index df01c2212d02287faba8e97db7b19c0c1963ce3f..cc21b1696465df36126031006646860bf5ff23f0 100644
--- a/src/components/HP-timeline.tsx
+++ b/src/components/HP-timeline.tsx
@@ -1,5 +1,5 @@
import { TabButtonRow } from "./Buttons";
-import TimeHori from "./HorizontalTimeline";
+import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){
@@ -47,11 +47,12 @@ export function HPTimeline(){
buttonname: "Milestones",
cssname: "Milestone"
},
- /* {
- node: <TimeHori tab="Education" ></TimeHori>,
- buttonname: "Education",
+ {
+ node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
+ buttonname: "Education & Outreach",
cssname: "Education"
},
+ /*
{
node: <TimeHori tab="Outreach" ></TimeHori>,
buttonname: "Outreach",
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 37d15a006911ae75aa59e0f83859d885dbc4c9a5..83c8abecf299e13b697cfac37fdc7f223f93080f 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -47,12 +47,13 @@ function TimeItem({tag, title, pic, author, tabid, month}: 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="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
- <div className="col-6 t-tag colour-meta-tag">
+ <div className={`${cl} col-6 t-tag `}>
{tag}
</div>
<div className="col">
@@ -92,7 +93,52 @@ function TimeItem({tag, title, pic, author, tabid, month}: 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 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} >
+ {timelinedata[i].cardtext}
+ </TimeItem>)
+ }
+ }
+ return rows;
+ }
export default function TimeHori({tab}:{tab: string}){
let nod;
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 4b8662848198a867b99fcc75c4f98c5e93d5c856..6ba23b6b0c86af24118cd3fff084193e918b1e5c 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -195,7 +195,6 @@ import { stringToSlug } from "../utils";
let oldpics: string[] = [];
/* if(data[i].more_pictures){ */
if (!data[i].aimofcontact && data[i].pictureurl_aim) {
- console.info("!data[i].aimofcontact && data[i].pictureurl_aim")
oldpics.push(data[i].pictureurl_aim!)
}
if (!data[i].insights && data[i].pictureurl_interview) {
@@ -222,7 +221,7 @@ import { stringToSlug } from "../utils";
let node = <>
<br/>
- <h3>{data[i].vorname} {data[i].nachnname}</h3>
+ <h3>{data[i].title} {data[i].vorname} {data[i].nachnname}</h3>
<hr/>
<div className="row">
<div className="col-6">