Skip to content

Commit e325870

Browse files
HaudinFlorenceHaudinFlorence
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 0738534 commit e325870

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>

‎src/components/home/LinkToWTJ.tsx renamed to ‎src/components/careers/LinkToWTJ.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function LinkToWTJ({label}) {
55
return (
66
<div className="flex-full-centered">
77
<Link
8-
className={"link-to-button" + " " + styles.link_to}
8+
className={"link-to-button" + " " + styles.link_to_WTJ}
99
href="https://www.welcometothejungle.com/fr/companies/quantstack"
1010
>
1111
{label}

‎src/components/careers/VisitWTJProfile.tsx

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
import styles from "./styles.module.css";
2-
import LinkToWTJ from "../home/LinkToWTJ";
2+
import LinkToWTJ from "./LinkToWTJ";
33

44
export default function VisitWTJProfile() {
5-
return (
6-
<div className={styles.WTJ_profile_container}>
7-
<h1 className={"text-centered"+" "+ "padding-none" + " " +"h1-margin-none"+ " "+styles.learn_more_WTJ}>
8-
LEARN MORE ON OUR WELCOME TO THE JUNGLE WEB PAGE
9-
</h1>
10-
<LinkToWTJ label={"OPEN OUR PROFILE"} />
11-
</div>
12-
);
13-
}
5+
return (
6+
<div className={styles.WTJ_profile_container}>
7+
<h1
8+
className={
9+
"text-centered" +
10+
" " +
11+
"padding-none" +
12+
" " +
13+
"h1-margin-none" +
14+
" " +
15+
styles.learn_more_WTJ
16+
}
17+
>
18+
LEARN MORE ON OUR WELCOME TO THE JUNGLE WEB PAGE
19+
</h1>
20+
<LinkToWTJ label={"OPEN OUR PROFILE"} />
21+
</div>
22+
);
23+
}

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@
2828

2929
div .learn_more_WTJ {
3030
color: var(--ifm-text-color-blue-banner);
31+
margin-bottom: var(--ifm-spacing-2xl);
32+
}
33+
34+
.link_to_WTJ {
35+
background-color: var(--ifm-background-color-button-blue-banner);
36+
color: var(--ifm-text-color-button-blue-banner);
37+
width: 358px;
38+
font-weight: 700;
3139
}
3240

3341
@media only screen and (max-width: 996px) {
@@ -82,8 +90,7 @@ div .learn_more_WTJ {
8290
.WTJ_profile_container {
8391
margin-top: var(--ifm-spacing-2xl);
8492
background-color: var(--ifm-background-color-blue-banner);
85-
86-
padding: 0 var(--ifm-spacing-2xl);
93+
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl);
8794
font-family: var(--ifm-font-family-roboto);
8895
font-size: 16px;
8996
text-align: center;
@@ -171,4 +178,5 @@ div .learn_more_WTJ {
171178
line-height: 150%; /* 72px */
172179
letter-spacing: 2.112px;
173180
}
181+
174182
}

‎src/components/contact/index.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import styles from "./styles.module.css";
22
import ContactForm from "./ContactForm";
33
import { useEffect, useState } from "react";
4-
//import ContactIllustration from "@site/static/img/illustrations/contact.svg";
5-
6-
74
import useBaseUrl from "@docusaurus/useBaseUrl";
85
import ThemedImage from "@theme/ThemedImage";
96

10-
117
export function ContactIllustration() {
128
return (
139
<ThemedImage
14-
alt="Astronaut logo of QuantStack"
10+
alt="Illustration for the contact page with a woman, a mobile phone and an enveloppe."
1511
sources={{
1612
light: useBaseUrl("/img/illustrations/contact-light.svg"),
1713
dark: useBaseUrl("/img/illustrations/contact-dark.svg"),
@@ -25,22 +21,23 @@ const breakpointValue: number = 996;
2521
export function ContactDesktop() {
2622
return (
2723
<div className={"container" + " " + styles.contact_container}>
28-
<div className="row">
24+
<div className={"row"}>
2925
<div
3026
className={
31-
"col col--6 col--offset-1" + " " + "flex-full-centered"
27+
"col col--6 col--offset-1" + " " + "flex-full-centered" + " "
3228
}
33-
style={{ margin: "var(--ifm-spacing-2xl) 0" }}
29+
style={{
30+
margin: "var(--ifm-spacing-2xl) 0",
31+
padding: "var(--ifm-spacing-2xl)",
32+
}}
3433
>
3534
<ContactIllustration />
3635
</div>
3736
<div
38-
className={
39-
"col col--5" + " " + "padding-none" + " " + "margin-none"
40-
}
37+
className={"col col--5" + " " + "padding-none" + " " + "margin-none"}
4138
>
42-
<h1> Contact us</h1>
43-
<div className="flex-full-centered">
39+
<h1 className={"padding-none"}> Contact us</h1>
40+
<div>
4441
<ContactForm />
4542
</div>
4643
</div>
@@ -58,12 +55,12 @@ export function ContactMobile() {
5855
</div>
5956
</div>
6057
<div className={"row" + " " + "flex-full-centered"}>
61-
<div className={"col" + " " + "flex-full-centered"}>
58+
<div className={"col" + " " + "flex-full-centered"} style={{ padding: "var(--ifm-spacing-2xl)"}}>
6259
<ContactIllustration />
6360
</div>
6461
</div>
6562
<div className={"row" + " " + "flex-full-centered"}>
66-
<div className={"col col--5"}>
63+
<div className={"col"}>
6764
<div className="flex-full-centered">
6865
<ContactForm />
6966
</div>

‎src/components/home/AboutQS/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export default function AboutQS() {
4141
className={"col" + " " + "padding-none"}
4242
>
4343
<LinkToAboutUs label={"LEARN MORE ABOUT US"} />
44+
45+
<div className="spacing-2xl"/>
4446
</div>
4547
</div>
4648
</div>

0 commit comments

Comments
 (0)