From 9ace529cb0f2a11669eec24d8aff1b8838267a38 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 23 Aug 2024 20:14:50 +0200
Subject: [PATCH] scroll to and open collapsible
---
src/App/App.css | 4 ++
src/components/Collapsible.tsx | 70 ++++++++++++++++++-------------
src/components/goto.tsx | 50 ++++++++++++++++++++++
src/contents/description.tsx | 72 ++++++++++++++++++++++----------
src/contents/education.tsx | 11 +++++
src/contents/human-practices.tsx | 25 ++++++++++-
src/contents/partners.tsx | 21 ++++++++++
7 files changed, 199 insertions(+), 54 deletions(-)
create mode 100644 src/components/goto.tsx
diff --git a/src/App/App.css b/src/App/App.css
index 667c3c11..5cb8ac1b 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -48,6 +48,10 @@
--node-size: 60px;
}
+html{
+ scroll-behavior: smooth;
+}
+
.max400{
max-height: 400px !important;
}
diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index 5b10fbde..224c63c9 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -1,43 +1,55 @@
-import { useState } from 'react';
-
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
interface IProps {
- open?: boolean;
- title?: string;
- children?: React.ReactNode;
- }
+ open?: boolean;
+ children: React.ReactNode;
+ title: string;
+ id: string;
+}
- export const Collapsible: React.FC<IProps> = ({ open, children, title }) => {
+ export const Collapsible: React.FC<IProps> = ({ open = false, children, title, id }) => {
const [isOpen, setIsOpen] = useState(open);
-
+ const location = useLocation();
+
+ useEffect(() => {
+ // Check if the current URL has the specific collapse ID
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+
+ if (collapseId === id) {
+ setIsOpen(true);
+ }
+ }, [location.search, id]);
+
const handleFilterOpening = () => {
- setIsOpen((prev) => !prev);
+ setIsOpen((prev) => !prev);
};
return (
- <>
- <div className="collapse-card bg-db">
- <div>
- <div className="d-flex justify-content-between">
- <h6 className="font-weight-bold collapsible-a">{title}</h6>
- <button type="button" className="btn" onClick={handleFilterOpening}>
- {!isOpen ? (
- <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-down.png" />
- ) : (
- <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-up32px.png" />
- )}
- </button>
+ <>
+ <div id={id} className="collapse-card bg-db">
+ <div>
+ <div className="d-flex justify-content-between">
+ <h6 className="font-weight-bold collapsible-a">{title}</h6>
+ <button type="button" className="btn" onClick={handleFilterOpening}>
+ {!isOpen ? (
+ <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-down.png" />
+ ) : (
+ <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-up32px.png" />
+ )}
+ </button>
+ </div>
+ </div>
+
+ <div className="">
+ <div>{isOpen && <div className="p-3"><hr className='collapsible-hr' />{children}</div>}</div>
+ </div>
</div>
- </div>
-
- <div className="">
- <div>{isOpen && <div className="p-3"> <hr className='collapsible-hr'/> {children}</div>}</div>
- </div>
- </div>
- </>
+ </>
);
- };
+};
export const CollapsibleTwo: React.FC<IProps> = ({ open, children, title }) => {
const [isOpen, setIsOpen] = useState(open);
diff --git a/src/components/goto.tsx b/src/components/goto.tsx
new file mode 100644
index 00000000..76a2a45e
--- /dev/null
+++ b/src/components/goto.tsx
@@ -0,0 +1,50 @@
+export const goTo = (el: HTMLElement): void => {
+ const elementTop = el.getBoundingClientRect().top;
+ const elementPosition = elementTop + window.pageYOffset;
+ const middlePosition = elementPosition - (window.innerHeight / 3) + (el.offsetHeight / 2);
+
+ window.scrollTo({
+ top: middlePosition,
+ behavior: 'smooth'
+ });
+};
+
+interface ScrollLinkProps {
+ targetId: string;
+ label: string;
+}
+interface SupScrollLinkProps {
+ label: string;
+}
+
+export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
+ const handleClick = () => {
+ const targetElement = document.getElementById(targetId);
+ if (targetElement) {
+ goTo(targetElement);
+ }
+ };
+
+ return (
+ <a onClick={handleClick}>
+ {label}
+ </a>
+ );
+};
+
+export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => {
+ let targetId = "desc-" + label
+ const handleClick = () => {
+ const targetElement = document.getElementById(targetId);
+ if (targetElement) {
+ goTo(targetElement);
+ }
+ };
+
+ return (
+ <sup><a onClick={handleClick}>
+ {label}
+ </a>
+ </sup>
+ );
+};
\ No newline at end of file
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 23ace0b3..86d08b7c 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -1,18 +1,43 @@
+import { useLocation, useNavigate } from "react-router-dom";
import { InfoBox } from "../components/Boxes";
import { TabButtonRow } from "../components/Buttons";
import Collapsible from "../components/Collapsible";
+import { SupScrollLink } from "../components/goto";
import { H2} from "../components/headings";
import { LoremMedium, LoremShort } from "../components/loremipsum";
import { Circle } from "../components/Shapes";
import { Complex } from "../components/svgs";
import { ButtonRowTabs } from "../components/Tabs";
+import { useEffect } from "react";
/* import PieChart from './Graph.tsx'; */
+
export function Description() {
+ const location = useLocation();
+ useEffect(() => {
+ // Scroll to the section specified by the collapseId in the URL
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+
+ if (collapseId) {
+ const element = document.getElementById(collapseId);
+ if (element) {
+ const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
+ const offset = window.innerHeight / 2 - element.offsetHeight / 2;
+ const scrollPosition = elementTop - offset;
+
+ window.scrollTo({
+ top: scrollPosition,
+ behavior: 'smooth',
+ });
+ }
+ }
+ }, [location.search]);
return (
<div className="row mt-4">
<div className="col">
<div className="col">
+
<section id="Abstract" className="section">
<H2 text="Abstract"/>
<p>We are proud to introduce our next-generation prime editing technology <a href="#" className="underline--magical">PreCyse</a>. We aim to develop an innovative gene therapy against cystic fibrosis, tackling the most common mutation ΔF508 of the CFTR (Cystic Fibrosis Transmembrane Conductance Regulator) gene. We optimize lipid nanoparticles 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>
@@ -25,7 +50,8 @@ export function Description() {
<h3>General</h3>
<div className="row align-items-center">
<div className="col">
- <p data-aos="zoom-y-out" >Cystic fibrosis (CF) is the most common life-limiting genetic disorder in the Caucasian population. In Europe, CF affecting about 1 in 3,000 newborns<a href="#desc-one"><sup>1</sup></a>.</p>
+ <p data-aos="zoom-y-out" >Cystic fibrosis (CF) is the most common life-limiting genetic disorder in the Caucasian population. In Europe, CF affecting about 1 in 3,000 newborns
+ <SupScrollLink label="1"/>.</p>
<p> It is caused by mutations in the CFTR gene, which controls ions and water movement in cells. This leads to thick mucus, clogging airways, and frequent infections. The defective CFTR protein impacts the respiratory and digestive systems, causing chronic lung infections, breathing difficulties, and malnutrition. CF's severity varies, but it reduces life quality and expectancy. There are over 1,700 CFTR mutations; the ΔF508 mutation is most common, present in 70% of cases. It prevents proper protein folding, affecting its function. </p>
<p><LoremMedium/></p>
</div>
@@ -61,19 +87,19 @@ export function Description() {
<h3>ΔF508</h3>
<p>A multitude of mutations in the CFTR gene, exceeding 1,000, are responsible for the development of cystic
fibrosis. The most prevalent variant is F508del, observed in approximately 70% of affected individuals of
- Caucasian descent in Canada, Northern Europe, and the United States <a href="#desc-14"><sup>14</sup></a>. It is estimated that around 90% of
+ Caucasian descent in Canada, Northern Europe, and the United States<SupScrollLink label="14"/>. It is estimated that around 90% of
the European population and people of European heritage with cystic fibrosis carry at least one F508del
- variant <a href="#desc-15"><sup>15,</sup></a><a href="#desc-16"><sup>16</sup></a>. Analyses have demonstrated that the F508del mutation originated in Western Europe at least
- 5,000 years ago <a href="#desc-15"><sup>15</sup></a>. </p>
+ variant <SupScrollLink label="15"/><SupScrollLink label="16"/>. Analyses have demonstrated that the F508del mutation originated in Western Europe at least
+ 5,000 years ago <SupScrollLink label="15"/>. </p>
<p>It is a deletion of the three nucleotides "CTT" at position 508, which removes the phenylalanine residue
without causing a frameshift. This deletion leads to defects in the kinetic and thermodynamic folding
- of the NBD1 domain <a href="#desc-16"><sup>16</sup></a>. However, this not only leads to misfolding of CFTR but also to defects in
- trafficking and premature degradation, resulting in reduced surface expression of CFTR <a href="#desc-17"><sup>17</sup></a>. </p>
+ of the NBD1 domain <SupScrollLink label="16"/>. However, this not only leads to misfolding of CFTR but also to defects in
+ trafficking and premature degradation, resulting in reduced surface expression of CFTR <SupScrollLink label="17"/>. </p>
<img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
<h3>Symptoms</h3>
<p>Text about symptoms</p>
- <Collapsible title="How the symptoms affect different parts of the body" ></Collapsible>
+ <Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" > Child </Collapsible>
<h3>Diagnosis</h3>
<p>About the ways one can be diagnosed <LoremMedium/></p>
<div className="row align-items-center">
@@ -87,7 +113,7 @@ export function Description() {
</div>
<h3>Treatment</h3>
<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
- <Collapsible title="Different types of drugs" >
+ <Collapsible id="drugs-collapsible" title="Different types of drugs" >
<TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/>
<ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/>
</Collapsible>
@@ -114,10 +140,10 @@ export function Description() {
<div className="col">
<section id="Approach" className="section">
<H2 text="Approach"></H2>
- <p>To correct the mutation, we are utilizing Prime Editing technologies. Prime Editing is a genome editing technique that allows precise DNA modifications without causing double-strand breaks<a href="#desc-two"><sup>2</sup></a>. Structurally, the Prime Editing complex consists of a Cas9 endonuclease fused to a reverse transcriptase (RT) and guided by a pegRNA, which directs the complex to the target site in the genome. </p>
+ <p>To correct the mutation, we are utilizing Prime Editing technologies. Prime Editing is a genome editing technique that allows precise DNA modifications without causing double-strand breaks<SupScrollLink label="2"/>. Structurally, the Prime Editing complex consists of a Cas9 endonuclease fused to a reverse transcriptase (RT) and guided by a pegRNA, which directs the complex to the target site in the genome. </p>
<InfoBox title="Prime Editing">
<details>
- <summary>Prime editing is a new method of gene editing based on an RNA-Protein complex. It was developed by a group of researchers revolving around Professor David Liu from Harvard University in 2019. <a href="#desc-nine"><sup>9</sup></a></summary>
+ <summary>Prime editing is a new method of gene editing based on an RNA-Protein complex. It was developed by a group of researchers revolving around Professor David Liu from Harvard University in 2019. <SupScrollLink label="9"/></summary>
<p>Details</p>
<LoremMedium/>
</details>
@@ -126,10 +152,10 @@ export function Description() {
*/} <div className="img-right img-half"><Complex></Complex></div>
<div>
- <p>However, the Prime Editing complex is relatively large, posing challenges for therapeutic delivery<a href="#desc-three"><sup>3</sup></a>. Additionally, Prime Editing has been shown to be relatively inefficient in terms of gene editing rates, which could limit its therapeutic utility<a href="#desc-four"><sup>4</sup></a>. Our project aims to enhance the Prime Editing approach by miniaturizing its components. Fanzor, a recently discovered eukaryotic endonuclease, performs functions similar to Cas9, a crucial part of the Prime Editing complex, but is significantly smaller. We aim to substitute Cas9 with Fanzor. </p>
- <p>Additionally, we plan to replace the reverse transcriptase in the Prime Editing complex with a smaller RT variant. Furthermore, MCP proteins will be added to the Prime Editing complex to increase its stability<a href="#desc-five"><sup>5</sup></a>. </p>
+ <p>However, the Prime Editing complex is relatively large, posing challenges for therapeutic delivery<SupScrollLink label="3"/>. Additionally, Prime Editing has been shown to be relatively inefficient in terms of gene editing rates, which could limit its therapeutic utility<SupScrollLink label="4"/>. Our project aims to enhance the Prime Editing approach by miniaturizing its components. Fanzor, a recently discovered eukaryotic endonuclease, performs functions similar to Cas9, a crucial part of the Prime Editing complex, but is significantly smaller. We aim to substitute Cas9 with Fanzor. </p>
+ <p>Additionally, we plan to replace the reverse transcriptase in the Prime Editing complex with a smaller RT variant. Furthermore, MCP proteins will be added to the Prime Editing complex to increase its stability<SupScrollLink label="5"/>. </p>
</div>
- <Collapsible title="Cas vs. Fanzor" ></Collapsible>
+ <Collapsible id="fanzorcas-collapsible" title="Cas vs. Fanzor"> child </Collapsible>
<p>The pegRNA is optimized via an extension by a stem loop, which stabilizes the RNA by protecting it from RNases and serves as a binding site for the MCP, which also supports the secondary RNA structure. Additionally, the pegRNA contains a riboswitch, a sodium ion-controlled regulator that switches off the complex. This represents a major biosafety feature in that the complex is switched off after successful DNA editing and the subsequent increased influx of chloride ions into the cell. The pegRNA is combined with an optimized sgRNA resulting in higher on-target effect. Overall, its optimization leads to a longer shelf life and an increase in the biosafety of the complex. </p>
<InfoBox title="Riboswitch">
About the Riboswitch
@@ -142,7 +168,7 @@ export function Description() {
<H2 text="Delivery"></H2>
<img className="img-left img-half spin" src="https://static.igem.wiki/teams/5247/scientific-figures/lnp.png" height={"200vw"}/>
<div>
- <p>We chose LNPs as the delivery system of our Next-Generation Prime Editing Technology. Because of their large capacity and less immunogenic side effects compared to other delivery systems like Adeno-associated Viruses (AVV)<a href="#desc-six"><sup>6</sup></a>. Our aim is to optimize the LNP formulation to improve delivery to lung tissue via inhalation. Because of our collaborations, we are able to test and optimize different delivery systems to improve our organ specific therapeutic approach. Therefore, our LNP design focusses on stability and targeting. Stability is achieved by a polyethylene glycol (PEG) coating that protects the LNPs from degradation by the immune system<a href="#desc-seven"><sup>7</sup></a>. Moreover, we use capsaicin in combination with chitosan to improve the uptake of our construct through their mucus-adhesive properties<a href="#desc-eight"><sup>8</sup></a>. </p>
+ <p>We chose LNPs as the delivery system of our Next-Generation Prime Editing Technology. Because of their large capacity and less immunogenic side effects compared to other delivery systems like Adeno-associated Viruses (AVV)<SupScrollLink label="6"/>. Our aim is to optimize the LNP formulation to improve delivery to lung tissue via inhalation. Because of our collaborations, we are able to test and optimize different delivery systems to improve our organ specific therapeutic approach. Therefore, our LNP design focusses on stability and targeting. Stability is achieved by a polyethylene glycol (PEG) coating that protects the LNPs from degradation by the immune system<SupScrollLink label="7"/>. Moreover, we use capsaicin in combination with chitosan to improve the uptake of our construct through their mucus-adhesive properties<SupScrollLink label="8"/>. </p>
</div>
<div className="row align-items-center">
<div className="col">
@@ -153,7 +179,7 @@ export function Description() {
</div>
</div>
<br/>
- <p>We are furthermore optimising the LNPs for pulmonary therapy and investigating delivery by nebulisation as a non-invasive method compared to systemic approaches to make the therapy more convenient for patients. For specific targeting, we are focussing on marker proteins of basal cells and ionocytes that produce particularly high levels of CFTR protein and which we want to target with appropriate antibodies<a href="#desc-nine"><sup>9</sup></a>. Our workflow includes testing our next generation Prime Editing Technology delivered by our optimized LNPs in cell culture lines but also in primary nasal epithelial cells of CF patients to evaluate our optimizations and further improvements in vitro. We can also provide the outlook on the adaptation of the delivery system enabling systemic applications as well. </p>
+ <p>We are furthermore optimising the LNPs for pulmonary therapy and investigating delivery by nebulisation as a non-invasive method compared to systemic approaches to make the therapy more convenient for patients. For specific targeting, we are focussing on marker proteins of basal cells and ionocytes that produce particularly high levels of CFTR protein and which we want to target with appropriate antibodies<SupScrollLink label="9"/>. Our workflow includes testing our next generation Prime Editing Technology delivered by our optimized LNPs in cell culture lines but also in primary nasal epithelial cells of CF patients to evaluate our optimizations and further improvements in vitro. We can also provide the outlook on the adaptation of the delivery system enabling systemic applications as well. </p>
</section>
</div>
@@ -173,7 +199,7 @@ export function Description() {
<H2 text="References"></H2>
<ol>
{/* <!-- Citation num 1--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-one">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Scotet, V.</span>,
<span property="schema:Name">Gutierrez, H.</span>,
@@ -187,7 +213,7 @@ export function Description() {
</li>
{/* <!-- Citation num 2--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-two">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-2">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Anzalone, A.V.</span>,
<span property="schema:Name">Randolph, P.B.</span>,
@@ -208,7 +234,7 @@ export function Description() {
</li>
{/* <!-- Citation num 3--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-three">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-3">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Broad Institute of MIT and Harvard. </span>
</span>
@@ -218,7 +244,7 @@ export function Description() {
</li>
{/* <!-- Citation num 4--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-four">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-4">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Gaudelli, N.</span>,
<span property="schema:Name">Komor, A.</span>,
@@ -237,7 +263,7 @@ export function Description() {
</li>
{/* <!-- Citation num 5--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-five">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-5">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">OpenEd CUNY. </span>
</span>
@@ -247,7 +273,7 @@ export function Description() {
</li>
{/* <!-- Citation num 6--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-six">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-6">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Sahay, G.</span>,
<span property="schema:Name">Alakhova, D.Y.</span>,
@@ -262,7 +288,7 @@ export function Description() {
</li>
{/* <!-- Citation num 7--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-seven">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-7">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Ramachandran, S.</span>,
<span property="schema:Name">Satapathy, S.R.</span>,
@@ -277,7 +303,7 @@ export function Description() {
</li>
{/* <!-- Citation num 8--> */}
- <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-eight">
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-8">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name">Bandi, S.P.</span>,
<span property="schema:Name">Bhatnagar, S.</span>,
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
index 6ce78b68..b2ae9107 100644
--- a/src/contents/education.tsx
+++ b/src/contents/education.tsx
@@ -1,11 +1,22 @@
+import { useNavigate } from "react-router-dom";
import { ButtonOne} from "../components/Buttons";
export function Education() {
+const navigate = useNavigate();
+const goToTextsAndOpenCollapsible = (collapseId: string) => {
+ navigate(collapseId);
+ };
return (
<>
+ <div>
+ <h2>Interviews Page</h2>
+ <button onClick={() => goToTextsAndOpenCollapsible("/description?collapseId=symptoms-collapsible")}>
+ Go to Texts and Open Collapsible 1
+ </button>
+ </div>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
<div className="col">
<ButtonOne text="Overview" open="overview"></ButtonOne>
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index c5f46e2c..5cfea0a2 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -54,7 +54,8 @@ import { ButtonOne, TabButtonRow, openTab } from "../components/Buttons";
import { BlockQuoteB } from "../components/Quotes";
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
-import React from "react";
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
let timelinebuttonrowdata = [
@@ -270,7 +271,7 @@ let timelinepersontabs =[
<h4>References</h4>
{/*<!-- Citation num 1--> */}
-<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="bielefeld-cebitec/human-practices#desc-1">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Roth, F.</span>;
<span property="schema:Name"> Draguhn, A.</span>
@@ -714,6 +715,26 @@ let timelinepersontabs =[
export function HumanPractices() {
openTab({cityName: "All", cla: "timelinecardtabs"});
+ const location = useLocation();
+ useEffect(() => {
+ // Scroll to the section specified by the collapseId in the URL
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+
+ if (collapseId) {
+ const element = document.getElementById(collapseId);
+ if (element) {
+ const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
+ const offset = window.innerHeight / 2 - element.offsetHeight / 2;
+ const scrollPosition = elementTop - offset;
+
+ window.scrollTo({
+ top: scrollPosition,
+ behavior: 'smooth',
+ });
+ }
+ }
+ }, [location.search]);
return (
<div className="row mt-4">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index 7ddf3b2d..0cfa33eb 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -1,6 +1,27 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
export function Partners() {
+ const location = useLocation();
+ useEffect(() => {
+ // Scroll to the section specified by the collapseId in the URL
+ const params = new URLSearchParams(location.search);
+ const collapseId = params.get('collapseId');
+ if (collapseId) {
+ const element = document.getElementById(collapseId);
+ if (element) {
+ const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
+ const offset = window.innerHeight / 2 - element.offsetHeight / 2;
+ const scrollPosition = elementTop - offset;
+
+ window.scrollTo({
+ top: scrollPosition,
+ behavior: 'smooth',
+ });
+ }
+ }
+ }, [location.search]);
return (
<>
<div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>
--
GitLab