fix design

content/past-execs/2022/winter.json

@@ -0,0 +1,30 @@
+[
+  {
+    "name": "Juthika Hoque",
+    "role": "President"
+  },
+  {
+    "name": "Eric Huang",
+    "role": "Vice President"
+  }, 
+  {
+    "name": "Dina Orucevic",
+    "role": "Assistant Vice President"
+  },
+  {
+    "name": "Eden Chan",
+    "role": "Treasurer"
+  },
+  {
+    "name": "Raymond Li",
+    "role": "Systems Administrator"
+  }, 
+  {
+    "name": "Amy Wang",
+    "role": "Web Master"
+  },
+  {
+    "name": "Neil Parikh",
+    "role": "Office Manager"
+  }
+]

lib/team.ts

@@ -96,7 +96,7 @@ export async function getExec(name: string, pos: string, convert = true) {
     const raw = await readFile(path.join(EXECS_PATH, `${name}${FILETYPE}`));
     ({ content, data: metadata } = matter(raw));
 
-    const image = await getMemberImagePath(metadata.name);
+    const image = await getMemberImagePath(metadata.name, true);
 
     return {
       content: convert ? await serialize(content) : content,
@@ -114,7 +114,7 @@ export async function getExec(name: string, pos: string, convert = true) {
       role: `${posName}`,
     };
 
-    const image = await getMemberImagePath(metadata.name);
+    const image = await getMemberImagePath(metadata.name, true);
 
     return {
       content: convert ? await serialize(content) : content,
@@ -132,8 +132,10 @@ async function getImage(imgPath: string) {
   }
 }
 
-export async function getMemberImagePath(name: string) {
-  const imgPath = path.join("images", "team", name.replace(" ", ""));
+export async function getMemberImagePath(name: string, currentTeam: boolean) {
+  const imgPath = currentTeam
+    ? path.join("images", "team", name.replace(" ", ""))
+    : path.join("images", "execs", name.replace(" ", ""));
   const placeholder = path.join(
     "images",
     "team",

pages/about/executives.module.css

@@ -0,0 +1,98 @@
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  padding-bottom: calc(24rem / 16);
+  border-bottom: calc(1rem / 16) var(--primary-heading);
+  margin-bottom: calc(32rem / 16);
+}
+
+.nav {
+  display: none;
+}
+
+.headerTextContainer {
+  margin: auto 0 0 0;
+}
+
+.header {
+  color: var(--primary-heading);
+  font-size: calc(48rem / 16);
+  margin: 0 calc(53rem / 16) 0 0;
+}
+
+.subheading {
+  color: var(--primary-heading);
+  font-size: calc(36rem / 16);
+  font-weight: 600;
+  padding-bottom: calc(22rem / 16);
+  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  margin-bottom: calc(32rem / 16);
+  margin-top: calc(46rem / 16);
+}
+
+.codey {
+  width: calc(360rem / 16);
+}
+
+.members {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
+  row-gap: calc(43rem / 16);
+  column-gap: calc(53rem / 16);
+  justify-items: center;
+}
+
+.info {
+  margin: 6rem 0;
+}
+
+.infoSubheading {
+  color: var(--primary-accent);
+  font-size: calc(36rem / 16);
+  font-weight: 600;
+  margin-top: 0;
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .headerContainer {
+    flex-direction: column-reverse;
+    padding-bottom: 1rem;
+    margin-top: calc(30rem / 16);
+  }
+
+  .nav {
+    margin-top: calc(24rem / 16);
+    margin-bottom: calc(46rem / 16);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .codey {
+    width: calc(140rem / 16);
+    align-self: center;
+  }
+
+  .header {
+    font-size: calc(24rem / 16);
+    margin: calc(10rem / 16) 0 0 0;
+    text-align: center;
+  }
+
+  .subheading {
+    font-size: calc(24rem / 16);
+    padding-bottom: calc(15rem / 16);
+  }
+
+  .members {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(calc(130rem / 16), 1fr));
+    justify-items: center;
+    column-gap: 0;
+  }
+
+  .infoSubheading {
+    font-size: calc(24rem / 16);
+  }
+}

pages/about/executives.tsx

@@ -12,17 +12,29 @@ import { Metadata, getMemberImagePath } from "@/lib/team";
 import F21ExecData from "../../content/past-execs/2021/fall.json";
 import S21ExecData from "../../content/past-execs/2021/spring.json";
 import W21ExecData from "../../content/past-execs/2021/winter.json";
+import W22ExecData from "../../content/past-execs/2022/winter.json";
 
-import styles from "./team.module.css";
+import styles from "./executives.module.css";
 
 interface Props {
   F21Exec: Metadata[];
   S21Exec: Metadata[];
   W21Exec: Metadata[];
+  W22Exec: Metadata[];
 }
 
-export default function Team({ F21Exec, S21Exec, W21Exec }: Props) {
+export default function Executives({
+  F21Exec,
+  S21Exec,
+  W21Exec,
+  W22Exec,
+}: Props) {
   const teams = [
+    {
+      id: "W22Exec",
+      name: "Winter 2022",
+      members: W22Exec,
+    },
     {
       id: "F21Exec",
       name: "Fall 2021",
@@ -63,9 +75,9 @@ export default function Team({ F21Exec, S21Exec, W21Exec }: Props) {
           );
         })}
       </DefaultLayout>
-      <div className={styles.elections}>
+      <div className={styles.info}>
         <Bubble>
-          <h2 className={styles.electionSubheading}>More information</h2>
+          <h2 className={styles.infoSubheading}>More information</h2>
           To learn more about our past executives, see our{" "}
           <Link href="https://wiki.csclub.uwaterloo.ca/Past_Executive">
             Wikipedia
@@ -77,7 +89,7 @@ export default function Team({ F21Exec, S21Exec, W21Exec }: Props) {
   );
 }
 
-Team.Layout = function TeamLayout(props: { children: React.ReactNode }) {
+Executives.Layout = function TeamLayout(props: { children: React.ReactNode }) {
   return <div>{props.children}</div>;
 };
 
@@ -100,7 +112,8 @@ type TeamMember = Omit<Metadata, "image"> & { image?: string };
 async function getTeamWithImages(team: TeamMember[]) {
   return await Promise.all(
     team.map(async (member) => {
-      const image = member.image ?? (await getMemberImagePath(member.name));
+      const image =
+        member.image ?? (await getMemberImagePath(member.name, false));
       return {
         ...member,
         image,
@@ -110,10 +123,11 @@ async function getTeamWithImages(team: TeamMember[]) {
 }
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
-  const [F21Exec, S21Exec, W21Exec] = await Promise.all([
+  const [F21Exec, S21Exec, W21Exec, W22Exec] = await Promise.all([
     getTeamWithImages(F21ExecData),
     getTeamWithImages(S21ExecData),
     getTeamWithImages(W21ExecData),
+    getTeamWithImages(W22ExecData),
   ]);
 
   return {
@@ -121,6 +135,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
       F21Exec,
       S21Exec,
       W21Exec,
+      W22Exec,
     },
   };
 };

pages/about/team.module.css

@@ -103,4 +103,4 @@
   .electionSubheading {
     font-size: calc(24rem / 16);
   }
-}
+}