Skip to content

Commit

Permalink
Fix description
Browse files Browse the repository at this point in the history
  • Loading branch information
@lhvy
lhvy committed Jan 17, 2024
1 parent 0658acf commit 423da81
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 41 deletions.
15 changes: 6 additions & 9 deletions components/team/ExecCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,24 @@ import Image from "next/image";

import styles from "styles/modules/ExecCard.module.scss";

// TODO: consider separating into component that's more generic, and having
// ExecCard inherit from that
// TODO: consider separating into component that's more generic, and having ExecCard inherit from that
const ExecCard = ({ data, colour }) => {
const { name, image, description, role } = data;

// TODO: fix description not showing
return (
<div className="col-md-4">
<div className="card-person">
<div className={`${styles["card-person-style" + colour]} limit`}>
<div className={styles["card-person-animation"]} />
<Image alt={name} src={image} className="card-img-top" />
<div className={styles[`go-corner-style${colour}`]}>
<div className={styles["go-arrow"]} />
</div>
{description === "" || description === undefined ? null : (
<div className={styles["card-person-animation"]} />
)}
<Image alt={name} src={image} className={styles["card-img-top"]} />
<p className={styles["person-text"]}>{description}</p>
</div>
</div>
<div className="card-body text-center pt-2 pb-4">
<h4 className="about-name">{name}</h4>
{role === "" ? null : <p className="about-role">{role}</p>}
{/* {description === "" ? null : <p className={styles["person-text"]}>{description}</p>} */}
</div>
</div>
);
Expand Down
17 changes: 17 additions & 0 deletions data/TeamData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -540,6 +540,7 @@ const MEMBERS = [
{
// 2023
exec: [
// titles will need to change pending EGM
{
sectionName: "Executive",
members: [
Expand Down Expand Up @@ -713,28 +714,33 @@ const MEMBERS = [
[
{
image: Alex_Image,
description: ``,
name: "Alexander Lee",
role: "Co-President",
},
{
image: Sam_Image,
description: ``,
name: "Samuel Katz",
role: "Co-President",
},
],
[
{
image: Doris_Image_2024,
description: ``,
name: "Doris Yang",
role: "Arc Delegate",
},
{
image: Arya_Image,
description: ``,
name: "Arya Ahluwalia",
role: "Secretary",
},
{
image: Anna_Image,
description: ``,
name: "Anna Tokarev",
role: "Treasurer",
},
Expand All @@ -747,50 +753,59 @@ const MEMBERS = [
[
{
image: Dinara_Image,
description: ``,
name: "Dinara Jayarathna",
role: "Charities",
},
{
image: Inika_Image,
description: ``,
name: "Inika Weber",
role: "Charities",
},
{
image: Lucas_Image,
description: ``,
name: "Lucas Harvey",
role: "IT (Technical)",
},
],
[
{
image: Nicholas_Image,
description: ``,
name: "Nicholas Langford",
role: "IT (Project Management)",
},
{
image: Kelly_Image,
description: ``,
name: "Kelly Nguyen",
role: "Marketing",
},
{
image: Maggie_Image,
description: ``,
name: "Maggie Lam",
role: "Marketing",
},
],
[
{
image: Imogen_Image,
description: ``,
name: "Imogen Wills",
role: "Publications",
},
{
image: Kiran_Image,
description: ``,
name: "Kiran Singh",
role: "Socials",
},
{
image: Sienna_Image,
description: ``,
name: "Sienna Strauss",
role: "Socials",
},
Expand All @@ -803,11 +818,13 @@ const MEMBERS = [
// [
// {
// image: Name_Image,
// description: ``,
// name: "First Last",
// role: "",
// },
// {
// image: Name_Image,
// description: ``,
// name: "First Last",
// role: "",
// },
Expand Down
1 change: 0 additions & 1 deletion pages/team.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ const Team = () => {
</Row>
{members.subcoms.map((portfolio, index) => (
<>
{/* Only have separators between subcoms */}
{index !== 0 && <hr />}
<Subcom
key={`subcom-${portfolio.name}-${index}`}
Expand Down
Binary file modified public/img/exec/2023/Jack.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 21 additions & 31 deletions styles/modules/ExecCard.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,28 @@ $card-colors: (
text-align: center;
overflow: hidden;

p {
// This is needed to stop the image tag from causing a
// small amount of whitespace at the bottom of the surrounding div
// which messes with the hover animation.
* {
display: block !important;
}

& p {
position: absolute;
color: white;
top: 50%;
z-index: -1;
opacity: 0;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}

&:hover p {
z-index: 1;
opacity: 1;
transition: opacity 0.25s ease-in;
}

// Little quarter circle in top right
Expand All @@ -64,41 +79,16 @@ $card-colors: (
top: -16px;
right: -16px;
background-color: $value;
height: 32px;
width: 32px;
border-radius: 32px;
height: 48px;
width: 48px;
border-radius: 0 0 0 24px;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform 0.25s ease-out;
}

/*&:hover .card-person-animation {
transform: scale(50);
&:hover .card-person-animation {
transform: scale(20);
}
&:hover p {
z-index: 1;
}*/
}

.go-corner-#{$color} {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 40px;
height: 40px;
overflow: hidden;
top: 0;
right: 0;
background-color: $value;
border-radius: 0 4px 0 32px;
}
}

.go-arrow {
margin-top: -4px;
margin-right: -4px;
color: white;
font-family: courier, sans;
}

0 comments on commit 423da81

Please sign in to comment.