Skip to content

Commit c56cda8

Browse files
HaudinFlorenceHaudinFlorence
committed
Use a dialog to display the LargePortraitCard.
1 parent 7a9f947 commit c56cda8

File tree

9 files changed

+724
-149
lines changed

9 files changed

+724
-149
lines changed

‎package-lock.json‎

Lines changed: 560 additions & 41 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,15 @@
2323
"@coreui/react": "^5.0.0",
2424
"@docusaurus/core": "^3.4.0",
2525
"@docusaurus/preset-classic": "^3.4.0",
26+
"@emotion/react": "^11.13.3",
27+
"@emotion/styled": "^11.13.0",
2628
"@formspree/core": "^3.0.1",
2729
"@formspree/react": "^2.5.1",
2830
"@fortawesome/free-brands-svg-icons": "^6.5.1",
2931
"@fortawesome/free-regular-svg-icons": "^6.5.1",
3032
"@mdx-js/react": "^3.0.0",
33+
"@mui/material": "^6.1.5",
34+
"@mui/styles": "^6.1.5",
3135
"autoprefixer": "^10.4.19",
3236
"canvas": "^2.11.2",
3337
"clsx": "^2.0.0",
@@ -45,8 +49,9 @@
4549
"react-bootstrap": "^2.10.4",
4650
"react-dom": "^18.0.0",
4751
"react-markdown": "^9.0.1",
52+
"react-router": "^5.3.4",
53+
"react-router-dom": "^5.3.4",
4854
"react-slick": "^0.30.2",
49-
"reactjs-popup": "^2.0.6",
5055
"request": "^2.88.2",
5156
"slick-carousel": "^1.8.1"
5257
},

‎src/components/about/SmallPortraitCard.tsx‎

Lines changed: 12 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,22 @@
11
import styles from "./styles.module.css";
2-
import Popup from "reactjs-popup";
3-
import SocialMediaContacts from "./SocialMediaContacts";
4-
import { useRef, useState } from "react";
5-
import LargePortraitCard from "./LargePortraitCard";
2+
import { useHistory } from "react-router";
63
import Avatar from "./Avatar";
4+
import { useState } from "react";
75

8-
const contentStyle = {
9-
background: "white",
10-
borderRadius: "10px",
11-
};
126

