From 07a3cca43ccca3bbb2cb65f1c36c3a9047ee869d Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Sat, 14 Feb 2026 14:12:27 +0800 Subject: [PATCH 1/6] Solved all issues? - Increased the font size of the committee portrait labels from 0.5rem to sm (0.875rem = 14px for my device) - Increased committee photo and frame sizes to accommodate new font size. The width and height of the frames are now a nice number of 56 in tailwind = 14rem. The ratios of photo width: frame width (0.6) and photo height: frame height (0.6444..) have been maintained with this adjustment, rounded to 1 decimal place (9rem for photo height and 8.4rem for photo width) - Gave the committee section a bottom padding of 20 (tailwind), so there is now equal padding on the bottom and top - Updated MemberSerializer to now include the Member Object's primary key (integer id), denoted as pk. This is necessary for make committee portraits link to their respective member pages - Updated all instances in the codebase where a Member object if fetched, adding the pk attribute to match the updated MemberSerializer - Added conditional rendering logic in the about page: each committee member's photo and name will render as wrapped in a Link to their respective member page, only if the fetched Member object does not have the placeholder pk value of 0 (don't worry, the member id's start at 1, so 0 is never valid), otherwise it will render the photo and name without Link wrappers --- client/src/components/main/MemberProfile.tsx | 1 + client/src/hooks/useCommittee.ts | 5 + client/src/hooks/useMember.ts | 1 + client/src/pages/about.tsx | 103 +++++++++++++------ server/game_dev/serializers.py | 1 + server/game_dev/views.py | 2 +- 6 files changed, 83 insertions(+), 30 deletions(-) diff --git a/client/src/components/main/MemberProfile.tsx b/client/src/components/main/MemberProfile.tsx index 13e9e434..859d4b6b 100644 --- a/client/src/components/main/MemberProfile.tsx +++ b/client/src/components/main/MemberProfile.tsx @@ -20,6 +20,7 @@ export type MemberProfileData = { link: string; socialMediaUserName: string; }[]; + pk: number; }; type MemberProfileProps = { diff --git a/client/src/hooks/useCommittee.ts b/client/src/hooks/useCommittee.ts index 69c6fb8a..5759947d 100644 --- a/client/src/hooks/useCommittee.ts +++ b/client/src/hooks/useCommittee.ts @@ -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() { diff --git a/client/src/hooks/useMember.ts b/client/src/hooks/useMember.ts index c564657e..0d1f0581 100644 --- a/client/src/hooks/useMember.ts +++ b/client/src/hooks/useMember.ts @@ -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 diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index c64544aa..e6d85490 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -1,4 +1,5 @@ import Image from "next/image"; +import Link from "next/link"; import { ApiMember, useCommittee } from "@/hooks/useCommittee"; @@ -69,6 +70,7 @@ export default function AboutPage() { pronouns: "", profile_picture: "/landing_placeholder.png", about: "", + pk: 0, }); } else { bottomRow.push({ @@ -76,6 +78,7 @@ export default function AboutPage() { pronouns: "", profile_picture: "/landing_placeholder.png", about: "", + pk: 0, }); } } @@ -109,7 +112,7 @@ export default function AboutPage() {
{about} {/* Portraits Section - DARK - Full Width */} -
+
{/* Top row - 4 Presidents */}
@@ -118,22 +121,43 @@ export default function AboutPage() { key={`top-${idx}`} className="flex flex-col items-start gap-0" > -
- /landing_placeholder.png +
+ {member.pk === 0 ? ( + /landing_placeholder.png + ) : ( + + /landing_placeholder.png + + )}
-
+

- {member.name} {member.pronouns} + {member.pk === 0 ? ( + <>{member.name} + ) : ( + {member.name} + )} + {member.pronouns}

{roleOrder[idx]} @@ -150,22 +174,43 @@ export default function AboutPage() { key={`bottom-${idx}`} className="flex flex-col items-start gap-0" > -

- /landing_placeholder.png +
+ {member.pk === 0 ? ( + /landing_placeholder.png + ) : ( + + /landing_placeholder.png + + )}
-
+

- {member.name} {member.pronouns} + {member.pk === 0 ? ( + <>{member.name} + ) : ( + {member.name} + )} + {member.pronouns}

{roleOrder[4 + idx]} diff --git a/server/game_dev/serializers.py b/server/game_dev/serializers.py index 4d278157..386ea930 100644 --- a/server/game_dev/serializers.py +++ b/server/game_dev/serializers.py @@ -103,4 +103,5 @@ class Meta: "about", "pronouns", "social_media", + "pk" ] diff --git a/server/game_dev/views.py b/server/game_dev/views.py index 40ea5457..086119cf 100644 --- a/server/game_dev/views.py +++ b/server/game_dev/views.py @@ -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 From d65832eab7ec67ae0fc76aa3806a9529ecf5095b Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Sat, 14 Feb 2026 14:23:21 +0800 Subject: [PATCH 2/6] Reduced repetition - Removed repetition of the same Image component for each conditional render for the committee photos. This was done be simply turning the Image into a function called committeeImage(profilePic: string) --- client/src/pages/about.tsx | 60 ++++++++++---------------------------- 1 file changed, 16 insertions(+), 44 deletions(-) diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index e6d85490..00383324 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -62,6 +62,18 @@ export default function AboutPage() { ); + function committeeImage(profilePic: string) { + return ( + /landing_placeholder.png + ); + } + if (isPending) { for (let i = 0; i < 8; i++) { if (i < 4) { @@ -123,30 +135,10 @@ export default function AboutPage() { >

{member.pk === 0 ? ( - /landing_placeholder.png + committeeImage(member.profile_picture) ) : ( - /landing_placeholder.png + {committeeImage(member.profile_picture)} )}
@@ -176,30 +168,10 @@ export default function AboutPage() { >
{member.pk === 0 ? ( - /landing_placeholder.png + committeeImage(member.profile_picture) ) : ( - /landing_placeholder.png + {committeeImage(member.profile_picture)} )}
From 564b40c7e946b46e71cea3785ce5e6ce0a89be8e Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Wed, 18 Feb 2026 14:57:47 +0800 Subject: [PATCH 3/6] Fixed Some Redundancies - Reworked how the committee portraits are listed, such that they are all in one list and not separated into two rows - Fixed Image components to hopefully prevent warping, by setting the width and height props equal to the tailwinds-set height and width - Changed frame-photo dimension ratios, may need a future change - Replaced height and width props for the about section image with fill={true}, so the whole image space is actually filled - Statically imported landing_placeholder.png to be used for some elements - Refactored out the code for a whole committee portrait into a single function to be used in the mapping --- client/src/pages/about.tsx | 142 ++++++++++++++----------------------- server/game_dev/models.py | 2 +- 2 files changed, 53 insertions(+), 91 deletions(-) diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index 00383324..2140c487 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -1,14 +1,14 @@ import Image from "next/image"; import Link from "next/link"; +import LandingPlaceholder from "../../public/landing_placeholder.png"; import { ApiMember, useCommittee } from "@/hooks/useCommittee"; export default function AboutPage() { const { data: committee, isPending, error, isError } = useCommittee(); - const topRow: ApiMember[] = []; - const bottomRow: ApiMember[] = []; - //lists that will be populated with member objects in the committee + const committeeList: ApiMember[] = []; + //List that will be populated with member objects in the committee const roleOrder = [ "President", "Vice President", @@ -43,11 +43,9 @@ export default function AboutPage() {
/landing_placeholder.png
@@ -65,34 +63,57 @@ export default function AboutPage() { function committeeImage(profilePic: string) { return ( /landing_placeholder.png ); } + function committeePortrait(committeeMember: ApiMember, id: number) { + return ( + <> +
+ {committeeMember.pk === 0 ? ( + committeeImage(committeeMember.profile_picture) + ) : ( + + {committeeImage(committeeMember.profile_picture)} + + )} +
+
+

+ + {committeeMember.pk === 0 ? ( + <>{committeeMember.name} + ) : ( + + {committeeMember.name} + + )} + + {committeeMember.pronouns} +

+

+ {roleOrder[id]} +

+
+ + ); + } + if (isPending) { for (let i = 0; i < 8; i++) { - if (i < 4) { - topRow.push({ - name: "Loading...", - pronouns: "", - profile_picture: "/landing_placeholder.png", - about: "", - pk: 0, - }); - } else { - bottomRow.push({ - name: "Loading...", - pronouns: "", - profile_picture: "/landing_placeholder.png", - about: "", - pk: 0, - }); - } + committeeList.push({ + name: "Loading...", + pronouns: "", + profile_picture: "/landing_placeholder.png", + about: "", + pk: 0, + }); } } else if (isError) { const errorMessage = @@ -112,11 +133,7 @@ export default function AboutPage() { ); } else { for (let i = 0; i < 8; i++) { - if (i < 4) { - topRow.push(committee[i]); - } else { - bottomRow.push(committee[i]); - } + committeeList.push(committee[i]); } } @@ -126,68 +143,13 @@ export default function AboutPage() { {/* Portraits Section - DARK - Full Width */}
- {/* Top row - 4 Presidents */}
- {topRow.map((member, idx) => ( + {committeeList.map((member, idx) => (
-
- {member.pk === 0 ? ( - committeeImage(member.profile_picture) - ) : ( - - {committeeImage(member.profile_picture)} - - )} -
-
-

- {member.pk === 0 ? ( - <>{member.name} - ) : ( - {member.name} - )} - {member.pronouns} -

-

- {roleOrder[idx]} -

-
-
- ))} -
- - {/* Bottom row - 4 other roles */} -
- {bottomRow.map((member, idx) => ( -
-
- {member.pk === 0 ? ( - committeeImage(member.profile_picture) - ) : ( - - {committeeImage(member.profile_picture)} - - )} -
-
-

- {member.pk === 0 ? ( - <>{member.name} - ) : ( - {member.name} - )} - {member.pronouns} -

-

- {roleOrder[4 + idx]} -

-
+ {committeePortrait(member, idx)}
))}
diff --git a/server/game_dev/models.py b/server/game_dev/models.py index 2e4d5b28..bc579556 100644 --- a/server/game_dev/models.py +++ b/server/game_dev/models.py @@ -82,7 +82,7 @@ class SocialMedia(models.Model): socialMediaUserName = models.CharField(max_length=200, blank=True) def __str__(self): - return f"{self.socialMediaName} link for {self.member.name}" + return f"{self.socialMediaUserName} link for {self.member.name}" class Committee(models.Model): From 4230296d20d410dabc5fe62d4140a770c93666ce Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Wed, 18 Feb 2026 15:09:36 +0800 Subject: [PATCH 4/6] Fixed Type Checking? + undid something - Undid a change that is part of another pr (change name referencing a specific variable) --- client/src/pages/about.tsx | 2 +- server/game_dev/models.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index 2140c487..bffed6ed 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -1,6 +1,6 @@ import Image from "next/image"; import Link from "next/link"; -import LandingPlaceholder from "../../public/landing_placeholder.png"; +import LandingPlaceholder from "@/../public/landing_placeholder.png"; import { ApiMember, useCommittee } from "@/hooks/useCommittee"; diff --git a/server/game_dev/models.py b/server/game_dev/models.py index bc579556..2e4d5b28 100644 --- a/server/game_dev/models.py +++ b/server/game_dev/models.py @@ -82,7 +82,7 @@ class SocialMedia(models.Model): socialMediaUserName = models.CharField(max_length=200, blank=True) def __str__(self): - return f"{self.socialMediaUserName} link for {self.member.name}" + return f"{self.socialMediaName} link for {self.member.name}" class Committee(models.Model): From ceeb3c79020fcbb0476375d33e049319ab8a1895 Mon Sep 17 00:00:00 2001 From: Games4Doritos Date: Wed, 18 Feb 2026 15:34:20 +0800 Subject: [PATCH 5/6] Undid static import - Undid importing landing_placeholder.png statically, as the type is not accounted for in the project's config. --- client/src/pages/about.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index bffed6ed..909b9433 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -1,6 +1,5 @@ import Image from "next/image"; import Link from "next/link"; -import LandingPlaceholder from "@/../public/landing_placeholder.png"; import { ApiMember, useCommittee } from "@/hooks/useCommittee"; @@ -43,7 +42,7 @@ export default function AboutPage() {
/landing_placeholder.png @@ -63,7 +62,7 @@ export default function AboutPage() { function committeeImage(profilePic: string) { return ( /landing_placeholder.png Date: Wed, 18 Feb 2026 16:51:19 +0800 Subject: [PATCH 6/6] Fix committee profile pics warping --- client/src/pages/about.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index 909b9433..fee93f7e 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -61,13 +61,14 @@ export default function AboutPage() { function committeeImage(profilePic: string) { return ( - /landing_placeholder.png +
+ /landing_placeholder.png +
); }