TeamMemberCard
This commit is contained in:
parent
7f88950f78
commit
4777b5f274
|
@ -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"
|
||||
}
|
|
@ -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…
Reference in New Issue