13-
const overlayStyle = {
14-
backgroundColor: "var(--ifm-background-color-popup-overlay)",
15-
opacity: "0.4",
16-
width: "100%",
17-
height: "100%",
18-
};
7+
export function SmallPortraitCard ({ person}) {
8+
let [isDialogOpen, setIsDialogOpen] = useState(false);
199

20-
function getCenterOfViewport() {
21-
let horizontalCenter = Math.floor(window.innerWidth / 2);
22-
let verticalCenter = Math.floor(window.innerHeight / 2);
23-
return [horizontalCenter, verticalCenter];
24-
}
10+
const history = useHistory();
2511

26-
function calculateOffsets(elementRef) {
27-
const rect = elementRef.current.getBoundingClientRect();
28-
const [xViewportCenter, yViewportCenter] = getCenterOfViewport();
29-
const [xCardCenter, yCardCenter] = [
30-
rect.left + rect.width / 2,
31-
rect.top + rect.height / 2,
32-
];
33-
const offsets = [
34-
xViewportCenter - xCardCenter,
35-
yViewportCenter - yCardCenter,
36-
];
37-
return offsets;
38-
}
39-
40-
export function SmallPortraitCard({ person, setOffsets }) {
41-
const elementRef = useRef(null);
12+
const openDialog = () => {
13+
history.push("/about/" + person.firstName);
14+
setIsDialogOpen(true);
15+
};
4216

4317
return (
44-
<div
45-
ref={elementRef}
46-
className={"card" + " " + styles.small_portrait_card}
47-
id={person.firstName}
48-
onClick={() => {
49-
setOffsets(calculateOffsets(elementRef));
50-
}}
51-
>
18+
<div onClick={openDialog}>
19+
<div className={"card" + " " + styles.small_portrait_card}>
5220
<div className="card__header">
5321
<Avatar person={person} />
5422
<div
@@ -65,49 +33,8 @@ export function SmallPortraitCard({ person, setOffsets }) {
6533
>
6634
{person.position}
6735
</div>
68-
<div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
69-
<SocialMediaContacts person={person}></SocialMediaContacts>
70-
</div>
7136
</div>
7237
</div>
73-
);
74-
}
75-
export default function PopupPortrait({ person }) {
76-
const [offsets, setOffsets] = useState([0, 0]);
77-
let [isPopupOpen, setIsPopupOpen] = useState(false);
78-
79-
return (
80-
<div>
81-
<Popup
82-
open={isPopupOpen}
83-
closeOnEscape={true}
84-
closeOnDocumentClick={true}
85-
onClose={() => setIsPopupOpen(false)}
86-
trigger={
87-
<div>
88-
<SmallPortraitCard person={person} setOffsets={setOffsets} />
89-
</div>
90-
}
91-
onOpen={() => {
92-
setIsPopupOpen(true);
93-
}}
94-
contentStyle={contentStyle}
95-
overlayStyle={overlayStyle}
96-
position={"center center"}
97-
offsetX={offsets[0]}
98-
offsetY={offsets[1]}
99-
>
100-
<div>
101-
<button
102-
className="close-button"
103-
style={{ position: "absolute", right: "0px" }}
104-
onClick={() => {
105-
setIsPopupOpen(false);
106-
}}
107-
></button>
108-
<LargePortraitCard person={person}></LargePortraitCard>
109-
</div>
110-
</Popup>
11138
</div>
11239
);
113-
}
40+
}

‎src/components/about/SmallPortraitCardWithDialog.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from "react";
2+
import {
3+
BrowserRouter as Router,
4+
Route,
5+
Switch,
6+
useHistory,
7+
} from "react-router-dom";
8+
import { useState } from "react";
9+
import LargePortraitCard from "./LargePortraitCard";
10+
import { SmallPortraitCard } from "./SmallPortraitCard";
11+
12+
const modalOverlay = {
13+
position: "fixed",
14+
top: "0",
15+
left: "0",
16+
right: "0",
17+
bottom: "0",
18+
backgroundColor: "rgba(0, 0, 0, 0.3)",
19+
zIndex: 1000
20+
};
21+
const modalContent = {
22+
position: "fixed",
23+
top: "50%",
24+
left: "50%",
25+
transform: "translate(-50%, -50%)",
26+
padding: "20px",
27+
backgroundColor: "var(--ifm-color-primary-p0)",
28+
border: "1px solid #ccc",
29+
boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
30+
borderRadius: "10px",
31+
zIndex: "4000"
32+
};
33+
34+
export default function PortraitCardsAnchorAndDialog({ person }) {
35+
const history = useHistory();
36+
let [isDialogOpen, setIsDialogOpen] = useState(true);
37+
return (
38+
<Router>
39+
<div>
40+
<SmallPortraitCard person={person} />
41+
<Switch>
42+
<Route
43+
path={"/about/" + person.firstName}
44+
render={() => (
45+
<>
46+
<div style={modalOverlay}>
47+
<div style={modalContent}>
48+
<button
49+
className="close-button"
50+
style={{
51+
position: "absolute",
52+
top: "10px",
53+
right: "10px",
54+
}}
55+
onClick={() => {
56+
history.goBack();
57+
setIsDialogOpen(false);
58+
}}
59+
/>
60+
<LargePortraitCard person={person} />
61+
</div>
62+
</div>
63+
</>
64+
)}
65+
/>
66+
</Switch>
67+
</div>
68+
</Router>
69+
);
70+
}

‎src/components/about/SubTeam.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import styles from "./styles.module.css";
2-
import PopupPortrait from "./SmallPortraitCard";
2+
import SmallPortraitCardWithDialog from "./SmallPortraitCardWithDialog";
33

4-
export default function SubTeam({
5-
subTeamName,
6-
subTeam
7-
}) {
4+
export default function SubTeam({ subTeamName, subTeam }) {
85
return (
96
<div className={styles.subteam_container}>
107
<h2 className={"text--center"}> {subTeamName}</h2>
@@ -13,9 +10,7 @@ export default function SubTeam({
1310
{subTeam.map((person, index) => (
1411
<li className="cards-list" key={index}>
1512
<div className="col">
16-
<PopupPortrait
17-
person={person}
18-
/>
13+
<SmallPortraitCardWithDialog person={person} />
1914
</div>
2015
</li>
2116
))}

‎src/components/about/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import styles from "./styles.module.css";
2-
import { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
2+
import { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
33
import FourValues from "./FourValues";
44
import SubTeam from "./SubTeam";
55
import LinkToContact from "../home/LinkToContact";
6-
6+
import { BrowserRouter as Router } from "react-router-dom";
7+
import Appli from "./Test"; // Your main App component
8+
79
export function About() {
810
return (
9-
<div >
11+
<div>
1012
<div className="main-container-with-margins">
1113
<div className="container upper-container-with-margin-top">
1214
<div className={"row"}>
1315
<div className={"col flex-full-centered"}>
1416
<FourValues />
1517
</div>
1618
</div>
19+
1720

1821
<div className="row">
1922
<div className="col col--10 col--offset-1">
@@ -24,16 +27,14 @@ export function About() {
2427
</div>
2528
</div>
2629
</div>
30+
2731
<div className="row">
2832
<div className="col">
2933
<SubTeam
3034
subTeamName={"The leadership team"}
3135
subTeam={leadershipTeam}
3236
/>
33-
<SubTeam
34-
subTeamName={"The core team"}
35-
subTeam={coreTeam}
36-
/>
37+
<SubTeam subTeamName={"The core team"} subTeam={coreTeam} />
3738
<SubTeam
3839
subTeamName={"QuantStack collaborators"}
3940
subTeam={QSCollaboratorsTeam}

‎src/components/about/styles.module.css‎

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
12
.small_portrait_card {
23
width: 279px;
3-
height: 400px;
4+
height: 320px;
45
background-color: white;
56
color: var(--ifm-color-primary-p2);
67
border-radius: 8px;
@@ -11,11 +12,10 @@
1112

1213
.small_portrait_card:hover {
1314
border: solid 1px gray;
14-
cursor: pointer;
15-
text-decoration: #0000EE underline;
15+
cursor: pointer;
16+
text-decoration: #0000ee underline;
1617
}
1718

18-
1919
.value_text p {
2020
font-family: var(--ifm-font-family-roboto);
2121
font-size: 14px;
@@ -51,7 +51,7 @@ div .row {
5151
line-height: 24px;
5252
letter-spacing: 0.15px;
5353
margin: var(--ifm-spacing-xs) 0;
54-
width: 100%
54+
width: 100%;
5555
}
5656

5757
.small_card_position {
@@ -135,6 +135,39 @@ div .join_the_team_text {
135135
padding-right: 5px;
136136
}
137137

138+
.card {
139+
border: 1px solid #ccc;
140+
padding: 16px;
141+
margin: 16px;
142+
cursor: pointer;
143+
border-radius: 8px;
144+
transition: box-shadow 0.2s;
145+
}
146+
147+
.small_portrait_card:hover {
148+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
149+
}
150+
151+
.overlay {
152+
position: fixed;
153+
top: 0;
154+
left: 0;
155+
right: 0;
156+
bottom: 0;
157+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
158+
display: flex;
159+
justify-content: center;
160+
align-items: center;
161+
z-index: 1000; /* Ensure it's above other content */
162+
}
163+
164+
.popup {
165+
background: white;
166+
padding: 20px;
167+
border-radius: 8px;
168+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
169+
}
170+
138171
@media only screen and (max-width: 996px) {
139172
/*Mobile*/
140173
.value_card {
@@ -167,6 +200,19 @@ div .join_the_team_text {
167200
width: 100%;
168201
height: 100%;
169202
padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
203+
204+
}
205+
.modal_with_large_portrait_card {
206+
position: fixed;
207+
top: 50%;
208+
left: 50%;
209+
transform: translate(-50%, -50%);
210+
padding: 20px;
211+
background-color: var(--ifm-color-primary-p0);
212+
border: 1px solid #ccc;
213+
z-index: 1000;
214+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
215+
border-radius: 10px;
170216
}
171217

172218
.subteam_container {

‎src/pages/about/Sylvain.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import LargePortraitCard from "@site/src/components/about/LargePortraitCard";
2+
import { leadershipTeam } from "@site/src/components/about/Team/team";
3+
//import PortraitDialog from "@site/src/components/about/PortraitDialog";
4+
5+
export default function SylvainComponent() {
6+
/*leadershipTeam.forEach((person) => {
7+
if (person.firstName === "Sylvain")
8+
console.log('Found')
9+
return <LargePortraitCard person={person} />;
10+
});*/
11+
<div> This is great</div>
12+
}

0 commit comments

Comments
 (0)