TeamMemberCard

This commit is contained in:
Amy Wang 2021-05-24 09:21:34 +00:00 committed by Adi Thakral
parent 7f88950f78
commit 4777b5f274
15 changed files with 212 additions and 25 deletions

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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;
}
} */

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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.

View File

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

View File

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

4
next-env.d.ts vendored
View File

@ -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;

View File

@ -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

View File

@ -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