Use a dialog to display the LargePortraitCard.

Author: HaudinFlorence

package-lock.json

@@ -23,11 +23,15 @@
     "@coreui/react": "^5.0.0",
     "@docusaurus/core": "^3.4.0",
     "@docusaurus/preset-classic": "^3.4.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@formspree/core": "^3.0.1",
     "@formspree/react": "^2.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@mdx-js/react": "^3.0.0",
+    "@mui/material": "^6.1.5",
+    "@mui/styles": "^6.1.5",
     "autoprefixer": "^10.4.19",
     "canvas": "^2.11.2",
     "clsx": "^2.0.0",
@@ -45,8 +49,9 @@
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.0.0",
     "react-markdown": "^9.0.1",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
     "react-slick": "^0.30.2",
-    "reactjs-popup": "^2.0.6",
     "request": "^2.88.2",
     "slick-carousel": "^1.8.1"
   },

package.json

@@ -1,54 +1,22 @@
 import styles from "./styles.module.css";
-import Popup from "reactjs-popup";
-import SocialMediaContacts from "./SocialMediaContacts";
-import { useRef, useState } from "react";
-import LargePortraitCard from "./LargePortraitCard";
+import { useHistory } from "react-router";
 import Avatar from "./Avatar";
+import { useState } from "react";
 
-const contentStyle = {
-  background: "white",
-  borderRadius: "10px",
-};
 
-const overlayStyle = {
-  backgroundColor: "var(--ifm-background-color-popup-overlay)",
-  opacity: "0.4",
-  width: "100%",
-  height: "100%",
-};
+export function SmallPortraitCard ({ person}) {
+  let [isDialogOpen, setIsDialogOpen] = useState(false);
 
-function getCenterOfViewport() {
-  let horizontalCenter = Math.floor(window.innerWidth / 2);
-  let verticalCenter = Math.floor(window.innerHeight / 2);
-  return [horizontalCenter, verticalCenter];
-}
+  const history = useHistory();
 
-function calculateOffsets(elementRef) {
-  const rect = elementRef.current.getBoundingClientRect();
-  const [xViewportCenter, yViewportCenter] = getCenterOfViewport();
-  const [xCardCenter, yCardCenter] = [
-    rect.left + rect.width / 2,
-    rect.top + rect.height / 2,
-  ];
-  const offsets = [
-    xViewportCenter - xCardCenter,
-    yViewportCenter - yCardCenter,
-  ];
-  return offsets;
-}
-
-export function SmallPortraitCard({ person, setOffsets }) {
-  const elementRef = useRef(null);
+  const openDialog = () => {
+    history.push("/about/" + person.firstName);
+    setIsDialogOpen(true);
+  };
 
   return (
-    <div
-      ref={elementRef}
-      className={"card" + " " + styles.small_portrait_card}
-      id={person.firstName}
-      onClick={() => {
-        setOffsets(calculateOffsets(elementRef));
-      }}
-    >
+    <div onClick={openDialog}>
+       <div className={"card" + " " + styles.small_portrait_card}>
       <div className="card__header">
         <Avatar person={person} />
         <div
@@ -65,49 +33,8 @@ export function SmallPortraitCard({ person, setOffsets }) {
         >
           {person.position}
         </div>
-        <div style={{ marginTop: "var(--ifm-spacing-xl)" }}>
-          <SocialMediaContacts person={person}></SocialMediaContacts>
-        </div>
       </div>
     </div>
-  );
-}
-export default function PopupPortrait({ person }) {
-  const [offsets, setOffsets] = useState([0, 0]);
-  let [isPopupOpen, setIsPopupOpen] = useState(false);
-
-  return (
-    <div>
-      <Popup
-        open={isPopupOpen}
-        closeOnEscape={true}
-        closeOnDocumentClick={true}
-        onClose={() => setIsPopupOpen(false)}
-        trigger={
-          <div>
-            <SmallPortraitCard person={person} setOffsets={setOffsets} />
-          </div>
-        }
-        onOpen={() => {
-          setIsPopupOpen(true);
-        }}
-        contentStyle={contentStyle}
-        overlayStyle={overlayStyle}
-        position={"center center"}
-        offsetX={offsets[0]}
-        offsetY={offsets[1]}
-      >
-        <div>
-          <button
-            className="close-button"
-            style={{ position: "absolute", right: "0px" }}
-            onClick={() => {
-              setIsPopupOpen(false);
-            }}
-          ></button>
-          <LargePortraitCard person={person}></LargePortraitCard>
-        </div>
-      </Popup>
     </div>
   );
-}
+}

src/components/about/SmallPortraitCard.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  useHistory,
+} from "react-router-dom";
+import { useState } from "react";
+import LargePortraitCard from "./LargePortraitCard";
+import { SmallPortraitCard } from "./SmallPortraitCard";
+
+const modalOverlay = {
+  position: "fixed",
+  top: "0",
+  left: "0",
+  right: "0",
+  bottom: "0",
+  backgroundColor: "rgba(0, 0, 0, 0.3)",
+  zIndex: 1000
+};
+const modalContent = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  padding: "20px",
+  backgroundColor: "var(--ifm-color-primary-p0)",
+  border: "1px solid #ccc",
+  boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
+  borderRadius: "10px",
+  zIndex: "4000"
+};
+
+export default function PortraitCardsAnchorAndDialog({ person }) {
+  const history = useHistory();
+  let [isDialogOpen, setIsDialogOpen] = useState(true);
+  return (
+    <Router>
+      <div>
+        <SmallPortraitCard person={person} />
+        <Switch>
+          <Route
+            path={"/about/" + person.firstName}
+            render={() => (
+              <>
+                <div style={modalOverlay}>
+                  <div style={modalContent}>
+                    <button
+                      className="close-button"
+                      style={{
+                        position: "absolute",
+                        top: "10px",
+                        right: "10px",
+                      }}
+                      onClick={() => {
+                        history.goBack();
+                        setIsDialogOpen(false);
+                      }}
+                    />
+                    <LargePortraitCard person={person} />
+                  </div>
+                </div>
+              </>
+            )}
+          />
+        </Switch>
+      </div>
+    </Router>
+  );
+}

