From e24ea9c9e24130309771a9aec08c7cc69ce5d891 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Tue, 6 Aug 2024 13:13:52 +0200
Subject: [PATCH] education
---
src/App/App.css | 13 ++++++----
src/components/Buttons.tsx | 44 ++++++++++++++++++++++++++++----
src/contents/education.tsx | 31 +++++++++++++++++++---
src/contents/engineering.tsx | 18 ++-----------
src/contents/human-practices.tsx | 2 +-
5 files changed, 77 insertions(+), 31 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index bd3124b5..dacaeb02 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -291,8 +291,8 @@ h2{
background-clip: text !important;
color: transparent !important;
padding-top: 15px !important;
- background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
-}
+ /* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
+ */}
.underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
@@ -3197,13 +3197,16 @@ div[class*="boxy"] {
}
.boxy-1 {
- background-color: #ff6766;
+ background-color: var(--text-primary);
+ max-width: fit-content;
}
.boxy-2 {
- background-color: #3c3c3c;
+ background-color: var(--text-primary);
+ max-width: fit-content;
}
.boxy-3 {
- background-color: #66a182;
+ background-color: var(--text-primary);
+ max-width: fit-content;
}
.btn-new {
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index a59b5179..cea387c4 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -175,19 +175,20 @@ export function ButtonThree(){
export function ButtonTwo(){
return(
<div className="boxy-2">
- <div className="btn-new btn-three">
+ <div className="btn-new btn-two">
<span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
</div>
</div>
)
}
-export function ButtonOne(){
+export function ButtonOne({text, open}: {text:string, open:string}){
return(
<div className="boxy-1">
- <div className="btn-new btn-three">
- <span typeof="button" onClick={openCity({cityName: "about"})}>HOVER ME</span>
- </div>
+ <span typeof="button" onClick={openIt({it: open})}>
+ <div className="btn-new btn-one">
+ {text}
+ </div></span>
</div>
)
}
@@ -221,3 +222,36 @@ export function ButtonFourRotate(){
}
+
+
+export function openIt({it}: {it: string}){
+ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+ /* console.log(document.getElementById(it)) */
+ console.log(document.getElementById(it)?.className)
+ let tabcontent = document.getElementsByClassName("cycletab");
+ for (let i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ /* console.log(document.getElementById(it)!.style.display) */
+ document.getElementById(it)!.style.display = "block";
+
+ event.currentTarget.className += " active";
+ }
+ return openit;
+}
+
+export function openItTwo({it}: {it: string}){
+ const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
+ /* console.log(document.getElementById(it)) */
+ console.log(document.getElementById(it)?.className)
+ let tabcontent = document.getElementsByClassName("col outreach");
+ for (let i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ /* console.log(document.getElementById(it)!.style.display) */
+ document.getElementById(it)!.style.display = "block";
+
+ event.currentTarget.className += " active";
+ }
+ return openit;
+}
\ No newline at end of file
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
index 4c36fa31..f4c4f8f0 100644
--- a/src/contents/education.tsx
+++ b/src/contents/education.tsx
@@ -1,17 +1,40 @@
+import { ButtonOne} from "../components/Buttons";
export function Education() {
return (
<>
- <div className="row">
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Overview" open="overview"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="MukoMove" open="mukomove"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
+ </div>
<div className="col">
- <h2>Wiki under construction!</h2>
- <hr/>
+ <ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
</div>
</div>
+ <div id="overview" className="cycletab" style={{display: "block"}}>
+ <h2>Our education and outreach</h2>
+
+ <h2>If not as a special prize - then why?</h2>
+ </div>
+ <div id="akademie" className="cycletab" style={{display: "none"}}>
+ <h2>Student academy on the topic of synthetic biology</h2>
+ </div>
+ <div id="teutoruft" className="cycletab" style={{display: "none"}}>
+ <h2>Educational city tour for young and old</h2>
+ </div>
+ <div id="mukomove" className="cycletab" style={{display: "none"}}>
+ <h2>Cystic fibrosis awareness month</h2>
+ </div>
<div className="row">
-
+
</div>
</>
);
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index d6295859..4945fc03 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,5 +1,5 @@
-import React from "react";
+import { openIt } from "../components/Buttons";
export function Engineering() {
@@ -57,21 +57,7 @@ export function Engineering() {
);
}
- function openIt({it}: {it: string}){
- const openit = (event : React.MouseEvent<HTMLElement, MouseEvent>) => {
- /* console.log(document.getElementById(it)) */
- console.log(document.getElementById(it)?.className)
- let tabcontent = document.getElementsByClassName("cycletab");
- for (let i = 0; i < tabcontent.length; i++) {
- (tabcontent[i] as HTMLElement).style.display = "none";
- }
- /* console.log(document.getElementById(it)!.style.display) */
- document.getElementById(it)!.style.display = "block";
-
- event.currentTarget.className += " active";
- }
- return openit;
- }
+
function EngineeringCycleTab(){
return(
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 899ab0bf..c8113db6 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -11,7 +11,7 @@
import { TimeHori } from "../components/HorizontalTimeline";
import { AllPopus } from "../components/HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
-import { ButtonFourFill, TabButtonRow, openTab } from "../components/Buttons";
+import { TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
--
GitLab