pr comment fixes
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
b14e196a4f
commit
da4742ba81
|
@ -33,7 +33,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
font-size: calc(10rem / 16);
|
font-size: calc(11rem / 16);
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
grid-area: role;
|
grid-area: role;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
color: var(--purple-2);
|
color: var(--primary-heading);
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
line-height: calc(40 / 24);
|
line-height: calc(40 / 24);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
@ -54,9 +54,9 @@
|
||||||
|
|
||||||
/* Popup */
|
/* Popup */
|
||||||
|
|
||||||
.popup_background {
|
.popupBackground {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: var(--navbar-gray);
|
background-color: var(--navbar-page-overlay);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -64,11 +64,11 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup_container {
|
.popupContainer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: var(--off-white);
|
background-color: var(--secondary-background);
|
||||||
padding: calc(20rem / 16) calc(40rem / 16);
|
padding: calc(20rem / 16) calc(40rem / 16);
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -76,7 +76,7 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close_btn {
|
.closeBtn {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
/* reset default button styling */
|
/* reset default button styling */
|
||||||
width: min-content;
|
width: min-content;
|
||||||
|
@ -87,32 +87,32 @@
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup_content {
|
.popupContent {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup_image {
|
.popupImage {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup_name {
|
.popupName {
|
||||||
color: var(--blue-2);
|
color: var(--primary-accent);
|
||||||
margin: calc(24rem / 16) 0 0 0;
|
margin: calc(24rem / 16) 0 0 0;
|
||||||
font-size: calc(18rem / 16);
|
font-size: calc(18rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup_role {
|
.popupRole {
|
||||||
color: var(--purple-2);
|
color: var(--primary-heading);
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: calc(18rem / 16);
|
font-size: calc(18rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup_description {
|
.popupDescription {
|
||||||
font-size: calc(14rem / 16);
|
font-size: calc(14rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Image } from "./Image";
|
import { Image } from "./Image";
|
||||||
import useWindowDimensions from "../hooks/useWindowDimension";
|
import { useWindowDimension } from "../hooks/useWindowDimension";
|
||||||
import styles from "./TeamMemberCard.module.css";
|
import styles from "./TeamMemberCard.module.css";
|
||||||
|
|
||||||
export interface TeamMemberCardProps {
|
export interface TeamMemberCardProps {
|
||||||
|
@ -16,7 +16,7 @@ export function TeamMemberCard({
|
||||||
role,
|
role,
|
||||||
children,
|
children,
|
||||||
}: TeamMemberCardProps) {
|
}: TeamMemberCardProps) {
|
||||||
const { width } = useWindowDimensions();
|
const { width } = useWindowDimension();
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
if (width <= 768) {
|
if (width <= 768) {
|
||||||
|
@ -58,22 +58,22 @@ interface Propup extends TeamMemberCardProps {
|
||||||
function ExecPopup({ name, image, role, children, handleClick }: Propup) {
|
function ExecPopup({ name, image, role, children, handleClick }: Propup) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.popup_background} onClick={handleClick} />
|
<div className={styles.popupBackground} onClick={handleClick} />
|
||||||
<div className={styles.popup_container}>
|
<div className={styles.popupContainer}>
|
||||||
<button className={styles.close_btn} onClick={handleClick}>
|
<button className={styles.closeBtn} onClick={handleClick}>
|
||||||
<Image src="images/team/popup-close.svg" />
|
<Image src="images/team/popup-close.svg" />
|
||||||
</button>
|
</button>
|
||||||
<div className={styles.popup_content}>
|
<div className={styles.popupContent}>
|
||||||
<div className={styles.picture}>
|
<div className={styles.picture}>
|
||||||
<Image
|
<Image
|
||||||
className={styles.popup_image}
|
className={styles.popupImage}
|
||||||
src={image ?? "/images/team/team-member-placeholder.svg"}
|
src={image ?? "/images/team/team-member-placeholder.svg"}
|
||||||
alt={`Picture of ${name}`}
|
alt={`Picture of ${name}`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h1 className={styles.popup_name}>{name}</h1>
|
<h1 className={styles.popupName}>{name}</h1>
|
||||||
<h2 className={styles.popup_role}>{role}</h2>
|
<h2 className={styles.popupRole}>{role}</h2>
|
||||||
<div className={styles.popup_description}>{children}</div>
|
<div className={styles.popupDescription}>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
To find out when and where the next elections will be held, keep an
|
|
||||||
eye on on the [News](https://google.com).
|
|
||||||
|
|
||||||
For details on the elections, read our
|
|
||||||
[Constitution](/about/constitution).
|
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
name: Gordon Le
|
name: Gordon Le
|
||||||
role: Vice President
|
role: Vice President
|
||||||
image: /images/team/exec/Exec_GordonLe.jpg
|
image: /images/team/exec/Exec_GordonLe.JPG
|
||||||
---
|
---
|
||||||
|
|
||||||
words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words
|
words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
{
|
{
|
||||||
"name": "Yanni Wang",
|
"name": "Yanni Wang",
|
||||||
"role": "Events",
|
"role": "Events",
|
||||||
"image": "images/team/programme/Events_YanniWang.jpg"
|
"image": "images/team/programme/Events_YanniWang.JPG"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Anjing Li",
|
"name": "Anjing Li",
|
||||||
|
@ -57,7 +57,7 @@
|
||||||
{
|
{
|
||||||
"name": "Patrick He",
|
"name": "Patrick He",
|
||||||
"role": "Marketing",
|
"role": "Marketing",
|
||||||
"image": "images/team/programme/Marketing_PatrickHe.png"
|
"image": "images/team/programme/Marketing_PatrickHe.PNG"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Richa Dalal",
|
"name": "Richa Dalal",
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
{
|
{
|
||||||
"name": "Catherine Wan",
|
"name": "Catherine Wan",
|
||||||
"role": "Developer",
|
"role": "Developer",
|
||||||
"image": "images/team/website/Website_CatherineWan.jpg"
|
"image": "images/team/website/Website_CatherineWan.JPG"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Dora Su",
|
"name": "Dora Su",
|
||||||
|
@ -36,11 +36,11 @@
|
||||||
{
|
{
|
||||||
"name": "Linna Luo",
|
"name": "Linna Luo",
|
||||||
"role": "Developer",
|
"role": "Developer",
|
||||||
"image": "images/team/website/Website_LinnaLuo.jpg"
|
"image": "images/team/website/Website_LinnaLuo.JPG"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "William Tran",
|
"name": "William Tran",
|
||||||
"role": "Developer",
|
"role": "Developer",
|
||||||
"image": "images/team/website/Website_WilliamTran.jpg"
|
"image": "images/team/website/Website_WilliamTran.JPG"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -13,7 +13,7 @@ function getWindowDimension() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function useWindowDimension(): WindowDimension {
|
export function useWindowDimension(): WindowDimension {
|
||||||
const [windowSize, setWindowDimension] = useState<WindowDimension>({
|
const [windowSize, setWindowDimension] = useState<WindowDimension>({
|
||||||
width: 0,
|
width: 0,
|
||||||
height: 0,
|
height: 0,
|
||||||
|
@ -35,5 +35,3 @@ function useWindowDimension(): WindowDimension {
|
||||||
|
|
||||||
return windowSize;
|
return windowSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default useWindowDimension;
|
|
||||||
|
|
|
@ -18,7 +18,7 @@ export async function getExecNames() {
|
||||||
.map((name) => name.slice(0, -1 * fileType.length));
|
.map((name) => name.slice(0, -1 * fileType.length));
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getExecContent(fileName: string, convert = true) {
|
export async function getExec(fileName: string, convert = true) {
|
||||||
const raw = await readFile(path.join(EXECS_PATH, `${fileName}${fileType}`));
|
const raw = await readFile(path.join(EXECS_PATH, `${fileName}${fileType}`));
|
||||||
const { content, data: metadata } = matter(raw);
|
const { content, data: metadata } = matter(raw);
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"export": "next export",
|
"export": "next export",
|
||||||
"lint": "eslint \"{pages,components,lib}/**/*.{js,ts,tsx,jsx}\" --quiet",
|
"lint": "eslint \"{pages,components,lib,hooks}/**/*.{js,ts,tsx,jsx}\" --quiet",
|
||||||
"lint:fix": "eslint \"{pages,components,lib}/**/*.{js,ts,tsx,jsx}\" --quiet --fix"
|
"lint:fix": "eslint \"{pages,components,lib,hooks}/**/*.{js,ts,tsx,jsx}\" --quiet --fix"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdx-js/loader": "^1.6.22",
|
"@mdx-js/loader": "^1.6.22",
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
.header_container {
|
.headerContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
padding-bottom: calc(24rem / 16);
|
padding-bottom: calc(24rem / 16);
|
||||||
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
border-bottom: calc(1rem / 16) solid var(--primary-heading);
|
||||||
margin-bottom: calc(46rem / 16);
|
margin-bottom: calc(46rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10,23 +10,24 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_text_container {
|
.headerTextContainer {
|
||||||
margin: auto 0 0 0;
|
margin: auto 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
color: var(--purple-2);
|
color: var(--primary-heading);
|
||||||
font-size: calc(48rem / 16);
|
font-size: calc(48rem / 16);
|
||||||
margin: 0 calc(53rem / 16) 0 0;
|
margin: 0 calc(53rem / 16) 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subheading {
|
.subheading {
|
||||||
color: var(--purple-2);
|
color: var(--primary-heading);
|
||||||
font-size: calc(36rem / 16);
|
font-size: calc(36rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding-bottom: calc(22rem / 16);
|
padding-bottom: calc(22rem / 16);
|
||||||
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
border-bottom: calc(1rem / 16) solid var(--primary-heading);
|
||||||
margin-bottom: calc(46rem / 16);
|
margin-bottom: calc(46rem / 16);
|
||||||
|
margin-top: calc(86rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.codey {
|
.codey {
|
||||||
|
@ -48,16 +49,12 @@
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.members:last-child {
|
|
||||||
margin-bottom: calc(86rem / 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.elections {
|
.elections {
|
||||||
margin-top: 6rem;
|
margin-top: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.election_subheading {
|
.electionSubheading {
|
||||||
color: var(--blue-2);
|
color: var(--primary-accent);
|
||||||
font-size: calc(36rem / 16);
|
font-size: calc(36rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
@ -68,7 +65,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.header_container {
|
.headerContainer {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
@ -113,7 +110,7 @@
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.election_subheading {
|
.electionSubheading {
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { getExecContent, getExecNames, Metadata } from "../../lib/team";
|
import { getExec, getExecNames, Metadata } from "../../lib/team";
|
||||||
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
||||||
import { GetStaticProps } from "next";
|
import { GetStaticProps } from "next";
|
||||||
import { Image } from "../../components/Image";
|
import { Image } from "../../components/Image";
|
||||||
|
@ -7,7 +7,6 @@ import { TeamMemberCard } from "../../components/TeamMemberCard";
|
||||||
import { TeamMember } from "../../components/TeamMember";
|
import { TeamMember } from "../../components/TeamMember";
|
||||||
import { Link } from "../../components/Link";
|
import { Link } from "../../components/Link";
|
||||||
import { Bubble } from "../../components/Bubble";
|
import { Bubble } from "../../components/Bubble";
|
||||||
import ElectionContent from "../../content/meet-the-team/elections.mdx";
|
|
||||||
import programme from "../../content/meet-the-team/programme-committee.json";
|
import programme from "../../content/meet-the-team/programme-committee.json";
|
||||||
import website from "../../content/meet-the-team/website-committee.json";
|
import website from "../../content/meet-the-team/website-committee.json";
|
||||||
import systems from "../../content/meet-the-team/systems-committee.json";
|
import systems from "../../content/meet-the-team/systems-committee.json";
|
||||||
|
@ -25,11 +24,11 @@ interface Props {
|
||||||
execs: SerializedExec[];
|
execs: SerializedExec[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MeetTheTeam({ execs }: Props) {
|
export default function Team({ execs }: Props) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.header_container}>
|
<div className={styles.headerContainer}>
|
||||||
<div className={styles.header_text_container}>
|
<div className={styles.headerTextContainer}>
|
||||||
<h1 className={styles.header}>Meet the Team!</h1>
|
<h1 className={styles.header}>Meet the Team!</h1>
|
||||||
<div className={styles.nav}>
|
<div className={styles.nav}>
|
||||||
<Link href="#execs">The Executives</Link>
|
<Link href="#execs">The Executives</Link>
|
||||||
|
@ -57,22 +56,25 @@ export default function MeetTheTeam({ execs }: Props) {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.programme} id="programme">
|
<div id="programme">
|
||||||
<h2 className={styles.subheading}>Programme Committee</h2>
|
<h2 className={styles.subheading}>Programme Committee</h2>
|
||||||
<MembersList team={programme} />
|
<MembersList team={programme} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.website} id="website">
|
<div id="website">
|
||||||
<h2 className={styles.subheading}>Website Committee</h2>
|
<h2 className={styles.subheading}>Website Committee</h2>
|
||||||
<MembersList team={website} />
|
<MembersList team={website} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.system} id="system">
|
<div id="system">
|
||||||
<h2 className={styles.subheading}>Systems Committee</h2>
|
<h2 className={styles.subheading}>Systems Committee</h2>
|
||||||
<MembersList team={systems} />
|
<MembersList team={systems} />
|
||||||
</div>
|
</div>
|
||||||
<Bubble>
|
<Bubble>
|
||||||
<div className={styles.elections}>
|
<div className={styles.elections}>
|
||||||
<h2 className={styles.election_subheading}>Elections</h2>
|
<h2 className={styles.electionSubheading}>Elections</h2>
|
||||||
<ElectionContent />
|
To find out when and where the next elections will be held, keep an
|
||||||
|
eye on on the <Link href="">News</Link>. <br />
|
||||||
|
For details on the elections, read our
|
||||||
|
<Link href="/about/constitution"> Constitution</Link>
|
||||||
</div>
|
</div>
|
||||||
</Bubble>
|
</Bubble>
|
||||||
</>
|
</>
|
||||||
|
@ -96,7 +98,7 @@ function MembersList(props: MembersProps) {
|
||||||
export const getStaticProps: GetStaticProps<Props> = async () => {
|
export const getStaticProps: GetStaticProps<Props> = async () => {
|
||||||
const execNames = await getExecNames();
|
const execNames = await getExecNames();
|
||||||
const execs = (await Promise.all(
|
const execs = (await Promise.all(
|
||||||
execNames.map((name) => getExecContent(name))
|
execNames.map((name) => getExec(name))
|
||||||
)) as SerializedExec[];
|
)) as SerializedExec[];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 897 KiB |
Binary file not shown.
Before Width: | Height: | Size: 73 KiB |
Loading…
Reference in New Issue