Skip to content

Commit 07a3cca

Browse files
Games4DoritosGames4Doritos
committed
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
1 parent 1df3289 commit 07a3cca

6 files changed

Lines changed: 83 additions & 30 deletions

File tree

‎client/src/components/main/MemberProfile.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export type MemberProfileData = {
2020
link: string;
2121
socialMediaUserName: string;
2222
}[];
23+
pk: number;
2324
};
2425

2526
type MemberProfileProps = {

‎client/src/hooks/useCommittee.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ export type ApiMember = {
88
profile_picture: string;
99
pronouns: string;
1010
about: string;
11+
social_media?: {
12+
link: string;
13+
socialMediaUserName: string;
14+
}[];
15+
pk: number;
1116
};
1217

1318
export function useCommittee() {

‎client/src/hooks/useMember.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type ApiMember = {
1111
link: string;
1212
socialMediaUserName: string;
1313
}[];
14+
pk: number;
1415
};
1516

1617
// return api member, import id number from router, is not enabled if not a number type

‎client/src/pages/about.tsx‎

Lines changed: 74 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Image from "next/image";
2+
import Link from "next/link";
23

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

@@ -69,13 +70,15 @@ export default function AboutPage() {
6970
pronouns: "",
7071
profile_picture: "/landing_placeholder.png",
7172
about: "",
73+
pk: 0,
7274
});
7375
} else {
7476
bottomRow.push({
7577
name: "Loading...",
7678
pronouns: "",
7779
profile_picture: "/landing_placeholder.png",
7880
about: "",
81+
pk: 0,
7982
});
8083
}
8184
}
@@ -109,7 +112,7 @@ export default function AboutPage() {
109112
<main className="min-h-screen bg-background">
110113
{about}
111114
{/* Portraits Section - DARK - Full Width */}
112-
<section className="w-full bg-background px-6 py-10 pt-16 md:px-10">
115+
<section className="w-full bg-background px-6 py-10 pb-20 pt-16 md:px-10">
113116
<div className="mx-auto max-w-6xl">
114117
{/* Top row - 4 Presidents */}
115118
<div className="flex flex-wrap justify-center gap-6 md:gap-10">
@@ -118,22 +121,43 @@ export default function AboutPage() {
118121
key={`top-${idx}`}
119122
className="flex flex-col items-start gap-0"
120123
>
121-
<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">
122-
<Image
123-
src={
124-
member.profile_picture === null
125-
? "/landing_placeholder.png"
126-
: member.profile_picture
127-
}
128-
alt="/landing_placeholder.png"
129-
width={108}
130-
height={108}
131-
className="h-[7.25rem] w-[6.75rem]"
132-
/>
124+
<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">
125+
{member.pk === 0 ? (
126+
<Image
127+
src={
128+
member.profile_picture === null
129+
? "/landing_placeholder.png"
130+
: member.profile_picture
131+
}
132+
alt="/landing_placeholder.png"
133+
width={134}
134+
height={144}
135+
className="h-[9rem] w-[8.4rem]"
136+
/>
137+
) : (
138+
<Link href={`/members/${member.pk}`}>
139+
<Image
140+
src={
141+
member.profile_picture === null
142+
? "/landing_placeholder.png"
143+
: member.profile_picture
144+
}
145+
alt="/landing_placeholder.png"
146+
width={134}
147+
height={144}
148+
className="h-[9rem] w-[8.4rem]"
149+
/>
150+
</Link>
151+
)}
133152
</div>
134-
<div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
153+
<div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
135154
<p className="inline-block bg-card px-2 py-1 text-white">
136-
{member.name} {member.pronouns}
155+
{member.pk === 0 ? (
156+
<>{member.name}</>
157+
) : (
158+
<Link href={`/members/${member.pk}`}>{member.name}</Link>
159+
)}
160+
{member.pronouns}
137161
</p>
138162
<p className="inline-block bg-card px-2 py-1 text-primary">
139163
{roleOrder[idx]}
@@ -150,22 +174,43 @@ export default function AboutPage() {
150174
key={`bottom-${idx}`}
151175
className="flex flex-col items-start gap-0"
152176
>
153-
<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">
154-
<Image
155-
src={
156-
member.profile_picture === null
157-
? "/landing_placeholder.png"
158-
: member.profile_picture
159-
}
160-
alt="/landing_placeholder.png"
161-
width={108}
162-
height={108}
163-
className="h-[7.25rem] w-[6.75rem]"
164-
/>
177+
<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">
178+
{member.pk === 0 ? (
179+
<Image
180+
src={
181+
member.profile_picture === null
182+
? "/landing_placeholder.png"
183+
: member.profile_picture
184+
}
185+
alt="/landing_placeholder.png"
186+
width={134}
187+
height={144}
188+
className="h-[9rem] w-[8.4rem]"
189+
/>
190+
) : (
191+
<Link href={`/members/${member.pk}`}>
192+
<Image
193+
src={
194+
member.profile_picture === null
195+
? "/landing_placeholder.png"
196+
: member.profile_picture
197+
}
198+
alt="/landing_placeholder.png"
199+
width={134}
200+
height={144}
201+
className="h-[9rem] w-[8.4rem]"
202+
/>
203+
</Link>
204+
)}
165205
</div>
166-
<div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
206+
<div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
167207
<p className="inline-block bg-card px-2 py-1 text-white">
168-
{member.name} {member.pronouns}
208+
{member.pk === 0 ? (
209+
<>{member.name}</>
210+
) : (
211+
<Link href={`/members/${member.pk}`}>{member.name}</Link>
212+
)}
213+
{member.pronouns}
169214
</p>
170215
<p className="inline-block bg-card px-2 py-1 text-primary">
171216
{roleOrder[4 + idx]}

‎server/game_dev/serializers.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,5 @@ class Meta:
103103
"about",
104104
"pronouns",
105105
"social_media",
106+
"pk"
106107
]

‎server/game_dev/views.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ def get_queryset(self):
8585
outputList = []
8686
roleOrder = ("P", "VP", "SEC", "TRE", "MARK", "EVE", "PRO", "FRE")
8787
placeholderMember = {"name": "Position not filled", "profile_picture": "url('/landing_placeholder.png')",
88-
"about": "", "pronouns": ""}
88+
"about": "", "pronouns": "", "pk": 0}
8989
for i in roleOrder:
9090
try:
9191
cur = Committee.objects.get(role=i).id

0 commit comments

Comments
 (0)