From 0a39cab28019d17da25d0354833095538189268f Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 23 Aug 2024 20:48:11 +0200
Subject: [PATCH] put the use effects on every page and updates collapsibles
---
src/{contents => components}/Graph.tsx | 0
src/{contents => components}/code.tsx | 0
src/contents/Bfh.tsx | 32 +++++++++-
src/contents/Home.tsx | 30 ++++++++++
src/contents/collaborations.tsx | 32 ++++++++++
src/contents/contribution.tsx | 31 ++++++++++
src/contents/description.tsx | 45 ++++++++------
src/contents/design.tsx | 33 ++++++++++-
src/contents/drylab.tsx | 31 +++++++++-
src/contents/education.tsx | 31 +++++++++-
src/contents/engineering.tsx | 31 +++++++++-
src/contents/ethics.tsx | 32 +++++++++-
src/contents/experiments.tsx | 33 ++++++++++-
src/contents/human-practices.tsx | 2 +-
src/contents/impressum.tsx | 33 ++++++++++-
src/contents/interviews.tsx | 31 +++++++++-
src/contents/judging.tsx | 31 +++++++++-
src/contents/measurement.tsx | 31 +++++++++-
src/contents/notebook.tsx | 33 ++++++++++-
src/contents/partners.tsx | 54 ++++++++---------
src/contents/parts.tsx | 31 +++++++++-
src/contents/proof.tsx | 31 ++++++++++
src/contents/results.tsx | 31 +++++++++-
src/contents/safety.tsx | 31 ++++++++++
src/contents/supplementary-material.tsx | 31 +++++++++-
src/contents/survey.tsx | 31 ++++++++++
src/contents/team.tsx | 33 ++++++++++-
src/contents/wiki.tsx | 79 +++++++++++++++++--------
28 files changed, 781 insertions(+), 93 deletions(-)
rename src/{contents => components}/Graph.tsx (100%)
rename src/{contents => components}/code.tsx (100%)
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 5c781313..bb8ff456 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 5c046649..db3d50f1 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 180e38a5..4f0e2aaf 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 0a5f9f37..530e90e8 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 d91d6d11..1f298eeb 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 f7c33c9a..6e4c3607 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 6b496ec0..2a4a4310 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 e3278bc3..a0ee81f2 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 c9193c42..9a0b1276 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 79a0f66a..cadb0b50 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 ed3c6ca8..3c28d4f1 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 d557833f..9b28b4a6 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 ba790cc6..3db4618f 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 c9902efb..416cd9f5 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 29b0a134..0007ca25 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 4d49333c..82700df2 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 24ffd65c..ebddc5b6 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 104d7d43..2c9b56a3 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 8e7a1463..7db44379 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 2d08103a..2f6b4ddb 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 95a08069..97a9d7ac 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 7b5abf97..43322cfe 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 4fb8e9bd..cc461197 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 f57d669f..315775e2 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 f9f4a505..c9281eed 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 f6f52412..3eea3be9 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">
--
GitLab