From bd1ab7b179a5b91a0b7316d38acacaf2cb0498bd Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 16 Sep 2024 14:52:41 +0200
Subject: [PATCH] hp layout
---
src/components/Buttons.tsx | 13 +-
src/components/HP-timeline.tsx | 1 -
src/contents/education.tsx | 142 ---------------------
src/contents/human-practices.tsx | 210 +++++++++++++++++++++++++++----
src/contents/survey.tsx | 43 -------
src/utils/openFromOtherpAge.ts | 15 ++-
6 files changed, 208 insertions(+), 216 deletions(-)
delete mode 100644 src/contents/education.tsx
delete mode 100644 src/contents/survey.tsx
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 6bea9546..f734761a 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -162,7 +162,18 @@ export function ButtonTwo(){
)
}
-export function ButtonOne({text, open}: {text:string, open:string}){
+export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
+ if (openclass) {
+ return(
+ <div className="boxy-1">
+ <span typeof="button" onClick={openFromOtherPage(open, openclass)}>
+ <div className="btn-new btn-one">
+ {text}
+ </div></span>
+ </div>
+ )
+
+ }
return(
<div className="boxy-1">
<span typeof="button" onClick={openFromOtherPage(open)}>
diff --git a/src/components/HP-timeline.tsx b/src/components/HP-timeline.tsx
index 937a3115..dcfeb120 100644
--- a/src/components/HP-timeline.tsx
+++ b/src/components/HP-timeline.tsx
@@ -6,7 +6,6 @@ export function HPTimeline(){
return(
<section id="Timeline" className="section">
<div className="center">
- <h3 className="col personalstyleone">Timeline</h3>
</div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
<ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
deleted file mode 100644
index 2c942314..00000000
--- a/src/contents/education.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-
-import { ButtonOne} from "../components/Buttons";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { useNavigation } from "../utils/useNavigation";
-import { H2 } from "../components/Headings";
-
-export function Education() {
- const { goToPagesAndOpenTab/* , goToTextsAndOpenCollapsible */ } = useNavigation();
- const location = useLocation();
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Open the tab specified by tabId
- if (tabId) {
- // Hide all tabs
- const tabs = document.querySelectorAll('.cycletab');
- tabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
-
- // Show the selected tab
- const selectedTab = document.getElementById(tabId);
- if (selectedTab) {
- selectedTab.style.display = 'block';
- }
- }
-
- // Scroll to the section specified by collapseId after opening the tab
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-}, [location.search]);
-
- return (
- <>
- <div>
- <H2 id="interviews" text="Interviews Page"/>
- {/* <a onClick={() => goToTextsAndOpenCollapsible("symptoms-collapsible", "/description?collapseId=")}>
- Go to Texts and Open Collapsible 1
- </a> */}
- </div>
- <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">
- <ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
- </div>
- </div>
- <div id="overview" className="cycletab" style={{display: "block"}}>
- <H2 id="edu-out-heading" text="Our education and outreach"/>
- <H2 id="why-heading" text="If not as a special prize - then why?"/>
- </div>
- <div id="akademie" className="cycletab" style={{display: "none"}}>
- <H2 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
- </div>
- <div id="teutoruft" className="cycletab" style={{display: "none"}}>
- <H2 id="teuroruft-heading" text="Educational city tour for young and old"/>
-
- <div className="row align-items-center">
- <div className="col">
- <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-experminet.jpeg"></img>
- </div>
- <div className="col">
- <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-gruppe.jpeg"></img>
- </div>
- </div>
- </div>
- <div id="mukomove" className="cycletab" style={{display: "none"}}>
- <H2 id="cf-month" text="Cystic fibrosis awareness month"/>
- <div className="row">
- <div className="full-small col-3">
- <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
- </div>
- <div className="col">
- <h3>What is MUKOMOVE?</h3>
- <p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
- 12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by
- <a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds
- for cystic fibrosis research and support. This annual event encourages individuals and teams to
- engage in various physical activities, track their movement, and share their experiences online. </p>
- <button>Spenden</button>
- </div>
- </div>
- <br/>
- <div className="row">
- <div className="col">
- <h3>Why and in which ways were we invested in MUKOmove? </h3>
- <p>We did not stop at our participation itself – we wanted to make other people from our university and city
- aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team.
- Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a
- practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known
- this illness still is. Especially the interview with the physiotherapist made us realize how important
- exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in
- Bielefeld. That is why we really got the publicity going by putting up posters and distributing flyers
- at the university and in our city as you can see in the following picture. </p>
- </div>
- <div className="full-small col-4">
- <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/img-7828.jpeg"></img>
- </div>
- </div>
- <br/>
- <p>We also called for MUKOmove on our socials and set our team a goal of collecting 240 hours doing sports together,
- while the entire MUKOmove had a goal of collecting 24,000 sport hours. In cooperation with our university's
- sports facilities, using their <a href="https://www.uni-bielefeld.de/einrichtungen/hochschulsport/zusatzangebote/houbi/">“HOUBI-Aktivmobil"</a> and other equipment, we organized a team event at the sports
- ground of our university at the begin of MUKOmove. Everyone was warmly invited to our event on May 8th, and
- it was a lot of fun to play various sport games together outside in the sun – check out in the following
- video! </p>
- <div className="row align-items-center">
- <div className="col">
- <img src="https://www.mapcom.com/wp-content/uploads/2015/07/video-placeholder.jpg"></img>
- </div>
- </div>
- <br/>
- <h3>What did we achieve?</h3>
- <p>We are happy to announce that both movement goals were surpassed: Team iGEM Bielefeld was able to collect 358 sport hours, and everyone who took part in MUKOmove together collected 36,542 sport hours! </p>
- <p>The MUKOmove was therefore a complete success, and we take pride in having contributed to the goal while raising more awareness for cystic fibrosis in our region and Germany as a whole.</p>
- </div>
-
- </>
- );
- }
-
\ No newline at end of file
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 7a371203..b9d8decd 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -48,16 +48,19 @@
<h4>Implementation</h4>
<p></p>
*/
-import { MindMapTwo } from "../components/MindMapTwo";
import { ButtonOne } from "../components/Buttons";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { BlockQuoteB } from "../components/Quotes";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
+import { useNavigation } from "../utils/useNavigation";
import { openElement } from "../utils/openElement";
import { HPTimeline } from "../components/HP-timeline";
+import { H2, H3 } from "../components/Headings";
export function HumanPractices() {
+ const { goToPagesAndOpenTab/* , goToTextsAndOpenCollapsible */ } = useNavigation();
+
openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
const location = useLocation();
@@ -95,41 +98,194 @@ export function HumanPractices() {
cite="- Peter Carr, Director of Judging"
/>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.6mRPyWPFEIQzo-HP4kEukgHaEK%26pid%3DApi&f=1&ipt=ad1e62d3df6a343c1c163a8246d424a7b61015ac43a0cbe279976cf544be7aa7&ipo=images" alt="placeholder"></img>
- <section id="Overview" className="section">
- <div className="center" >
- <h3 className="col personalstyleone">Overview</h3>
- </div>
+
+ <H2 text="Introduciton" id="intro"/>
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
+ <div className="col">
+ <ButtonOne text="Our Understanding of HP" open="understanding"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Our Mission & Vision" open="mission"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Our Target Groups" open="targets"></ButtonOne>
+ </div>
+ </div>
+ <div className="col cycletab" id="understanding" style={{display: "block"}}> understanding </div>
+ <div className="col cycletab" id="mission" style={{display: "none"}}>mission </div>
+ <div className="col cycletab" id="targets" style={{display: "none"}}>targets </div>
+
+ <H3 text="Framework" id="frame"/>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
<div className="col">
- <ButtonOne text="Inspiration" open="inspiration"></ButtonOne>
+ <ButtonOne text="Stakeholder Management" open="stakemamange" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Mendelow Analysis" open="mendelow" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="SWOT analysis" open="swot" openclass="framecycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="row align-items-center" style={{marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Feedback Cycle" open="feedcycle" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Thirs Party Feedback" open="thirdparty" openclass="framecycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Cycle of Reflection" open="refcycle" openclass="framecycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="col framecycletab" id="stakemamange" style={{display: "block"}}>stakemamange </div>
+ <div className="col framecycletab" id="mendelow" style={{display: "none"}}>mendelow </div>
+ <div className="col framecycletab" id="swot" style={{display: "none"}}>
+
+ <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
+ <div className="col">
+ <ButtonOne text="Patients" open="pats" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Industry" open="inds" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Academia" open="acs" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Healthcare" open="healths" openclass="subcycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="row align-items-center" style={{ marginBottom: "5vh"}}>
+ <div className="col">
+ <ButtonOne text="Government" open="govs" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Community" open="comms" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="The Public" open="pubs" openclass="subcycletab"></ButtonOne>
+ </div>
+ <div className="col">
+ <ButtonOne text="Business" open="busi" openclass="subcycletab"></ButtonOne>
+ </div>
+ </div>
+ <div className="col subcycletab" id="pats" style={{display: "block"}}> pats </div>
+ <div className="col subcycletab" id="inds" style={{display: "none"}}>inds </div>
+ <div className="col subcycletab" id="acs" style={{display: "none"}}>acs </div>
+ <div className="col subcycletab" id="healths" style={{display: "none"}}> healths </div>
+ <div className="col subcycletab" id="govs" style={{display: "none"}}>govs </div>
+ <div className="col subcycletab" id="comms" style={{display: "none"}}>comms </div>
+ <div className="col subcycletab" id="pubs" style={{display: "none"}}>pubs </div>
+ <div className="col subcycletab" id="busi" style={{display: "none"}}>busi </div>
+ </div>
+ <div className="col framecycletab" id="thirdparty" style={{display: "none"}}>thirdparty </div>
+ <div className="col framecycletab" id="feedcycle" style={{display: "none"}}>feedcycle </div>
+ <div className="col framecycletab" id="refcycle" style={{display: "none"}}>refcycle </div>
+
+ <H2 text="Integrated Human Practices" id="timeline"/>
+ <HPTimeline/>
+
+ <H2 text="Reflection" id="reflection"/>
+
+ <H2 text="Conclusion" id="conclusion"/>
+
+ <H2 text="Additions" id="additions"/>
+
+ <H3 text="Education and Outreach" id="edu"/>
+ <>
+ <div>
+ <H2 id="interviews" text="Interviews Page"/>
+ {/* <a onClick={() => goToTextsAndOpenCollapsible("symptoms-collapsible", "/description?collapseId=")}>
+ Go to Texts and Open Collapsible 1
+ </a> */}
+ </div>
+ <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="Methods" open="methods"></ButtonOne>
+ <ButtonOne text="MukoMove" open="mukomove"></ButtonOne>
</div>
<div className="col">
- <ButtonOne text="Values and goals" open="values"></ButtonOne>
+ <ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
</div>
<div className="col">
- <ButtonOne text="Stakeholders" open="stakeholders"></ButtonOne>
- </div>
- </div>
- <div className="col cycletab" id="inspiration" style={{display: "block"}}>Hallo </div>
- <div className="col cycletab" id="values" style={{display: "none"}}>Hallo </div>
- <div className="col cycletab" id="methods" style={{display: "none"}}>Hallo </div>
- <div className="col cycletab" id="stakeholders" style={{position: "relative", height: "fit-content", display: "none"}}>
- <MindMapTwo></MindMapTwo>
- </div>
- </section>
- <HPTimeline/>
-
-
- <section id="Reflection" >
- <div className="center">
- <h3 className="col personalstyleone">Reflection Framework</h3>
- </div>
-
- </section>
+ <ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
+ </div>
+ </div>
+ <div id="overview" className="cycletab" style={{display: "block"}}>
+ <H2 id="edu-out-heading" text="Our education and outreach"/>
+ <H2 id="why-heading" text="If not as a special prize - then why?"/>
+ </div>
+ <div id="akademie" className="cycletab" style={{display: "none"}}>
+ <H2 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
+ </div>
+ <div id="teutoruft" className="cycletab" style={{display: "none"}}>
+ <H2 id="teuroruft-heading" text="Educational city tour for young and old"/>
+
+ <div className="row align-items-center">
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-experminet.jpeg"></img>
+ </div>
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-gruppe.jpeg"></img>
+ </div>
+ </div>
+ </div>
+ <div id="mukomove" className="cycletab" style={{display: "none"}}>
+ <H2 id="cf-month" text="Cystic fibrosis awareness month"/>
+ <div className="row">
+ <div className="full-small col-3">
+ <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
+ </div>
+ <div className="col">
+ <h3>What is MUKOMOVE?</h3>
+ <p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
+ 12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by
+ <a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds
+ for cystic fibrosis research and support. This annual event encourages individuals and teams to
+ engage in various physical activities, track their movement, and share their experiences online. </p>
+ <button>Spenden</button>
+ </div>
+ </div>
+ <br/>
+ <div className="row">
+ <div className="col">
+ <h3>Why and in which ways were we invested in MUKOmove? </h3>
+ <p>We did not stop at our participation itself – we wanted to make other people from our university and city
+ aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team.
+ Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a
+ practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known
+ this illness still is. Especially the interview with the physiotherapist made us realize how important
+ exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in
+ Bielefeld. That is why we really got the publicity going by putting up posters and distributing flyers
+ at the university and in our city as you can see in the following picture. </p>
+ </div>
+ <div className="full-small col-4">
+ <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/img-7828.jpeg"></img>
+ </div>
+ </div>
+ <br/>
+ <p>We also called for MUKOmove on our socials and set our team a goal of collecting 240 hours doing sports together,
+ while the entire MUKOmove had a goal of collecting 24,000 sport hours. In cooperation with our university's
+ sports facilities, using their <a href="https://www.uni-bielefeld.de/einrichtungen/hochschulsport/zusatzangebote/houbi/">“HOUBI-Aktivmobil"</a> and other equipment, we organized a team event at the sports
+ ground of our university at the begin of MUKOmove. Everyone was warmly invited to our event on May 8th, and
+ it was a lot of fun to play various sport games together outside in the sun – check out in the following
+ video! </p>
+ <div className="row align-items-center">
+ <div className="col">
+ <img src="https://www.mapcom.com/wp-content/uploads/2015/07/video-placeholder.jpg"></img>
+ </div>
+ </div>
+ <br/>
+ <h3>What did we achieve?</h3>
+ <p>We are happy to announce that both movement goals were surpassed: Team iGEM Bielefeld was able to collect 358 sport hours, and everyone who took part in MUKOmove together collected 36,542 sport hours! </p>
+ <p>The MUKOmove was therefore a complete success, and we take pride in having contributed to the goal while raising more awareness for cystic fibrosis in our region and Germany as a whole.</p>
+ </div>
+ </>
+ <H3 text="The survey" id="survey"/>
</div>
);
diff --git a/src/contents/survey.tsx b/src/contents/survey.tsx
deleted file mode 100644
index 2491d392..00000000
--- a/src/contents/survey.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-export function Survey() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
- return (
- <>
- <div className="row mt-4">
- <div className="col">
-
- </div>
- </div>
- </>
- );
- }
-
\ No newline at end of file
diff --git a/src/utils/openFromOtherpAge.ts b/src/utils/openFromOtherpAge.ts
index 17702904..383443f3 100644
--- a/src/utils/openFromOtherpAge.ts
+++ b/src/utils/openFromOtherpAge.ts
@@ -1,10 +1,21 @@
-export function openFromOtherPage(it: string) {
+export function openFromOtherPage(it: string, openclass?: string) {
+ var opcla: string;
+ if (openclass){
+ opcla = openclass;
+ }
+ else{
+ opcla = "cycletab";
+ }
return (event: React.MouseEvent<HTMLElement> | { currentTarget: HTMLElement }) => {
// Get all elements with class "cycletab" and hide them
- let tabcontent = document.getElementsByClassName("cycletab");
+ let tabcontent = document.getElementsByClassName(opcla);
+ /* let subtabcontent = document.getElementsByClassName("subcycletab"); */
for (let i = 0; i < tabcontent.length; i++) {
(tabcontent[i] as HTMLElement).style.display = "none";
}
+ /* for (let i = 0; i < subtabcontent.length; i++) {
+ (subtabcontent[i] as HTMLElement).style.display = "none";
+ } */
// Show the specific tab content based on the "it" parameter
const tabToOpen = document.getElementById(it);
--
GitLab