mobile exec popup
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
df4660c64b
commit
e2053e62b1
|
@ -11,12 +11,12 @@
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.img_small {
|
||||||
width: calc(110rem / 16);
|
width: calc(110rem / 16);
|
||||||
height: calc(110rem / 16);
|
height: calc(110rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium {
|
.img_medium {
|
||||||
width: calc(130rem / 16);
|
width: calc(130rem / 16);
|
||||||
height: calc(130rem / 16);
|
height: calc(130rem / 16);
|
||||||
}
|
}
|
||||||
|
@ -41,13 +41,16 @@
|
||||||
width: min-content;
|
width: min-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small {
|
.img_small {
|
||||||
width: calc(85rem / 16);
|
width: calc(85rem / 16);
|
||||||
height: calc(85rem / 16);
|
height: calc(85rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.name,
|
.caption {
|
||||||
.role {
|
|
||||||
font-size: calc(11rem / 16);
|
font-size: calc(11rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.caption_medium {
|
||||||
|
font-size: calc(14rem / 16);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,8 @@ export const TeamMember: React.FC<TeamMemberProps> = ({
|
||||||
image,
|
image,
|
||||||
size,
|
size,
|
||||||
}) => {
|
}) => {
|
||||||
const imgSize = size ? size : "small";
|
const imgSize = size ? "img_" + size : "img_small";
|
||||||
|
const captionSize = size ? "caption_" + size : "";
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Image
|
<Image
|
||||||
|
@ -23,7 +24,7 @@ export const TeamMember: React.FC<TeamMemberProps> = ({
|
||||||
src={image ?? "/images/team-member-placeholder.svg"}
|
src={image ?? "/images/team-member-placeholder.svg"}
|
||||||
alt={`Picture of ${name}`}
|
alt={`Picture of ${name}`}
|
||||||
/>
|
/>
|
||||||
<div className={styles.caption}>
|
<div className={styles.caption + " " + styles[captionSize]}>
|
||||||
<div className={styles.name}>{name}</div>
|
<div className={styles.name}>{name}</div>
|
||||||
<div className={styles.role}>{role}</div>
|
<div className={styles.role}>{role}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -37,6 +37,55 @@
|
||||||
display: none;
|
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 {
|
.execsDesktop {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -104,10 +153,9 @@
|
||||||
|
|
||||||
.execsMobile {
|
.execsMobile {
|
||||||
display: grid;
|
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);
|
row-gap: calc(24rem / 16);
|
||||||
column-gap: calc(24rem / 16);
|
column-gap: calc(24rem / 16);
|
||||||
justify-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.execsDesktop {
|
.execsDesktop {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React, { ComponentType, ReactNode, useState } from "react";
|
||||||
import { MDXProvider } from "@mdx-js/react";
|
import { MDXProvider } from "@mdx-js/react";
|
||||||
import { Image } from "../../components/Image";
|
import { Image } from "../../components/Image";
|
||||||
import { TeamMemberCard } from "../../components/TeamMemberCard";
|
import { TeamMemberCard } from "../../components/TeamMemberCard";
|
||||||
|
@ -27,7 +27,6 @@ import MaxErenberg, {
|
||||||
} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
|
} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
|
||||||
|
|
||||||
// TODO: get hotdog for elections
|
// TODO: get hotdog for elections
|
||||||
// mobile
|
|
||||||
|
|
||||||
export default function MeetTheTeam() {
|
export default function MeetTheTeam() {
|
||||||
return (
|
return (
|
||||||
|
@ -78,11 +77,11 @@ export default function MeetTheTeam() {
|
||||||
</TeamMemberCard>
|
</TeamMemberCard>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.execsMobile} id="execs">
|
<div className={styles.execsMobile} id="execs">
|
||||||
<TeamMember {...KallenMetadata} size="medium" />
|
<MobileExec metadata={KallenMetadata} content={KallenTu} />
|
||||||
<TeamMember {...GordonMetadata} size="medium" />
|
<MobileExec metadata={GordonMetadata} content={GordonLe} />
|
||||||
<TeamMember {...RavinduMetadata} size="medium" />
|
<MobileExec metadata={RavinduMetadata} content={RavinduAngammana} />
|
||||||
<TeamMember {...NeilMetadata} size="medium" />
|
<MobileExec metadata={NeilMetadata} content={NeilParikh} />
|
||||||
<TeamMember {...MaxMetadata} size="medium" />
|
<MobileExec metadata={MaxMetadata} content={MaxErenberg} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.programme} id="programme">
|
<div className={styles.programme} id="programme">
|
||||||
<h2 className={styles.subheading}>Programme Committee</h2>
|
<h2 className={styles.subheading}>Programme Committee</h2>
|
||||||
|
@ -115,6 +114,15 @@ interface Metadata {
|
||||||
image?: string;
|
image?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface MobileExecProps {
|
||||||
|
metadata: Metadata;
|
||||||
|
content: ComponentType;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Propup extends MobileExecProps {
|
||||||
|
handleClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
function MembersList(props: MembersProps) {
|
function MembersList(props: MembersProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.members}>
|
<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 --
|
// -- Dynamic Import logic --
|
||||||
|
|
||||||
// import { readdirSync } from "fs";
|
// import { readdirSync } from "fs";
|
||||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 377 B |
Loading…
Reference in New Issue