Skip to content

Commit e236361

Browse files
HaudinFlorenceHaudinFlorence
committed
Add logics to render one single person page with the popup opened.
1 parent c3f18c7 commit e236361

31 files changed

+301
-49
lines changed

Diff for: ‎src/components/about/LargePortraitCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Avatar from "./Avatar";
88
export function Distinction({ person }) {
99
if (person.distinctionTitle.length !== 0) {
1010
return person.distinctionTitle.map((distinction, index) => (
11-
<div>
11+
<div key={index}>
1212
<Link href={person.distinctionLink[index]}>
1313
<DistinctionIcon className={styles.distinction_icon} />
1414
{distinction}

Diff for: ‎src/components/about/SmallPortraitCard.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,24 @@ import SocialMediaContacts from "./SocialMediaContacts";
44
import { useRef, useState } from "react";
55
import LargePortraitCard from "./LargePortraitCard";
66
import Avatar from "./Avatar";
7-
import Link from "@docusaurus/Link";
87

98
const contentStyle = {
109
background: "white",
1110
borderRadius: "10px",
11+
opacity: 1.0
1212
};
1313

1414
const overlayStyle = {
1515
backgroundColor: "var(--ifm-background-color-popup-overlay)",
16-
opacity: "0.4",
16+
opacity: 0.4,
1717
width: "100%",
1818
height: "100%",
1919
};
2020

2121
function getCenterOfViewport() {
2222
let horizontalCenter = Math.floor(window.innerWidth / 2);
2323
let verticalCenter = Math.floor(window.innerHeight / 2);
24+
console.log("Center of viewport:", [horizontalCenter, verticalCenter]);
2425
return [horizontalCenter, verticalCenter];
2526
}
2627

@@ -35,6 +36,7 @@ function calculateOffsets(elementRef) {
3536
xViewportCenter - xCardCenter,
3637
yViewportCenter - yCardCenter,
3738
];
39+
console.log("Offsets are:", offsets);
3840
return offsets;
3941
}
4042

@@ -73,23 +75,21 @@ export function SmallPortraitCard({ person, setOffsets }) {
7375
</div>
7476
);
7577
}
76-
export default function PopupPortrait({ person }) {
78+
export default function PopupPortrait({ person, ...props }) {
7779
const [offsets, setOffsets] = useState([0, 0]);
78-
let [isPopupOpen, setIsPopupOpen] = useState(false);
79-
80+
let [isPopupOpen, setIsPopupOpen] = useState(props.isPopupOpen);
8081
return (
8182
<div>
83+
<div>
84+
<SmallPortraitCard person={person} setOffsets={setOffsets} />
85+
</div>
8286
<Popup
8387
open={isPopupOpen}
8488
closeOnEscape={true}
8589
closeOnDocumentClick={true}
8690
onClose={() => setIsPopupOpen(false)}
87-
trigger={
88-
<div>
89-
<SmallPortraitCard person={person} setOffsets={setOffsets} />
90-
</div>
91-
}
9291
onOpen={() => {
92+
props.isPopupOpen = true;
9393
setIsPopupOpen(true);
9494
}}
9595
contentStyle={contentStyle}

Diff for: ‎src/components/about/SocialMediaContacts.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ export default function SocialMediaContacts({ person }) {
88
return (
99
<>
1010
<div className="flex-full-centered">
11-
<Link href={person.githubLink}>{<GHPicture />}</Link>
11+
{/* <Link href={person.githubLink}>{<GHPicture />}</Link>
1212
<Link href={person.LinkedInLink}>{<LinkedInPicture />}</Link>
13-
<Link href={person.XLink}>{<XPicture />}</Link>
13+
<Link href={person.XLink}>{<XPicture />}</Link> */}
1414
</div>
1515
<div className="flex-full-centered">
16-
<Link href={person.githubLink} className={styles.githubname}>
16+
{/* <Link href={person.githubLink} className={styles.githubname}>
1717
{person.githubName}
18-
</Link>
18+
</Link> */}
1919
</div>
2020
</>
2121
);

Diff for: ‎src/components/about/SubTeam.tsx

+19-13
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,31 @@ import styles from "./styles.module.css";
22
import PopupPortrait from "./SmallPortraitCard";
33
import Link from "@docusaurus/Link";
44
import { useLocation } from "@docusaurus/router";
5-
import { IProps } from ".";
6-
7-
export default function SubTeam({ subTeamName, subTeam}) {
8-
const location = useLocation().pathname;
95

6+
export default function SubTeam({ subTeamName, subTeam }) {
7+
const firstName = useLocation().pathname.split("/about/")[1];
108
return (
119
<div className={styles.subteam_container}>
1210
<h2 className={"text--center"}> {subTeamName}</h2>
1311
<div className={"container"}>
1412
<ul className="row padding-none flex-full-centered row-with-margin-top">
15-
{subTeam.map((person, index) => (
16-
<li className="cards-list" key={index}>
17-
<div className="col">
18-
<Link href={location + person.firstName}>
19-
<PopupPortrait person={person}/>
20-
</Link>
21-
</div>
22-
</li>
23-
))}
13+
{subTeam.map(
14+
(person, index) =>
15+
!void 0 && (
16+
<li className="cards-list" key={index}>
17+
<div className="col">
18+
<Link href={`/about/${person.firstName.toLowerCase()}`}>
19+
<PopupPortrait
20+
person={person}
21+
isPopupOpen={
22+
firstName === person.firstName.toLowerCase()
23+
}
24+
/>
25+
</Link>
26+
</div>
27+
</li>
28+
)
29+
)}
2430
</ul>
2531
</div>
2632
</div>

Diff for: ‎src/pages/about/Sylvain/index.tsx

-17
This file was deleted.

Diff for: ‎src/pages/about/Johan/index.tsx renamed to ‎src/pages/about/alexis.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import Layout from "@theme/Layout";
2-
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
32
import { About } from "@site/src/components/about";
43
import BrowserOnly from "@docusaurus/BrowserOnly";
54

65
export default function AboutPage(): JSX.Element {
7-
const { siteConfig } = useDocusaurusContext();
86
return (
97
<Layout>
108
<BrowserOnly>{() => <About/>}</BrowserOnly>

Diff for: ‎src/pages/about/anastasiia.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/andreas.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/anutosh.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/darian.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/david.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/denisa.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/florence.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/gabriela.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/greg.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/hind.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/ian.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import Layout from "@theme/Layout";
2-
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
32
import { About } from "@site/src/components/about";
43
import BrowserOnly from "@docusaurus/BrowserOnly";
54

65
export default function AboutPage(): JSX.Element {
7-
const { siteConfig } = useDocusaurusContext();
86
return (
97
<Layout>
108
<BrowserOnly>{() => <About/>}</BrowserOnly>

Diff for: ‎src/pages/about/isabel.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/jeremy.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/joel.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/johan.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/julien.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/kerim.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

Diff for: ‎src/pages/about/martin.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from "@theme/Layout";
2+
import { About } from "@site/src/components/about";
3+
import BrowserOnly from "@docusaurus/BrowserOnly";
4+
5+
export default function AboutPage(): JSX.Element {
6+
return (
7+
<Layout>
8+
<BrowserOnly>{() => <About/>}</BrowserOnly>
9+
</Layout>
10+
);
11+
}

0 commit comments

Comments
 (0)