mobile exec popup

components/TeamMember.module.css

@@ -11,12 +11,12 @@
   object-fit: cover;
 }
 
-.small {
+.img_small {
   width: calc(110rem / 16);
   height: calc(110rem / 16);
 }
 
-.medium {
+.img_medium {
   width: calc(130rem / 16);
   height: calc(130rem / 16);
 }
@@ -41,13 +41,16 @@
     width: min-content;
   }
 
-  .small {
+  .img_small {
     width: calc(85rem / 16);
     height: calc(85rem / 16);
   }
 
-  .name,
-  .role {
+  .caption {
     font-size: calc(11rem / 16);
   }
+
+  .caption_medium {
+    font-size: calc(14rem / 16);
+  }
 }

components/TeamMember.tsx

@@ -15,7 +15,8 @@ export const TeamMember: React.FC<TeamMemberProps> = ({
   image,
   size,
 }) => {
-  const imgSize = size ? size : "small";
+  const imgSize = size ? "img_" + size : "img_small";
+  const captionSize = size ? "caption_" + size : "";
   return (
     <div className={styles.container}>
       <Image
@@ -23,7 +24,7 @@ export const TeamMember: React.FC<TeamMemberProps> = ({
         src={image ?? "/images/team-member-placeholder.svg"}
         alt={`Picture of ${name}`}
       />
-      <div className={styles.caption}>
+      <div className={styles.caption + " " + styles[captionSize]}>
         <div className={styles.name}>{name}</div>
         <div className={styles.role}>{role}</div>
       </div>

pages/about/team.module.css

@@ -37,6 +37,55 @@
   display: none;
 }
 
+.reset_button {
+  /* reset default button styling */
+  background: transparent;
+  border: 0px solid transparent;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.execButton {
+  display: flex;
+  justify-content: center;
+}
+
+.popup_background {
+  position: fixed;
+  background-color: var(--navbar-gray);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.popup_container {
+  position: fixed;
+  background-color: var(--off-white);
+  padding: calc(20rem / 16) calc(40rem / 16);
+  top: 0;
+  left: 0;
+}
+
+.popup_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.close {
+  float: right;
+}
+
+.exec {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.exec > p {
+  font-size: calc(14rem / 16);
+}
+
 .execsDesktop {
   display: flex;
   flex-direction: column;
@@ -104,10 +153,9 @@
 
   .execsMobile {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(calc(130rem / 16), 1fr));
     row-gap: calc(24rem / 16);
     column-gap: calc(24rem / 16);
-    justify-items: center;
   }
 
   .execsDesktop {

pages/about/team.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ComponentType, ReactNode, useState } from "react";
 import { MDXProvider } from "@mdx-js/react";
 import { Image } from "../../components/Image";
 import { TeamMemberCard } from "../../components/TeamMemberCard";
@@ -27,7 +27,6 @@ import MaxErenberg, {
 } from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
 
 // TODO: get hotdog for elections
-//       mobile
 
 export default function MeetTheTeam() {
   return (
@@ -78,11 +77,11 @@ export default function MeetTheTeam() {
           </TeamMemberCard>
         </div>
         <div className={styles.execsMobile} id="execs">
-          <TeamMember {...KallenMetadata} size="medium" />
-          <TeamMember {...GordonMetadata} size="medium" />
-          <TeamMember {...RavinduMetadata} size="medium" />
-          <TeamMember {...NeilMetadata} size="medium" />
-          <TeamMember {...MaxMetadata} size="medium" />
+          <MobileExec metadata={KallenMetadata} content={KallenTu} />
+          <MobileExec metadata={GordonMetadata} content={GordonLe} />
+          <MobileExec metadata={RavinduMetadata} content={RavinduAngammana} />
+          <MobileExec metadata={NeilMetadata} content={NeilParikh} />
+          <MobileExec metadata={MaxMetadata} content={MaxErenberg} />
         </div>
         <div className={styles.programme} id="programme">
           <h2 className={styles.subheading}>Programme Committee</h2>
@@ -115,6 +114,15 @@ interface Metadata {
   image?: string;
 }
 
+interface MobileExecProps {
+  metadata: Metadata;
+  content: ComponentType;
+}
+
+interface Propup extends MobileExecProps {
+  handleClose: () => void;
+}
+
 function MembersList(props: MembersProps) {
   return (
     <div className={styles.members}>
@@ -125,6 +133,49 @@ function MembersList(props: MembersProps) {
   );
 }
 
+function MobileExec(props: MobileExecProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const togglePopup = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <>
+      <button
+        className={styles.reset_button + " " + styles.execButton}
+        onClick={togglePopup}
+      >
+        <TeamMember {...props.metadata} size="medium" />
+      </button>
+      {isOpen && (
+        <>
+          <div className={styles.popup_background} onClick={togglePopup}></div>
+          <ExecPopup
+            metadata={props.metadata}
+            content={props.content}
+            handleClose={togglePopup}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+function ExecPopup(props: Propup) {
+  return (
+    <div className={styles.popup_container}>
+      <div className={styles.popup_content}>
+        <button className={styles.reset_button} onClick={props.handleClose}>
+          <Image src="images/team/popup-close.svg" className={styles.close} />
+        </button>
+        <div className={styles.exec}>
+          <TeamMember {...props.metadata} size="medium" />
+          <props.content />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // -- Dynamic Import logic --
 
 // import { readdirSync } from "fs";

public/images/team/popup-close.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2.57333" height="30.8317" rx="1.28666" transform="matrix(0.795101 -0.606477 0.710338 0.703861 0 1.83057)" fill="#C4C4C4"/>
+<rect width="2.58854" height="30.6416" rx="1.29427" transform="matrix(-0.820223 -0.572044 0.67815 -0.734924 2.87207 24)" fill="#C4C4C4"/>
+</svg>