TeamMemberCard

merge-requests/15/merge
Amy Wang 2 years ago committed by Adi Thakral
parent 7f88950f78
commit 4777b5f274
  1. 2
      components/MiniEventCard.module.css
  2. 4
      components/MiniEventCard.tsx
  3. 14
      components/TeamMember.tsx
  4. 114
      components/TeamMemberCard.module.css
  5. 27
      components/TeamMemberCard.tsx
  6. 36
      components/playground.tsx
  7. 9
      content/playground/codey.team-member.mdx
  8. 5
      content/playground/demo.teammember.mdx
  9. 5
      content/playground/doge.team-member.mdx
  10. 4
      next-env.d.ts
  11. 14
      pages/playground.mdx
  12. BIN
      public/images/playground/codeyHi.png
  13. BIN
      public/images/playground/doge.jpg
  14. BIN
      public/images/playground/team-member.png
  15. 3
      public/images/team-member-placeholder.svg

@ -18,7 +18,7 @@
}
.info {
margin-top: 0;
margin-bottom: 0.75rem;
}
.details {

@ -43,9 +43,9 @@ export const MiniEventCard: React.FC<Props> = ({
<div>{name}</div>
<div className={styles.nameSpacer}></div>
</h2>
<p className={styles.info}>
<div className={styles.info}>
<EventSetting date={date} location={location} online={online} />
</p>
</div>
<p className={styles.shortDescription}>{short}</p>
</div>

@ -5,13 +5,21 @@ import { Image } from "./Image";
interface TeamMemberProps {
name: string;
role: string;
src: string;
image?: string;
}
export const TeamMember: React.FC<TeamMemberProps> = ({ name, role, src }) => {
export const TeamMember: React.FC<TeamMemberProps> = ({
name,
role,
image,
}) => {
return (
<div className={styles.container}>
<Image className={styles.img} src={src} alt={`${name} | ${role}`} />
<Image
className={styles.img}
src={image ?? "/images/team-member-placeholder.svg"}
alt={`Picture of ${name}`}
/>
<div className={styles.caption}>
<div className={styles.name}>{name}</div>
<div className={styles.role}>{role}</div>

@ -0,0 +1,114 @@
.card {
display: grid;
grid-template-columns: 126px auto;
grid-template-areas:
"picture name"
"picture role"
"picture description";
column-gap: 2rem;
row-gap: 0;
justify-items: start;
align-items: start;
max-width: 847px;
}
.picture {
grid-area: picture;
justify-self: center;
max-width: 126px;
max-height: 126px;
clip-path: circle(50%);
}
.image {
width: 100%;
}
.name {
grid-area: name;
margin: 0;
color: var(--blue-1);
font-size: 2.25rem;
line-height: 1.1;
font-weight: 700;
}
.role {
grid-area: role;
margin: 0;
color: var(--purple-2);
font-size: 1.5rem;
line-height: 1.7;
font-weight: 600;
}
.description {
grid-area: description;
margin: 0;
line-height: 1.875;
}
@media screen and (max-width: 768px) {
.card {
grid-template-columns: 90px auto;
column-gap: 1.375rem;
max-width: 460px;
}
.picture {
max-width: 90px;
max-height: 90px;
}
.name,
.role,
.description {
font-size: 1rem;
line-height: 1.5;
}
}
/* TODO: Use the correct mobile styles from figma
@media only screen and (max-width: 375px) {
.card {
grid-template-columns: 70px auto;
grid-template-rows: auto calc(0.875rem * 1.5 + 0.75rem) auto;
grid-template-areas:
"picture name"
"picture role"
"description description";
column-gap: 1.4375rem;
align-items: end;
max-width: 190px;
}
.picture {
max-width: 70px;
max-height: 70px;
}
.name,
.role,
.description {
font-size: 0.875rem;
line-height: 1.5;
}
.role {
margin-bottom: 0.75rem;
}
.description {
justify-self: top;
margin-top: 0.75rem;
margin-left: 0.75rem;
}
} */

@ -0,0 +1,27 @@
import React from "react";
import { Image } from "./Image";
import styles from "./TeamMemberCard.module.css";
interface TeamMemberCardProps {
name: string;
role: string;
image?: string; // path to image of person, relative to public directory
children: React.ReactNode;
}
export function TeamMemberCard(props: TeamMemberCardProps) {
return (
<article className={styles.card}>
<div className={styles.picture}>
<Image
className={styles.image}
src={props.image ?? "/images/team-member-placeholder.svg"}
alt={`Picture of ${props.name}`}
/>
</div>
<h1 className={styles.name}>{props.name}</h1>
<h2 className={styles.role}>{props.role}</h2>
<div className={styles.description}>{props.children}</div>
</article>
);
}

@ -15,13 +15,17 @@ import AltTab, {
import UnavailableContent, {
metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";
import { metadata as teamMemberMetadata } from "../content/playground/demo.teammember.mdx";
import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
import CodeyInfo, {
metadata as codeyMetadata,
} from "../content/playground/codey.team-member.mdx";
import { MiniEventCard } from "./MiniEventCard";
import { NewsCard } from "./NewsCard";
import { EventCard } from "./EventCard";
import { EventDescriptionCard } from "./EventDescriptionCard";
import { TeamMember } from "./TeamMember";
import { TeamMemberCard } from "./TeamMemberCard";
const events = [
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
@ -98,17 +102,27 @@ export function TeamMemberDemo() {
</div>
<hr />
<div className={styles.teamMembers}>
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...teamMemberMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
<TeamMember {...dogeMetadata} />
</div>
</div>
);
}
export function TeamMemberCardDemo() {
return (
<div className={styles.teamMemberCardDemo}>
<TeamMemberCard {...codeyMetadata}>
<CodeyInfo />
</TeamMemberCard>
</div>
);
}

@ -0,0 +1,9 @@
export const metadata = {
name: "Codey",
role: "Mascot",
image: "/images/playground/codeyHi.png"
}
The one, the only, Codey! Codey is ecstatic to be your mascot for this term.
Codey loves programming and playing on their laptop. You can often find Codey
posing for event promo graphics, or chilling in the CSC discord.

@ -1,5 +0,0 @@
export const metadata = {
name: "Name Name",
role: "Role",
src: "images/playground/team-member.png"
}

@ -0,0 +1,5 @@
export const metadata = {
name: "Woof Woof",
role: "Doge",
image: "/images/playground/doge.jpg"
}

4
next-env.d.ts vendored

@ -34,13 +34,13 @@ declare module "*.news.mdx" {
export default ReactComponent;
}
declare module "*.teammember.mdx" {
declare module "*.team-member.mdx" {
import { ComponentType } from "react";
interface TeamMemberMetadata {
name: string;
role: string;
src: string;
image?: string;
}
const ReactComponent: ComponentType;

@ -3,9 +3,12 @@ import {
NewsCardDemo,
EventDescriptionCardDemo,
EventCardDemo,
TeamMemberDemo
TeamMemberDemo,
TeamMemberCardDemo,
} from "../components/playground";
import { TeamMemberCard } from "../components/TeamMemberCard";
# Playground
## `<MiniEventCard />`
@ -49,3 +52,12 @@ The `<TeamMember />` component has an image of the team member along with their
It is used on the Meet the Team page for non executive members.
<TeamMemberDemo />
---
## `<TeamMemberCard />`
The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
display information about the execs: prez, VP, trez, AVP, and syscom overlord.
<TeamMemberCardDemo />

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 B

@ -0,0 +1,3 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" fill="#5CAFF9" fill-opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 174 B

Loading…
Cancel
Save