diff --git a/src/App/App.css b/src/App/App.css
index 325049cbcab4ed632050065597ffac5f8b0eeb9d..6a4bf405eb7d042ff93a0241f75638414fe020eb 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -131,7 +131,7 @@ hr{
body {
/* padding-top: 56px; */
background-color: var(--ourbeige);
- color: #493843;
+ color: var(--offblack);
}
body.dark-mode {
background-color: var(--offblack);
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index f734761ac9baded53e126fc777c8a90e096ed9f9..5a0db6163880e5c5732b191187709022e8c58371 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -28,13 +28,13 @@ export function Villagebutton({ title, source, page }: { title: string; source:
export function Villbuttonrow(){
return(
<div className="small-row align-items-center bottom-buttons">
- <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
- <Villagebutton page="/team" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
- <Villagebutton page="/experiments" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
- <Villagebutton page="/description" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
- <Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
- <Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
- <Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
+ <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
+ <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
+ <Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
+ <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
+ <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
+ <Villagebutton page="/safety?tab=obeninsafety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
+ <Villagebutton page="/results?tab=resultheading" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
</div>
)
}
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 70c160447174cfa1bfbfb2861382af6fcf278256..a4af87212dc5fff97e136398d5553d13e7af4dbc 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -11,45 +11,39 @@ import { ButtonRowTabs } from "../components/Tabs";
import { useEffect } from "react";
import PieChart from "../components/Graph";
import PreCyse from "../components/precyse";
+import { handleScrollToCollapse, openNestedTab, openTab } from "../utils/TabNavigation";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
export function Description() {
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('.enginneeringtab');
- 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ const tabId = params.get('tab');
+ const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+
+ // Open the tab specified by tabId (and subTab if nested)
+ if (tabId) {
+ if (subTabId) {
+ // If subTab is provided, open the nested tab
+ openNestedTab(tabId, subTabId);
+ } else {
+ // Otherwise, just open the main tab
+ openTab(tabId);
+ }
+ }
+
+ // Scroll to the section specified by collapseId after opening the tab
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
+
+ // Open the tab from another page
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<div className="row mt-4">
@@ -58,7 +52,7 @@ export function Description() {
<section className="section">
<H2 id="Abstract" text="Abstract"/>
- <p>We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
+ <p id="obenindescription" >We are proud to introduce our next-generation prime editing technology <PreCyse/> . We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the Cystic Fibrosis Transmembrane Conductance Regulator (CFTR) gene. We optimize lipid nanoparticles (LNPs) for the efficient and cell-specific delivery of our therapeutic mRNA. Current treatment strategies are limited in terms of speed, precision and effectiveness, often failing to achieve long-lasting improvements. In addition, high costs and limited accessibility of pharmaceuticals contribute to adverse prognosis of many patients. We want to develop a monthly applied which represents a cure that is more advanced and user-friendly compared to other medications due to its longer lasting time, lowering the frequency of use. </p>
</section>
</div>
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 020f722b4c10010ef639b936a7f54bf80eed1793..d14906ab0b7adbf8ae987b565da87e2e08c3b503 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -5,58 +5,51 @@ import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openElement } from "../utils/openElement";
import { H3 } from "../components/Headings";
+import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
export function Engineering() {
const location = useLocation();
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ const tabId = params.get('tab');
+ const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
- // Open the tab specified by tabId
- if (tabId) {
- // Hide all tabs
- const tabs = document.querySelectorAll('.enginneeringtab');
- tabs.forEach((tab) => {
- (tab as HTMLElement).style.display = 'none';
- });
-
- // Show the selected tab
- const selectedTab = document.getElementById(tabId);
- if (selectedTab) {
- selectedTab.style.display = 'block';
- }
+ // Open the tab specified by tabId (and subTab if nested)
+ if (tabId) {
+ if (subTabId) {
+ // If subTab is provided, open the nested tab
+ openNestedTab(tabId, subTabId);
+ } else {
+ // Otherwise, just open the main tab
+ openTab(tabId);
}
-
+ }
- // 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;
+ // Scroll to the section specified by collapseId after opening the tab
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
+ // Open the tab from another page
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
}, [location.search]);
return (
<>
<div className="row mt-4">
<div className="col">
- <br/> <br/> <br/>
+ <br/> <br/> <br/>
<div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
- <section >
+ <section > <br id="obenengineering"/>
<div className="bg-lb box" >
- <H3 text="Our cycle" id="Our Cycle"></H3>
+ <H3 text="Our cycle" id="ourcycle"></H3>
<p>Hallo Prime Editing diesdas</p>
</div>
<div className="box" >
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index eb24e0926ddfc1d83f7c62cd0487f93f8fc748af..a87e7aeb543d14c65614b479d2137098ae8c534a 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -2,6 +2,7 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { H2 } from "../components/Headings";
export function Experiments() {
const location = useLocation();
@@ -33,6 +34,7 @@ export function Experiments() {
return (
<>
+ <H2 id="heading" text="Heading" ></H2>
<div className="row mt-4">
<div className="col-lg-8">
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 4280b394bc0e6d7af391a41f107470dd9b8b01fb..ed92c0959328fd75e0555af7bb496a43be3107b3 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -93,10 +93,10 @@ export function HumanPractices() {
return (
<div className="row mt-4">
- <BlockQuoteB
+ <span id="hp-quote"><BlockQuoteB
text="Human Practices is the study of how your work affects the world, and how the world affects your work."
cite="- Peter Carr, Director of Judging"
- />
+ /> </span>
<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>
<H2 text="Introduction" id="intro"/>
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index 6cb36fba1cdea20d61fd4159de26b70027af486d..5fef62c39269682eff3d680551d709409aafb6fc 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -1,6 +1,7 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { H2 } from "../components/Headings";
export function Results() {
const location = useLocation();
@@ -34,6 +35,7 @@ export function Results() {
return (
<>
+ <H2 id="resultheading" text="Heading" ></H2>
<div className="row mt-4">
<div className="col-lg-5">
<p>test hallo welt</p>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 22d46e76d96dba0c2232f4f823f402e6bb47c627..27cd59af1d07cf9c4fb8c593d5fc5df07064d194 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -2,39 +2,42 @@ import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
export function Safety() {
- const location = useLocation();
+ 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)! });
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ const tabId = params.get('tab');
+ const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
+
+ // Open the tab specified by tabId (and subTab if nested)
+ if (tabId) {
+ if (subTabId) {
+ // If subTab is provided, open the nested tab
+ openNestedTab(tabId, subTabId);
+ } else {
+ // Otherwise, just open the main tab
+ openTab(tabId);
}
+ }
+
+ // Scroll to the section specified by collapseId after opening the tab
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
+
+ // Open the tab from another page
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
}, [location.search]);
-
+
return (
<>
<div className="col">
- <section className="section">
+ <section id="obeninsafety" className="section">
<div id="Role"><H2 text="Role in iGem"/></div>
</section>
</div>
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index aed950cff566ec20a02b05d26f1666ac8d4c26ff..8ddb6ed97590e5821a5740aca4a9bcd4bf824f82 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -30,8 +30,8 @@ export function EngSide(){
<div className="sticky-top">
<nav className="sidebar">
<div>
- <a onClick={openThem({it: "our-cycle"})}>
- <div className="detail-sideitem">
+ <a onClick={openThem({it: "our-cycle", scrollToId: "ourcycle"})}>
+ <div className="detail-sideitem">
<div id="parent-our-cycle" className="sideitem active-sideitem">
<summary>Our Cycle</summary>
<span id="our-cycle" className="sidesubtab" style={{display: "block"}}>
diff --git a/src/utils/openThem.ts b/src/utils/openThem.ts
index 80ea4f4ec95767c3482510d5555fd3d8840d5791..b515635e2b7d2847dca18285fb15cd877ac34ce2 100644
--- a/src/utils/openThem.ts
+++ b/src/utils/openThem.ts
@@ -1,32 +1,40 @@
-export function openThem({it}: {it: string}){
- const gotoandopen = (_event : React.MouseEvent<HTMLElement, MouseEvent>) => {
-
- console.log("it classname: " + document.getElementById(it)?.className)
- console.log("it: " + it)
+export function openThem({it, scrollToId}: {it: string, scrollToId?: string}) {
+ const gotoandopen = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+ console.log("it classname: " + document.getElementById(it)?.className);
+ console.log("it: " + it);
+
let contenttabid = "tab-" + it;
let parent = "parent-" + it;
- console.log("we want to open " + it + " and " + contenttabid)
+ console.log("we want to open " + it + " and " + contenttabid);
+
let sideitems = document.getElementsByClassName("sideitem");
let subtabs = document.getElementsByClassName("sidesubtab");
let contenttabs = document.getElementsByClassName("enginneeringtab");
+
+ // Verstecke alle Subtabs und Content-Tabs
for (let i = 0; i < subtabs.length; i++) {
- (subtabs[i] as HTMLElement).style.display = "none";
- console.log("Hiding sidebar subtab...")
- }
- for (let i = 0; i < contenttabs.length; i++) {
- (contenttabs[i] as HTMLElement).style.display = "none";
- console.log("Hiding content tab...")
+ (subtabs[i] as HTMLElement).style.display = "none";
+ console.log("Hiding sidebar subtab...");
+ }
+ for (let i = 0; i < contenttabs.length; i++) {
+ (contenttabs[i] as HTMLElement).style.display = "none";
+ console.log("Hiding content tab...");
}
for (let i = 0; i < sideitems.length; i++) {
- (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
- console.log("Hiding sidebar subtab...")
+ (sideitems[i] as HTMLElement)!.classList.remove("active-sideitem");
+ console.log("Hiding sidebar subtab...");
}
- document.getElementById(it)!.style.display = "block";
- document.getElementById(parent)!.classList.add("active-sideitem");
- document.getElementById(contenttabid)!.style.display = "block";
-
-
- }
- return gotoandopen;
- }
\ No newline at end of file
+ // Zeige den aktuellen Tab und markiere das entsprechende Sidebar-Item
+ document.getElementById(it)!.style.display = "block";
+ document.getElementById(parent)!.classList.add("active-sideitem");
+ document.getElementById(contenttabid)!.style.display = "block";
+
+ // Scrolle zu der angegebenen ID, falls vorhanden
+ if (scrollToId && document.getElementById(scrollToId)) {
+ console.log("Scrolling to: " + scrollToId);
+ document.getElementById(scrollToId)!.scrollIntoView({ behavior: "smooth" });
+ }
+ };
+ return gotoandopen;
+}
diff --git a/src/utils/useNavigation.ts b/src/utils/useNavigation.ts
index af11dcd44c33bb5f81dee65408e89be33ac2268e..d3796381d007bf3e559c509b3526f06e86d9b0e5 100644
--- a/src/utils/useNavigation.ts
+++ b/src/utils/useNavigation.ts
@@ -4,34 +4,55 @@ export const useNavigation = () => {
const navigate = useNavigate();
const goToPagesAndOpenTab = (tabId: string, path: string) => {
- navigate(`${path}${tabId}`);
+ navigate(`${path}?tab=${tabId}`);
};
const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
- navigate(`${path}${collapseId}`);
+ navigate(`${path}?collapseId=${collapseId}`);
};
+
const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
- const navigate = useNavigate();
- navigate(`${path}?tab=${tabId}${collapseId ? `&collapseId=${collapseId}` : ''}`);
+ let url = `${path}?tab=${tabId}`;
+ if (collapseId) {
+ url += `&collapseId=${collapseId}`;
+ }
+ navigate(url);
};
const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
- const navigate = useNavigate();
let url = `${path}?tab=${tabId}`;
if (subTabId) {
- url += `&subTab=${subTabId}`;
+ url += `&subTab=${subTabId}`;
}
if (collapseId) {
- url += `&collapseId=${collapseId}`;
+ url += `&collapseId=${collapseId}`;
+ }
+ navigate(url);
+ };
+
+ // Erweiterte Funktion, die auch zu einer bestimmten ID innerhalb eines Tabs scrollen kann
+ const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId?: string }) => {
+ let url = `${path}?tab=${tabId}`;
+ if (scrollToId) {
+ url += `&scrollTo=${scrollToId}`;
}
navigate(url);
- };
-/* <a onClick={() => goToPageWithTabAndCollapsible({
- path: "/human-practices",
- tabId: "InvWesthoff",
- collapseId: "collapse-1" // ID of the collapsible to open
-})}>
- Go to Human Practices and Open Collapsible 1
-</a> */
- return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs };
-};
\ No newline at end of file
+
+ // Führe nach der Navigation das Scrollen aus
+ setTimeout(() => {
+ if (scrollToId) {
+ const element = document.getElementById(scrollToId);
+ if (element) {
+ // Berechne die Scroll-Position, um das Element in der Mitte zu setzen
+ const viewportHeight = window.innerHeight;
+ const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+ const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
+
+ window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+ }
+ }
+ }, 500); // Verzögere das Scrollen, um sicherzustellen, dass der Tab geladen ist
+ };
+
+ return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible, goToPageWithTabAndCollapsible, goToPageWithNestedTabs, goToPageWithTabAndScroll };
+};