From 69343ba015124a6749c79e027e858ef8b46f24f1 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Sat, 20 Jul 2024 13:50:02 +0200
Subject: [PATCH] =?UTF-8?q?tab=20button=20datens=C3=A4tze=20combined?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App/App.css | 8 +--
src/components/Buttons.tsx | 54 +++++++++++-----
src/components/Tabs.tsx | 17 ++++-
src/components/seclarations.ts | 7 +-
src/contents/Bfh.tsx | 12 ++--
src/contents/description.tsx | 35 +++++++---
src/contents/human-practices.tsx | 108 +++++++++++++------------------
7 files changed, 143 insertions(+), 98 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 9ca65e35..1725afed 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -877,17 +877,17 @@ svg{
}
button.tabbutton.Patient.active, button.tabbutton.All.active,
button.tabbutton.Industry.active, button.tabbutton.Academia.active,
-button.tabbutton.Medical.active{
+button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: black;
}
-.Patient{
+.Patient, .modulators{
background-color: var(--accen-secondary);
}
-.Medical{
+.Medical, .inhalations{
background-color: var(--accent-primary);
}
@@ -2529,7 +2529,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
display: block;
}
-.tabtabs, .tabbys{
+.tabtabs, .tabbys, .meditabs, .timelinecardtabs, .timelinepersontabs{
display: none;
}
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 57dfbbad..76f6695c 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -1,5 +1,4 @@
import { Link } from "react-router-dom";
-import { openTab } from "../contents";
import { openCity } from "./HorizontalTimeline";
interface UrlButtonProps{
@@ -72,26 +71,25 @@ return (
);
};
-
-
-export function HPButtonrow(){
- return(
- <>
- <div className="align-items-center bottom-buttons">
- <TabButton classy="active" type="All" name="All" opentype="tabtabs" closing="tabbys"/>
- <TabButton classy="active" type="Patient" name="Patients" opentype="tabtabs" closing="tabbys"/>
- <TabButton classy="active" type="Medical" name="Medical Professionals" opentype="tabtabs" closing="tabbys"/>
- <TabButton classy="active" type="Academia" name="Academia" opentype="tabtabs" closing="tabbys"/>
- <TabButton classy="active" type="Industry" name="Industry" opentype="tabtabs" closing="tabbys"/>
-
- </div>
- </>
- )
+export function TabButtonRow({data, classy, opentype, closing}: {data: Array<TabDatensatz>, classy?: string, opentype: string, closing: string}){
+ let rows = []
+ for ( let i = 0; i < data.length; i++ ){
+ if(classy){
+ rows.push(<TabButton classy={classy} type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
+ }
+ else{
+ rows.push(<TabButton type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
+ }
+ }
+ return <div className="align-items-center bottom-buttons">
+ {rows}
+ </div>;
}
+
interface TabButtonProps{
classy?: string,
closing: string,
@@ -101,6 +99,7 @@ interface TabButtonProps{
name: string,
type: string
}
+// neuer
export function TabButton({classy, name, closing, opentype, type}:TabButtonProps){
if (!classy){
classy = ""
@@ -117,4 +116,27 @@ export function HPMoreButton({name}: {name: string}){
return(
<button className="tablinks hp-more-button" onClick={openCity({cityName: name})}> More</button>
)
+}
+
+export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
+ const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+ var i, tabcontent, tablinks, wegcontent;
+ tabcontent = document.getElementsByClassName(cla);
+ for (i = 0; i < tabcontent.length; i++) {
+ (tabcontent[i] as HTMLElement).style.display = "none";
+ }
+ tablinks = document.getElementsByClassName("tabbutton");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+ if (weg){
+ wegcontent = document.getElementsByClassName(weg);
+ for (i = 0; i < wegcontent.length; i++) {
+ (wegcontent[i] as HTMLElement).style.display = "none";
+ }
+ }
+ document.getElementById(cityName)!.style.display = "block";
+ event.currentTarget.className += " active";
+ }
+ return opencity;
}
\ No newline at end of file
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 8e36bf86..71882658 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -1,9 +1,20 @@
-
-export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
+// If new cla (class) is added it has to be added to css giving it display: none; as default
+export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
let rows = []
for ( let i = 0; i < data.length; i++ ){
rows.push(
- <div id={data[i].eid} className={cla}>
+ <div id={data[i].cssname} className={cla}>
+ {data[i].node}
+ </div>
+ )
+ }
+ return rows;
+ }
+ export function BFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
+ let rows = []
+ for ( let i = 0; i < data.length; i++ ){
+ rows.push(
+ <div id={data[i].cssname} className={cla}>
{data[i].node}
</div>
)
diff --git a/src/components/seclarations.ts b/src/components/seclarations.ts
index 2692a6ac..816dac10 100644
--- a/src/components/seclarations.ts
+++ b/src/components/seclarations.ts
@@ -16,7 +16,12 @@ interface Window {
}
interface NodeDatensatz{
node: React.ReactNode,
- eid: string
+ cssname: string
+ }
+ interface TabDatensatz{
+ node: React.ReactNode,
+ cssname: string,
+ buttonname: string
}
}
diff --git a/src/contents/Bfh.tsx b/src/contents/Bfh.tsx
index f4d76521..b9f54341 100644
--- a/src/contents/Bfh.tsx
+++ b/src/contents/Bfh.tsx
@@ -6,19 +6,23 @@ import { BFHStyleTabs } from "../components/Tabs";
let tabbys = [
{
node: <BFHpdf></BFHpdf>,
- eid: "pdf"
+ cssname: "pdf",
+ buttonname: "PDFs"
},
{
node: <MyTimeline></MyTimeline>,
- eid: "timeline"
+ cssname: "timeline",
+ buttonname: "Timeline"
},
{
node: <BFHGallery/>,
- eid: "gall"
+ cssname: "gall",
+ buttonname: "Gallery"
},
{
node: <About/>,
- eid: "about"
+ cssname: "about",
+ buttonname: "About"
}
]
export function Bfh() {
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index f279e503..0c573945 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -1,8 +1,11 @@
import { H2 } from "../components/headings";
import { Circle } from "../components/Shapes";
/* import "../utils/text.js"; */
-/* import { Collapsible } from "../components/Collapsible";
-import { InfoBox } from "../components/Boxes"; */
+import { Collapsible } from "../components/Collapsible";
+import { ButtonRowTabs } from "../components/Tabs";
+import {TabButtonRow} from "../components/Buttons";
+/* import { InfoBox } from "../components/Boxes"; */
+
export function Description() {
@@ -57,12 +60,15 @@ export function Description() {
<div className="col" >
How newbornscreening affected the numbers.
</div>
- </div>
- <h3>Treatment</h3>
- <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
- <Collapsible title="Different types of drugs" ></Collapsible>
- <p>Why we still need other options</p>
- <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/> */}
+ </div>*/}
+ <h3>Treatment</h3>
+ {/*<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> */}
+ <Collapsible title="Different types of drugs" >
+ <TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/>
+ <ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/>
+ </Collapsible>
+ {/* <p>Why we still need other options</p> */}
+ {/* <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/> */}
</section>
</div>
@@ -266,3 +272,16 @@ export function Description() {
</div>
);
}
+
+let medibuttonrowdata =[
+ {
+ node: <h2>Modulators</h2>,
+ buttonname: "Modulators",
+ cssname: "modulators"
+ },
+ {
+ node: <h2>Inhalations</h2>,
+ buttonname: "Inhalations",
+ cssname: "inhalations"
+ },
+]
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 25abcb07..d211a5e0 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -10,136 +10,120 @@
*/
import { TimeHori } from "../components/HorizontalTimeline";
import { AllPopus } from "../components/HorizontalTimeline";
-import { BFHStyleTabs } from "../components/Tabs";
-import { HPButtonrow } from "../components/Buttons";
+import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
+import { TabButtonRow, openTab } from "../components/Buttons";
+let timelinebuttonrowdata = [
+ {
+ buttonname: "All",
+ node: <TimeHori tab="" ></TimeHori>,
+ cssname: "All"
+ },
+ {
+ node: <TimeHori tab="Patient" ></TimeHori>,
+ buttonname: "Patients",
+ cssname: "Patient"
+ },
+ {
+ node: <TimeHori tab="Medical Professional" ></TimeHori>,
+ buttonname: "Mediacl Professionals",
+ cssname: "Medical"
+ },
+ {
+ node: <TimeHori tab="Academia" ></TimeHori>,
+ buttonname: "Academia",
+ cssname: "Academia"
+ },
+ {
+ node: <TimeHori tab="Industry" ></TimeHori>,
+ buttonname: "Industry",
+ cssname: "Industry"
+ }
+]
-let tabbys =[
+let timelinepersontabs =[
{
node: <>
<h3>Max</h3>
<p></p>
</>,
- eid: "Max"
+ cssname: "Max"
},
{
node: <>
</>,
- eid: "Berens"
+ cssname: "Berens"
},
{
node: <>
</>,
- eid: "Wischmeyer"
+ cssname: "Wischmeyer"
},
{
node: <>
</>,
- eid: "Friedlein"
+ cssname: "Friedlein"
},
{
node: <>
</>,
- eid: "Rnhale"
+ cssname: "Rnhale"
},
{
node: <>
</>,
- eid: "Mattjis"
+ cssname: "Mattjis"
},
{
node: <>
</>,
- eid: "Eltern"
+ cssname: "Eltern"
},
{
node: <>
</>,
- eid: "Physio"
+ cssname: "Physio"
},
{
node: <>
</>,
- eid: "Olariu"
+ cssname: "Olariu"
},
{
node: <>
</>,
- eid: "Eltern"
+ cssname: "Eltern"
},
{
node: <>
</>,
- eid: "Weber"
+ cssname: "Weber"
},
]
// die height für class="timeline row align-items-center" muss angepasst werden, damit die Boxen höher sein können
-let tabtabs = [
- {
- node: <TimeHori tab="" ></TimeHori>,
- eid: "All"
- },
- {
- node: <TimeHori tab="Academia" ></TimeHori>,
- eid: "Academia"
- },
- {
- node: <TimeHori tab="Patient" ></TimeHori>,
- eid: "Patient"
- },
- {
- node: <TimeHori tab="Medical Professional" ></TimeHori>,
- eid: "Medical"
- },
- {
- node: <TimeHori tab="Industry" ></TimeHori>,
- eid: "Industry"
- }
-]
export function HumanPractices() {
- openTab({cityName: "All", cla: "tabtabs"});
+ openTab({cityName: "All", cla: "timelinecardtabs"});
return (
<>
- <HPButtonrow/>
+ <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
<AllPopus></AllPopus>
- <BFHStyleTabs cla="tabtabs" data={tabtabs}></BFHStyleTabs>
- <BFHStyleTabs cla="tabbys" data={tabbys}></BFHStyleTabs>
+ <ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/>
+ <BFHStyleTabs cla="timelinepersontabs" data={timelinepersontabs}></BFHStyleTabs>
</>
);
}
-export function openTab({cityName, cla, weg}:{cityName: string, cla: string, weg?: string}) {
- const opencity = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
- var i, tabcontent, tablinks, wegcontent;
- tabcontent = document.getElementsByClassName(cla);
- for (i = 0; i < tabcontent.length; i++) {
- (tabcontent[i] as HTMLElement).style.display = "none";
- }
- tablinks = document.getElementsByClassName("tabbutton");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- if (weg){
- wegcontent = document.getElementsByClassName(weg);
- for (i = 0; i < wegcontent.length; i++) {
- (wegcontent[i] as HTMLElement).style.display = "none";
- }
- }
- document.getElementById(cityName)!.style.display = "block";
- event.currentTarget.className += " active";
- }
- return opencity;
-}
+
--
GitLab