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

hp layout

parent 388335d8
No related branches found
No related tags found
No related merge requests found
Pipeline #423612 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Buttons.tsx
+ 12
− 1
View file @ bd1ab7b1
......@@ -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)}>
......
src/components/HP-timeline.tsx
+ 0
− 1
View file @ bd1ab7b1
......@@ -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}/>
......
src/contents/education.tsx deleted 100644 → 0
+ 0
− 142
View file @ 388335d8
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
src/contents/human-practices.tsx
+ 183
− 27
View file @ bd1ab7b1
......@@ -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>
);
......
src/contents/survey.tsx deleted 100644 → 0
+ 0
− 43
View file @ 388335d8
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
src/utils/openFromOtherpAge.ts
+ 13
− 2
View file @ bd1ab7b1
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);
......
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