Skip to content

Issue 107 committee page frontend fixes #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Games4Doritos wants to merge 2 commits into
base: main
Choose a base branch
from
+55 −30
Open

Issue 107 committee page frontend fixes #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07a3cca
Solved all issues?
Games4Doritos Feb 14, 2026
d65832e
Reduced <Image/> repetition
Games4Doritos Feb 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/src/components/main/MemberProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export type MemberProfileData = {
link: string;
socialMediaUserName: string;
}[];
pk: number;
};

type MemberProfileProps = {
Expand Down
5 changes: 5 additions & 0 deletions client/src/hooks/useCommittee.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ export type ApiMember = {
profile_picture: string;
pronouns: string;
about: string;
social_media?: {
link: string;
socialMediaUserName: string;
}[];
pk: number;
};

export function useCommittee() {
Expand Down
1 change: 1 addition & 0 deletions client/src/hooks/useMember.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ type ApiMember = {
link: string;
socialMediaUserName: string;
}[];
pk: number;
};

// return api member, import id number from router, is not enabled if not a number type
Expand Down
75 changes: 46 additions & 29 deletions client/src/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Image from "next/image";
import Link from "next/link";

import { ApiMember, useCommittee } from "@/hooks/useCommittee";

Expand Down Expand Up @@ -61,6 +62,18 @@ export default function AboutPage() {
</>
);

function committeeImage(profilePic: string) {
return (
<Image
src={profilePic === null ? "/landing_placeholder.png" : profilePic}
alt="/landing_placeholder.png"
width={134}
height={144}
className="h-[9rem] w-[8.4rem]"
Copy link
Contributor

@laurenpudz laurenpudz Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do these have a tailwind utility class equivalent?

/>
Comment on lines +67 to +73
Copy link
Contributor

@laurenpudz laurenpudz Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just noticed that images are not maintaining aspect ratio here and becoming warped

Image

);
}

if (isPending) {
for (let i = 0; i < 8; i++) {
if (i < 4) {
Expand All @@ -69,13 +82,15 @@ export default function AboutPage() {
pronouns: "",
profile_picture: "/landing_placeholder.png",
about: "",
pk: 0,
});
} else {
bottomRow.push({
name: "Loading...",
pronouns: "",
profile_picture: "/landing_placeholder.png",
about: "",
pk: 0,
});
}
}
Expand Down Expand Up @@ -109,7 +124,7 @@ export default function AboutPage() {
<main className="min-h-screen bg-background">
{about}
{/* Portraits Section - DARK - Full Width */}
<section className="w-full bg-background px-6 py-10 pt-16 md:px-10">
<section className="w-full bg-background px-6 py-10 pb-20 pt-16 md:px-10">
<div className="mx-auto max-w-6xl">
{/* Top row - 4 Presidents */}
Copy link
Contributor

@laurenpudz laurenpudz Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we enforce two rows of 4 portraits the rows will wrap individually, so we end up with a strange wrapping situation (see screenshot)

Image Is it possible just to do one singular line of portraits and let it wrap depending on screen size? If you want to separate execs from the rest of committee (or some other kind of distinction) its valid to keep in two rows :) Also the comment "4 presidents" is a bit misleading...

Copy link
Contributor

@laurenpudz laurenpudz Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(ignore the navbar, that was just screenshot weirdness, im talking about the positioning of the frames)

<div className="flex flex-wrap justify-center gap-6 md:gap-10">
Expand All @@ -118,22 +133,23 @@ export default function AboutPage() {
key={`top-${idx}`}
className="flex flex-col items-start gap-0"
>
<div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
<Image
src={
member.profile_picture === null
? "/landing_placeholder.png"
: member.profile_picture
}
alt="/landing_placeholder.png"
width={108}
height={108}
className="h-[7.25rem] w-[6.75rem]"
/>
<div className="relative flex h-56 w-56 items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
{member.pk === 0 ? (
committeeImage(member.profile_picture)
) : (
<Link href={`/members/${member.pk}`}>
{committeeImage(member.profile_picture)}
</Link>
)}
</div>
<div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
<div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
<p className="inline-block bg-card px-2 py-1 text-white">
{member.name} {member.pronouns}
{member.pk === 0 ? (
<>{member.name}</>
) : (
<Link href={`/members/${member.pk}`}>{member.name}</Link>
)}
{member.pronouns}
Comment on lines +136 to +152
Copy link
Contributor

@laurenpudz laurenpudz Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we refactor this out into a component instead of repeating it twice?

</p>
<p className="inline-block bg-card px-2 py-1 text-primary">
{roleOrder[idx]}
Expand All @@ -150,22 +166,23 @@ export default function AboutPage() {
key={`bottom-${idx}`}
className="flex flex-col items-start gap-0"
>
<div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
<Image
src={
member.profile_picture === null
? "/landing_placeholder.png"
: member.profile_picture
}
alt="/landing_placeholder.png"
width={108}
height={108}
className="h-[7.25rem] w-[6.75rem]"
/>
<div className="relative flex h-56 w-56 items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
{member.pk === 0 ? (
committeeImage(member.profile_picture)
) : (
<Link href={`/members/${member.pk}`}>
{committeeImage(member.profile_picture)}
</Link>
)}
</div>
<div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
<div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
<p className="inline-block bg-card px-2 py-1 text-white">
{member.name} {member.pronouns}
{member.pk === 0 ? (
<>{member.name}</>
) : (
<Link href={`/members/${member.pk}`}>{member.name}</Link>
)}
{member.pronouns}
</p>
<p className="inline-block bg-card px-2 py-1 text-primary">
{roleOrder[4 + idx]}
Expand Down
1 change: 1 addition & 0 deletions server/game_dev/serializers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,5 @@ class Meta:
"about",
"pronouns",
"social_media",
"pk"
]
2 changes: 1 addition & 1 deletion server/game_dev/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ def get_queryset(self):
outputList = []
roleOrder = ("P", "VP", "SEC", "TRE", "MARK", "EVE", "PRO", "FRE")
placeholderMember = {"name": "Position not filled", "profile_picture": "url('/landing_placeholder.png')",
"about": "", "pronouns": ""}
"about": "", "pronouns": "", "pk": 0}
for i in roleOrder:
try:
cur = Committee.objects.get(role=i).id
Expand Down