Meet the Team page #94
Labels
No Label
a11y
Backlog
Blocked
Bug
Content
Dependencies
Design
Feature Request
Good First Issue
In Progress
Performance
Priority - High
Priority - Low
Priority - Medium
Untriaged
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: www/www-new#94
Loading…
Reference in New Issue
No description provided.
Delete Branch "feat/meet-the-team-page"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Includes mobile Team Member Card
Closes #9
Closes #42
@ -0,0 +1,7 @@
---
name: Gordon Le
role: Vice President
image: /images/team/exec/Exec_GordonLe.jpg
Non-Mac OS filesystems are case sensitive, so this will 404, since the file ends with a
JPG
, notjpg
. There's a few other images that have the same problem, could you fix that up? Thanks!@ -55,1 +55,3 @@
@media only screen and (max-width: calc(375rem / 16)) {
/* Popup */
.popup_background {
We are using camelCase class names in css, and not snake_case
@ -0,0 +72,4 @@
<Bubble>
<div className={styles.elections}>
<h2 className={styles.election_subheading}>Elections</h2>
<ElectionContent />
You can inline this
@ -0,0 +36,4 @@
return windowSize;
}
export default useWindowDimension;
avoid default exports as that prevents auto imports
@ -0,0 +18,4 @@
.map((name) => name.slice(0, -1 * fileType.length));
}
export async function getExecContent(fileName: string, convert = true) {
getExec is fine
@ -0,0 +1,39 @@
import { useEffect, useState } from "react";
Since you created a new folder, you should also add it to the
lint
command inpackage.json
both
lint
andlint:fix
right?yep!
Font size for non-execs is too small
There's a lot of space in the bottom
@ -0,0 +25,4 @@
execs: SerializedExec[];
}
export default function MeetTheTeam({ execs }: Props) {
nit-pick: This should match the name of the file, so function name should be
Team
I'm wondering if we should dynamically create image paths, instead of hardcoding image paths 🤔 @n3parikh thoughts?
One change I think would be worth making would be to drop the
exec
/systems
/programme
/website
folder, and then also get rid of the team prefix on each image. I don't think those provide much use, and if people are on multiple teams, or change teams, it's more work to handle.So the end strcture would be
public/images/team/FirstLast.jpg
.Dynamic image paths sounds good to me. Doing the above change would make it a bit easier too.
If we dynamically imported img paths, how should I create the array of members in the
.json
files? If we mapped through the img files, thename
field we can prolly extrapolate from the file name, but what about therole
? @n3parikh @a3thakra@b38peng the actual json files or .md files will not have an
image
field. But you will be writing a function inside thelib/team
file that finds an image for a person with some name. You can then use this function for dynamically generating the "image" field for the metadata.The nodejs fs API docs should be helpful. https://nodejs.org/api/fs.html
@ -0,0 +1,7 @@
---
name: Gordon Le
role: Vice President
image: /images/team/exec/Exec_GordonLe.JPG
Sorry, I should have been more clear, can you change the file exstenstion instead, and just make everything lowercase, for consistency. It'll make the code to generate the URL simpler as well.
@ -0,0 +103,4 @@
);
}
async function getMemberImage(team: Omit<Metadata, "image">[]) {
getTeamWithImages
@ -0,0 +122,4 @@
)) as SerializedExec[];
const programme = await getMemberImage(programmeData);
const website = await getMemberImage(websiteData);
const systems = await getMemberImage(systemsData);
We can do all of this at the same time, no need to wait for waiting for one team before proceeding to the next.
@ -21,0 +37,4 @@
<h2 className={styles.role}>{role}</h2>
<div className={styles.description}>{children}</div>
</article>
{isOpen && (
isOpen && width <= 768
@ -78,0 +92,4 @@
padding: calc(20rem / 16) calc(40rem / 16);
left: 0;
top: 50%;
animation: popup 0.7s forwards;
rn, there's no animation when we're closing the popup. We can fix that by always rendering the popup, but hiding it on desktop screens, and only toggling a class on mobiles.
This seems to be from the Bubble component :o @a3thakra
@ -0,0 +50,4 @@
}
.elections {
margin-top: 6rem;
Looks like it's coming from here
@ -0,0 +53,4 @@
margin-top: 6rem;
}
.electionSubheading {
Also here,
h2
have a default margin-top of 32px, so you would need to make that 0 here.oH my bad thanks!!
@ -0,0 +21,4 @@
import styles from "./team.module.css";
// TODO: link News page in Elections
Link to homepage
maybe add an id to the news container, and make that a part of the link.
On an iPhone X:
Looks good apart from that one bug. Great job @b38peng!
HIT THAT BUTTON YAY
https://media.giphy.com/media/vMNoKKznOrUJi/giphy.gif
Ugh 🤦