diff --git a/src/contents/Graph.tsx b/src/components/Graph.tsx
similarity index 100%
rename from src/contents/Graph.tsx
rename to src/components/Graph.tsx
diff --git a/src/contents/code.tsx b/src/components/code.tsx
similarity index 100%
rename from src/contents/code.tsx
rename to src/components/code.tsx
diff --git a/src/contents/Bfh.tsx b/src/contents/Bfh.tsx
index 5c7813137945353e7c3edc15b66db5c7d0597108..bb8ff4562acc5adbc6ef3ef4c0f16a4ea9f2e067 100644
--- a/src/contents/Bfh.tsx
+++ b/src/contents/Bfh.tsx
@@ -3,6 +3,9 @@ import BFHGallery from "../components/photo-grid";
import BFHpdf, { GuidePDF } from "../components/pdfs";
import { H2} from "../components/headings";
import { BFHStyleTabs } from "../components/Tabs";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+import { openFromOtherPage } from "../components/Buttons";
let tabbys = [
{
node: <BFHpdf></BFHpdf>,
@@ -37,7 +40,34 @@ let tabbys = [
]
export function Bfh() {
-
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="" /* style={{ paddingTop: "5vw"}} */>
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 5c04664996607d42ed9240d6578654fdf9a7a521..db3d50f1dc0a898c46c1a6e5bb13826a471a14da 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,6 +1,36 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Home() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/collaborations.tsx b/src/contents/collaborations.tsx
index 180e38a5f2fac4c73da4eee3bcda3d5730360431..4f0e2aaf4fd88a32c80e498a15e8932b3ea2ed24 100644
--- a/src/contents/collaborations.tsx
+++ b/src/contents/collaborations.tsx
@@ -1,4 +1,36 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
+
export function Collaborations() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx
index 0a5f9f3771030b18a9511ca26a2c948e2825e931..530e90e899cf8a29749c1f8b8ae041236373bc22 100644
--- a/src/contents/contribution.tsx
+++ b/src/contents/contribution.tsx
@@ -1,4 +1,35 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Contribution() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index d91d6d11f45b2db7b3411441bab8dcc27269120f..1f298eeb811629f8ff389fe0b27d136cd1773951 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -9,30 +9,39 @@ import { Circle } from "../components/Shapes";
import { Complex } from "../components/svgs";
import { ButtonRowTabs } from "../components/Tabs";
import { useEffect } from "react";
+import { openFromOtherPage } from "../components/Buttons";
/* 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]);
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]);
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/design.tsx b/src/contents/design.tsx
index f7c33c9abc399be9ebc286f394e488e98f16af7c..6e4c3607673c3e7474a83421b73851b500335d92 100644
--- a/src/contents/design.tsx
+++ b/src/contents/design.tsx
@@ -1,7 +1,36 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Design() {
-
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/drylab.tsx b/src/contents/drylab.tsx
index 6b496ec0297723427f26e9cb2eb16b5cbfb5b663..2a4a431084cac7d0196866cd0b9c50219f02e692 100644
--- a/src/contents/drylab.tsx
+++ b/src/contents/drylab.tsx
@@ -1,6 +1,35 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Drylab() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/education.tsx b/src/contents/education.tsx
index e3278bc356e8e8782ffb34a117dfc0e085fbbd85..a0ee81f2e73d0ddd7d7058cc4a083cf5de1b14e2 100644
--- a/src/contents/education.tsx
+++ b/src/contents/education.tsx
@@ -1,10 +1,39 @@
import { ButtonOne} from "../components/Buttons";
import { goToPagesAndOpenTab, goToTextsAndOpenCollapsible } from "../components/goto";
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Education() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div>
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index c9193c4200e6a5a92d0e327f14549e1f5ced6552..9a0b127657c52db01d1164cbb9b8cb29407710ab 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,10 +1,39 @@
import { openIt } from "../components/Buttons";
import { LoremShort } from "../components/loremipsum";
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Engineering() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/ethics.tsx b/src/contents/ethics.tsx
index 79a0f66a5d8eae4aac978e84f9a745b459bf8797..cadb0b50631e6df26176487fc92271016008c150 100644
--- a/src/contents/ethics.tsx
+++ b/src/contents/ethics.tsx
@@ -1,6 +1,36 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Ethics() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index ed3c6ca8a536f33051d4687a240c218f0aef6f4b..3c28d4f171db5aa8d2b8b238bb557e120ad395a5 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -1,7 +1,36 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Experiments() {
-
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index d557833f41b7893d6df3cc336beaec1d5182f80d..9b28b4a6bf454089ed1b6336a39e1345d5120a9c 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -735,7 +735,7 @@ export function HumanPractices() {
}
}
}, [location.search]);
- useEffect(() => {
+ useEffect(() => {
const params = new URLSearchParams(location.search);
const tabId = params.get('tab');
diff --git a/src/contents/impressum.tsx b/src/contents/impressum.tsx
index ba790cc6c3f594151d44dc7dc36bb7cb4cde98e1..3db4618f1efb1ebcdf7f220726ce27d83cf76774 100644
--- a/src/contents/impressum.tsx
+++ b/src/contents/impressum.tsx
@@ -1,7 +1,36 @@
-//import { Inspirations, InspirationLink } from "../components";
-/* import { Sidebar } from "react-pro-sidebar"; */
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Impressum() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/interviews.tsx b/src/contents/interviews.tsx
index c9902efb76c70d9b7d7f3fc36ab840473ab38660..416cd9f5b5c9d105df86b6fd122117ddb72ab64a 100644
--- a/src/contents/interviews.tsx
+++ b/src/contents/interviews.tsx
@@ -1,8 +1,37 @@
import { ButtonOne } from "../components/Buttons";
import { QaBox, SpecialQaBox } from "../components/Boxes";
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Ints() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<br/>
diff --git a/src/contents/judging.tsx b/src/contents/judging.tsx
index 29b0a134c4b8825af12636239ecae1a38e69541d..0007ca251324c97a39d1ef1d8b1982ebcd79dd96 100644
--- a/src/contents/judging.tsx
+++ b/src/contents/judging.tsx
@@ -1,6 +1,35 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Judging() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/measurement.tsx b/src/contents/measurement.tsx
index 4d49333c6c3d2a365dd8b80215bf829e10e24e28..82700df223fda6563c4d1ae78cdc58179aaf37b6 100644
--- a/src/contents/measurement.tsx
+++ b/src/contents/measurement.tsx
@@ -1,6 +1,35 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Measurement() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index 24ffd65cb4ae79a53a17d61fef49b968e5239ede..ebddc5b681690436f38cbb529b148ae1f0e01150 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -1,7 +1,36 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Notebook() {
-
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index 104d7d432fa2ef1bd569a9769bbb2ca57a05a7f0..2c9b56a358ac2811de93ccb11899f22ecdb569c8 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -3,36 +3,34 @@ import { useLocation } from "react-router-dom";
import { openFromOtherPage } from "../components/Buttons";
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]);
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]);
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const tabId = params.get('tab');
-
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>
diff --git a/src/contents/parts.tsx b/src/contents/parts.tsx
index 8e7a1463baf39a5413f413fe6c6f2937335d7a8f..7db443794a64888515c333b434f295431a4d63f0 100644
--- a/src/contents/parts.tsx
+++ b/src/contents/parts.tsx
@@ -1,6 +1,35 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Parts() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/proof.tsx b/src/contents/proof.tsx
index 2d08103a35deb38a386088269e57164f6d284d63..2f6b4ddb920d9cacdee1ddcd177baffcfc5aed0f 100644
--- a/src/contents/proof.tsx
+++ b/src/contents/proof.tsx
@@ -1,4 +1,35 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Proof() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<section id="prelim-2000">
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index 95a0806977d56fe55d98f58109ffd603081088e7..97a9d7ac898faee00802b2f750af372de29cc374 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -1,7 +1,36 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Results() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 7b5abf97e527660e92629fd21cd674447b72fd4f..43322cfee51040d257079f929873ff1064241115 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -1,4 +1,35 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Safety() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/supplementary-material.tsx b/src/contents/supplementary-material.tsx
index 4fb8e9bdc3c576d36ee517bb2ae00cbe5d587b7f..cc461197d25147a289d2a29a6431a408b6c572cb 100644
--- a/src/contents/supplementary-material.tsx
+++ b/src/contents/supplementary-material.tsx
@@ -1,6 +1,35 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Supplementary() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
diff --git a/src/contents/survey.tsx b/src/contents/survey.tsx
index f57d669f843131c1b5e68be45758aa8b7e75bd8d..315775e2db65d7f6ba3592323950ae9272d96e80 100644
--- a/src/contents/survey.tsx
+++ b/src/contents/survey.tsx
@@ -1,4 +1,35 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Survey() {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row mt-4">
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index f9f4a505472ec246cf9831c2fabf3a1dac37f0d9..c9281eede9a055fd25fe7ca70700588b17c18d1e 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -1,7 +1,36 @@
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
export function Team() {
-
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index f6f524127c9bf9b0ade00f7613e75a7babd3587a..3eea3be9b7f7a47f2223e73fa447dae9d367ab29 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/wiki.tsx
@@ -1,10 +1,39 @@
import { Box, Tab } from "@mui/material";
import {TabContext, TabList, TabPanel} from '@mui/lab';
-import React from "react";
import Collapsible from "../components/Collapsible";
-
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { openFromOtherPage } from "../components/Buttons";
+import React from "react";
export function Wiki () {
+ 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]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const tabId = params.get('tab');
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
return (
<>
<div className="row">
@@ -112,7 +141,7 @@ function Started(){
function Sources(){
return(
<div>
- <Collapsible title="Images and Icons" >
+ <Collapsible id="wiki-icons" title="Images and Icons" >
Most teams need a lot of pictures, components, icons and alike. They can be difficult to find, especially free and open source ones.
<ul>
@@ -128,13 +157,13 @@ function Started(){
</ul>
</Collapsible>
- <Collapsible title="Colours" >
- Need a slightly lighter version of one of your colours or a mix of two colours?
+ <Collapsible id="wiki-colors" title="Colours" >
+ Need a slightly lighter version of one of your colors or a mix of two colours?
<ul>
<li><a href="https://www.w3schools.com/colors/colors_mixer.asp"> https://www.w3schools.com/colors/colors_mixer.asp</a></li>
</ul>
</Collapsible>
- <Collapsible title="Coding Tools">
+ <Collapsible id="wiki-tools" title="Coding Tools">
Generators
<ul>
<li><a href="https://www.cssportal.com/">https://www.cssportal.com/</a></li>
@@ -142,19 +171,19 @@ function Started(){
</ul>
</Collapsible>
- <Collapsible title="Placeholders">
+ <Collapsible id="wiki-placeholder" title="Placeholders">
<ul>
<li><a href="https://www.loremipsum.de/">https://www.loremipsum.de/</a></li>
</ul>
</Collapsible>
- <Collapsible title="SVGs">
+ <Collapsible id="wiki-svgs" title="SVGs">
<ul>
<li><a href="https://superdesigner.co/tools/svg-backgrounds">https://superdesigner.co/tools/svg-backgrounds</a></li>
</ul>
</Collapsible>
- <Collapsible title="Accessibility">
+ <Collapsible id="wiki-accessibility" title="Accessibility">
<ul>
<li><a href="https://schema.org">https://schema.org</a></li>
</ul>
@@ -167,7 +196,7 @@ function Started(){
import { WikiSelector } from "../components/Filter";
-import { Code } from "./code";
+import { Code } from "../components/code";
function Troubleshooting(){
return(
@@ -178,20 +207,20 @@ function Troubleshooting(){
This combination returns no instances.
</div>
<div className="filterable all react type property">
- <Collapsible title="Argument of type X is not assignable to parameter of type Y. ">
+ <Collapsible id="wiki-trouble-1" title="Argument of type X is not assignable to parameter of type Y. ">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react type">
- <Collapsible title="Type X is not assignable to type Y.">
+ <Collapsible id="wiki-trouble-2" title="Type X is not assignable to type Y.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all css">
- <Collapsible title="I added css styles but they do not show">
+ <Collapsible id="wiki-trouble-3" title="I added css styles but they do not show">
<h6>Example</h6>
<p>The color is not showing on hover.</p>
<Code>.nav-link:hover {
@@ -212,7 +241,7 @@ function Troubleshooting(){
</Collapsible>
</div>
<div className="filterable all react type property">
- <Collapsible title="Property x is missing in type y but required in type z.">
+ <Collapsible id="wiki-trouble-4" title="Property x is missing in type y but required in type z.">
<h6>Example</h6>
<p className="problem-error"> Argument of type '{ [x: string]: any; }' is not assignable to parameter of type '{ classNames: string[]; }'.
Property 'classNames' is missing in type '{ [x: string]: any; }' but required in type '{ classNames: string[]; }'.</p>
@@ -225,13 +254,13 @@ function Troubleshooting(){
</Collapsible>
</div>
<div className="filterable all react type property">
- <Collapsible title="Property x does not exist on type Y.">
+ <Collapsible id="wiki-trouble-5" title="Property x does not exist on type Y.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react type property">
- <Collapsible title="Type X is missing the following properties from type Y: a, b, c">
+ <Collapsible id="wiki-trouble-6" title="Type X is missing the following properties from type Y: a, b, c">
<h6>Example</h6>
<p className="problem-error">
Type '{ date: string; text: string; }' is missing the following properties from type 'TextEventProps': marker, card
@@ -270,13 +299,13 @@ function Troubleshooting(){
</Collapsible>
</div>
<div className="filterable all react type">
- <Collapsible title="Type 'x | undefined' is not assignable to type 'x'.">
+ <Collapsible id="wiki-trouble-7" title="Type 'x | undefined' is not assignable to type 'x'.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all pipeline">
- <Collapsible title="The pipeline passed but the Wiki is not visible under the url">
+ <Collapsible id="wiki-trouble-8" title="The pipeline passed but the Wiki is not visible under the url">
<p>This error could be a result of a wrong base url in the vite.config.js file.</p>
<p>E.g. if you switched from plain HTML to the react framework. </p>
<h6>Example</h6>
@@ -295,7 +324,7 @@ function Troubleshooting(){
</Collapsible>
</div>
<div className="filterable all console">
- <Collapsible title="NS_ERROR_CORRUPTED_CONTENT error in console">
+ <Collapsible id="wiki-trouble-9" title="NS_ERROR_CORRUPTED_CONTENT error in console">
<p> → See also "The pipeline passed but the Wiki is not visible under the url" as these errors can be connected.</p>
<p> This error for css and js files can be the result of wrong <b>rollupOptions</b> in for the build, to be specific wrong <b>output</b> and <b>assetFileNames</b> options and possibly wrong/empty <b>css</b> options in your vite.config.js. </p>
<h6>Example</h6>
@@ -319,31 +348,31 @@ function Troubleshooting(){
</Collapsible>
</div>
<div className="filterable all console">
- <Collapsible title="Blocked due to MIME type (“text/htmlâ€) mismatch (X-Content-Type-Options: nosniff) (Firefox)">
+ <Collapsible id="wiki-trouble-10" title="Blocked due to MIME type (“text/htmlâ€) mismatch (X-Content-Type-Options: nosniff) (Firefox)">
<p> → See also "Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)"</p>
<p>This error could </p>
</Collapsible>
</div>
<div className="filterable all console">
- <Collapsible title="Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)">
+ <Collapsible id="wiki-trouble-11" title="Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)">
<p> → See also "Blocked due to MIME type (“text/htmlâ€) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p>
<p>This error could </p>
</Collapsible>
</div>
<div className="filterable all react type">
- <Collapsible title="Type 'undefined' cannot be used as an index type">
+ <Collapsible id="wiki-trouble-12" title="Type 'undefined' cannot be used as an index type">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react overload">
- <Collapsible title="No overload matches this call.">
+ <Collapsible id="wiki-trouble-13" title="No overload matches this call.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react module">
- <Collapsible title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
+ <Collapsible id="wiki-trouble-14" title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
<h6>Example</h6>
index.tsx:
<p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
@@ -352,7 +381,7 @@ function Troubleshooting(){
</Collapsible>
</div>
<div className="filterable all pipeline">
- <Collapsible title="error TS6133: 'event' is declared but its value is never read.">
+ <Collapsible id="wiki-trouble-15" title="error TS6133: 'event' is declared but its value is never read.">
<h6>Example</h6>
HorizontalTimeline.tsx:
<div className="terminal-box">