src/components/about/SmallPortraitCardWithDialog.tsx

@@ -1,10 +1,7 @@
 import styles from "./styles.module.css";
-import PopupPortrait from "./SmallPortraitCard";
+import SmallPortraitCardWithDialog from "./SmallPortraitCardWithDialog";
 
-export default function SubTeam({
-  subTeamName,
-  subTeam
-}) {
+export default function SubTeam({ subTeamName, subTeam }) {
   return (
     <div className={styles.subteam_container}>
       <h2 className={"text--center"}> {subTeamName}</h2>
@@ -13,9 +10,7 @@ export default function SubTeam({
           {subTeam.map((person, index) => (
             <li className="cards-list" key={index}>
               <div className="col">
-                <PopupPortrait
-                  person={person}
-                />
+                <SmallPortraitCardWithDialog person={person} />
               </div>
             </li>
           ))}

src/components/about/SubTeam.tsx

@@ -1,19 +1,22 @@
 import styles from "./styles.module.css";
-import  { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
+import { coreTeam, QSCollaboratorsTeam, leadershipTeam } from "./Team/team";
 import FourValues from "./FourValues";
 import SubTeam from "./SubTeam";
 import LinkToContact from "../home/LinkToContact";
-
+import { BrowserRouter as Router } from "react-router-dom";
+import Appli from "./Test"; // Your main App component
+ 
 export function About() {
   return (
-    <div >
+    <div>
       <div className="main-container-with-margins">
         <div className="container upper-container-with-margin-top">
           <div className={"row"}>
             <div className={"col flex-full-centered"}>
               <FourValues />
             </div>
           </div>
+         
 
           <div className="row">
             <div className="col col--10 col--offset-1">
@@ -24,16 +27,14 @@ export function About() {
               </div>
             </div>
           </div>
+ 
           <div className="row">
             <div className="col">
               <SubTeam
                 subTeamName={"The leadership team"}
                 subTeam={leadershipTeam}
               />
-              <SubTeam
-                subTeamName={"The core team"}
-                subTeam={coreTeam}
-              />
+              <SubTeam subTeamName={"The core team"} subTeam={coreTeam} />
               <SubTeam
                 subTeamName={"QuantStack collaborators"}
                 subTeam={QSCollaboratorsTeam}

src/components/about/index.tsx

@@ -1,6 +1,7 @@
+
 .small_portrait_card {
   width: 279px;
-  height: 400px;
+  height: 320px;
   background-color: white;
   color: var(--ifm-color-primary-p2);
   border-radius: 8px;
@@ -11,11 +12,10 @@
 
 .small_portrait_card:hover {
   border: solid 1px gray;
-  cursor: pointer; 
-  text-decoration: #0000EE underline;
+  cursor: pointer;
+  text-decoration: #0000ee underline;
 }
 
-
 .value_text p {
   font-family: var(--ifm-font-family-roboto);
   font-size: 14px;
@@ -51,7 +51,7 @@ div .row {
   line-height: 24px;
   letter-spacing: 0.15px;
   margin: var(--ifm-spacing-xs) 0;
-  width: 100%
+  width: 100%;
 }
 
 .small_card_position {
@@ -135,6 +135,39 @@ div .join_the_team_text {
   padding-right: 5px;
 }
 
+.card {
+  border: 1px solid #ccc;
+  padding: 16px;
+  margin: 16px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: box-shadow 0.2s;
+}
+
+.small_portrait_card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* Ensure it's above other content */
+}
+
+.popup {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
 @media only screen and (max-width: 996px) {
   /*Mobile*/
   .value_card {
@@ -167,6 +200,19 @@ div .join_the_team_text {
     width: 100%;
     height: 100%;
     padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl);
+    
+  }
+  .modal_with_large_portrait_card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background-color: var(--ifm-color-primary-p0);
+    border: 1px solid #ccc;
+    z-index: 1000;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    border-radius: 10px;
   }
 
   .subteam_container {

src/components/about/styles.module.css

@@ -0,0 +1,12 @@
+import LargePortraitCard from "@site/src/components/about/LargePortraitCard";
+import { leadershipTeam } from "@site/src/components/about/Team/team";
+//import PortraitDialog from "@site/src/components/about/PortraitDialog";
+
+export default function SylvainComponent() {
+  /*leadershipTeam.forEach((person) => {
+    if (person.firstName === "Sylvain")
+      console.log('Found')
+      return <LargePortraitCard person={person} />;
+  });*/
+  <div> This is great</div>
+}