Skip to content

Commit 03c698e

Browse files
HaudinFlorenceSylvainCorlay
HaudinFlorence
authored and
SylvainCorlay
committed
Start to work on the PortraitPopup components to be able to place them centered on the center of the screen.
Fix styling issues.
1 parent a2b9fdc commit 03c698e

27 files changed

+315
-252
lines changed

‎.docusaurus/client-manifest.json

Lines changed: 129 additions & 129 deletions
Large diffs are not rendered by default.

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ _site/
33
.ipynb_checkpoints/
44
node_modules/
55
build/
6+
.docusaurus

‎src/components/about/FourValues.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function FourValuesMobile() {
7878
<div className={styles.four_values_container}>
7979
<ul className={"row" + " " + "flex-full-centered" + " " + "padding-none"}>
8080
{valuesNames.map((value, index) => (
81-
<li className="cards_list" key={index}>
81+
<li className="cards-list" key={index}>
8282
<div className="col">
8383
<ValueCardMobile
8484
value={value}
@@ -106,7 +106,7 @@ export function FourValuesDesktop() {
106106
className={"row" + " " + "padding-none" + " " + styles.row_with_margins}
107107
>
108108
{valuesNames.map((value, index) => (
109-
<li className="cards_list" key={index}>
109+
<li className="cards-list" key={index}>
110110
<div className="col">
111111
<div className={styles.value_card_container}>
112112
<ValueCardDesktop

‎src/components/about/LargePortraitCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function Distinction({ person }) {
88
return (
99
<ul>
1010
{person.distinctionTitle.map((distinction, index) => (
11-
<li className="cards_list" key={index}>
11+
<li className="cards-list" key={index}>
1212
<div>
1313
<div>
1414
<Link href={person.distinctionLink[index]}>

‎src/components/about/PortraitPopup.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import SmallPortraitCard from "./SmallPortraitCard";
2+
import Popup from "reactjs-popup";
3+
import LargePortraitCard from "./LargePortraitCard";
4+
import styles from "./styles.module.css";
5+
6+
export default function PopupPortrait({
7+
person,
8+
subTeamAvatarsUrl,
9+
subTeamBioComponent,
10+
}) {
11+
return (
12+
<div>
13+
<Popup
14+
style={{ backgroundColor: "#yellow" }}
15+
trigger={
16+
<div>
17+
<SmallPortraitCard person={person} avatarUrl={subTeamAvatarsUrl} />
18+
</div>
19+
}
20+
overlayStyle={{
21+
backgroundColor: "var(--ifm-background-color-popup-overlay)",
22+
opacity: "0.4",
23+
width: "100%",
24+
height: "100%",
25+
}}
26+
>
27+
<LargePortraitCard
28+
person={person}
29+
avatarUrl={subTeamAvatarsUrl}
30+
BioComponent={subTeamBioComponent}
31+
></LargePortraitCard>
32+
</Popup>
33+
</div>
34+
);
35+
}

‎src/components/about/SmallPortraitCard.tsx

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,37 @@
11
import styles from "./styles.module.css";
22
import SocialMediaContacts from "./SocialMediaContacts";
3+
import { useEffect, useRef } from "react";
4+
5+
function getCenterOfViewport() {
6+
let horizontalCenter = Math.floor(window.innerWidth / 2);
7+
let verticalCenter = Math.floor(window.innerHeight / 2);
8+
return [horizontalCenter, verticalCenter];
9+
}
310

411
export default function SmallPortraitCard({ person, avatarUrl }) {
12+
const elementRef = useRef(null);
13+
14+
// Later in your component, you can access getBoundingClientRect
15+
16+
useEffect(() => {
17+
if (elementRef.current) {
18+
const rect = elementRef.current.getBoundingClientRect();
19+
}
20+
}, []);
21+
522
return (
6-
<div className={styles.small_portrait_card}>
23+
<div
24+
ref={elementRef}
25+
className={styles.small_portrait_card}
26+
id={person.firstName}
27+
onClick={()=> {
28+
const rect = elementRef.current.getBoundingClientRect();
29+
console.log('rect is:', rect)
30+
}}
31+
>
732
<div className="flex-full-centered">
833
<div className={styles.avatar}>
9-
<img src={avatarUrl} width={"160px"} height={"160px"}/>
34+
<img src={avatarUrl} width={"160px"} height={"160px"} />
1035
</div>
1136
</div>
1237
<div className={styles.small_card_complete_name}>

‎src/components/about/SubTeam.tsx

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import styles from "./styles.module.css";
22
import SmallPortraitCard from "./SmallPortraitCard";
3-
import Popup from "reactjs-popup";
4-
import LargePortraitCard from "./LargePortraitCard";
53
import Link from "@docusaurus/Link";
4+
import PopupPortrait from "./PortraitPopup";
65

76
export function SubTeamDesktop({
87
description,
@@ -20,32 +19,9 @@ export function SubTeamDesktop({
2019
}
2120
>
2221
{subTeam.map((person, index) => (
23-
<li className="cards_list" key={index}>
22+
<li className="cards-list" key={index}>
2423
<div className="col">
25-
<Popup
26-
trigger={
27-
<div>
28-
<SmallPortraitCard
29-
person={person}
30-
avatarUrl={subTeamAvatarsUrls[index]}
31-
/>
32-
</div>
33-
}
34-
overlayStyle={{
35-
backgroundColor:
36-
"var(--ifm-background-color-popup-overlay)",
37-
opacity: "0.4",
38-
width: "100%",
39-
height: "100%",
40-
}}
41-
position={"center center"}
42-
>
43-
<LargePortraitCard
44-
person={person}
45-
avatarUrl={subTeamAvatarsUrls[index]}
46-
BioComponent={subTeamBioComponents[index]}
47-
></LargePortraitCard>
48-
</Popup>
24+
<PopupPortrait person={person} subTeamAvatarsUrl={subTeamAvatarsUrls[index]} subTeamBioComponent={subTeamBioComponents[index]}/>
4925
</div>
5026
</li>
5127
))}
@@ -64,7 +40,7 @@ export function SubTeamMobile({ description, subTeamAvatarsUrls, subTeam }) {
6440
className={"row" + " " + "flex-full-centered" + " " + "padding-none"}
6541
>
6642
{subTeam.map((person, index) => (
67-
<li className="cards_list" key={index}>
43+
<li className="cards-list" key={index}>
6844
<div className="col">
6945
<Link href={"/about/" + person.firstName}>
7046
<SmallPortraitCard

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
line-height: 16px;
4747
text-align: center;
4848
margin-bottom: var(--ifm-spacing-xl);
49-
color: var(--ifm-text-color-value-card)-white;
49+
color: var(--ifm-text-color-value-card-white);
5050
}
5151

5252
.value_text {
@@ -72,13 +72,12 @@
7272

7373
.value_card_white {
7474
background-color: var(--ifm-background-color-value-card-white);
75-
color: var(--ifm-text-color-value-card-white)
75+
color: var(--ifm-text-color-value-card-white);
7676
}
7777

78-
7978
.value_card_yellow {
8079
background-color: var(--ifm-background-color-value-card-yellow);
81-
color: var(--ifm-text-color-value-card-yellow)
80+
color: var(--ifm-text-color-value-card-yellow);
8281
}
8382

8483
.bio_container {
@@ -91,7 +90,6 @@
9190
letter-spacing: 0.5px;
9291
padding: var(--ifm-spacing-4xl) var(--ifm-spacing-2xl);
9392
}
94-
9593
}
9694

9795
@media only screen and (min-width: 996px) {
@@ -120,7 +118,7 @@
120118
}
121119

122120
.value_text p {
123-
color: var(--ifm-text-color-value-card);
121+
color: var(--ifm-text-color-value-card-yellow);
124122
text-align: center;
125123
}
126124

@@ -143,7 +141,7 @@
143141
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
144142
border-radius: 8px;
145143
box-shadow: 0px 0px 8px 1px #c8c8c7;
146-
background-color: var(--ifm-background-color-value-card-white);
144+
background-color: var(--ifm-background-color-value-card-yellow);
147145
margin-bottom: var(--ifm-spacing-xl);
148146
}
149147

@@ -269,4 +267,4 @@
269267
div .join_the_team_text {
270268
color: var(--ifm-text-color-blue-banner);
271269
}
272-
}
270+
}

‎src/components/blog/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function BlogsComponent({ blogpostsDetails }) {
4545

4646
<ul className={"row" + " " + "flex-full-centered"}>
4747
{filteredBlogPosts.map((blogpost, index) => (
48-
<li className="cards_list" key={index}>
48+
<li className="cards-list" key={index}>
4949
<div className="col">
5050
<BlogpostCard
5151
blogpost={blogpost}

‎src/components/careers/Interviews.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function Interviews({ details, description }) {
88
<div className="container">
99
<ul className="row">
1010
{details.map((person, index) => (
11-
<li className="cards_list" key={index}>
11+
<li className="cards-list" key={index}>
1212
<div className="col col--2">
1313
<InterviewCard person={person} />
1414
</div>

0 commit comments

Comments
 (0)