Skip to content

Commit 564b40c

Browse files
Games4DoritosGames4Doritos
committed
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
1 parent d65832e commit 564b40c

2 files changed

Lines changed: 53 additions & 91 deletions

File tree

‎client/src/pages/about.tsx‎

Lines changed: 52 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Image from "next/image";
22
import Link from "next/link";
3+
import LandingPlaceholder from "../../public/landing_placeholder.png";
34

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

67
export default function AboutPage() {
78
const { data: committee, isPending, error, isError } = useCommittee();
89

9-
const topRow: ApiMember[] = [];
10-
const bottomRow: ApiMember[] = [];
11-
//lists that will be populated with member objects in the committee
10+
const committeeList: ApiMember[] = [];
11+
//List that will be populated with member objects in the committee
1212
const roleOrder = [
1313
"President",
1414
"Vice President",
@@ -43,11 +43,9 @@ export default function AboutPage() {
4343
<div className="relative aspect-[4/3] w-full flex-shrink-0 overflow-hidden rounded-2xl bg-light_2 md:w-96 lg:w-[32rem]">
4444
<div className="flex h-full w-full items-center justify-center">
4545
<Image
46-
src="/landing_placeholder.png"
46+
src={LandingPlaceholder}
4747
alt="/landing_placeholder.png"
48-
width={128}
49-
height={128}
50-
className="h-[90%] w-[90%]"
48+
fill={true}
5149
/>
5250
</div>
5351
</div>
@@ -65,34 +63,57 @@ export default function AboutPage() {
6563
function committeeImage(profilePic: string) {
6664
return (
6765
<Image
68-
src={profilePic === null ? "/landing_placeholder.png" : profilePic}
66+
src={profilePic === null ? LandingPlaceholder : profilePic}
6967
alt="/landing_placeholder.png"
70-
width={134}
71-
height={144}
72-
className="h-[9rem] w-[8.4rem]"
68+
width={132}
69+
height={140}
70+
className="h-[8.75rem] w-[8.25rem]"
7371
/>
7472
);
7573
}
7674

75+
function committeePortrait(committeeMember: ApiMember, id: number) {
76+
return (
77+
<>
78+
<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">
79+
{committeeMember.pk === 0 ? (
80+
committeeImage(committeeMember.profile_picture)
81+
) : (
82+
<Link href={`/members/${committeeMember.pk}`}>
83+
{committeeImage(committeeMember.profile_picture)}
84+
</Link>
85+
)}
86+
</div>
87+
<div className="text-md pl-3 text-left font-firaCode leading-tight">
88+
<p className="inline-block max-w-56 bg-card px-2 py-1 text-white">
89+
<text className="pr-2">
90+
{committeeMember.pk === 0 ? (
91+
<>{committeeMember.name}</>
92+
) : (
93+
<Link href={`/members/${committeeMember.pk}`}>
94+
{committeeMember.name}
95+
</Link>
96+
)}
97+
</text>
98+
<text className="text-left">{committeeMember.pronouns}</text>
99+
</p>
100+
<p className="w-full bg-card px-2 py-1 text-primary">
101+
{roleOrder[id]}
102+
</p>
103+
</div>
104+
</>
105+
);
106+
}
107+
77108
if (isPending) {
78109
for (let i = 0; i < 8; i++) {
79-
if (i < 4) {
80-
topRow.push({
81-
name: "Loading...",
82-
pronouns: "",
83-
profile_picture: "/landing_placeholder.png",
84-
about: "",
85-
pk: 0,
86-
});
87-
} else {
88-
bottomRow.push({
89-
name: "Loading...",
90-
pronouns: "",
91-
profile_picture: "/landing_placeholder.png",
92-
about: "",
93-
pk: 0,
94-
});
95-
}
110+
committeeList.push({
111+
name: "Loading...",
112+
pronouns: "",
113+
profile_picture: "/landing_placeholder.png",
114+
about: "",
115+
pk: 0,
116+
});
96117
}
97118
} else if (isError) {
98119
const errorMessage =
@@ -112,11 +133,7 @@ export default function AboutPage() {
112133
);
113134
} else {
114135
for (let i = 0; i < 8; i++) {
115-
if (i < 4) {
116-
topRow.push(committee[i]);
117-
} else {
118-
bottomRow.push(committee[i]);
119-
}
136+
committeeList.push(committee[i]);
120137
}
121138
}
122139

@@ -126,68 +143,13 @@ export default function AboutPage() {
126143
{/* Portraits Section - DARK - Full Width */}
127144
<section className="w-full bg-background px-6 py-10 pb-20 pt-16 md:px-10">
128145
<div className="mx-auto max-w-6xl">
129-
{/* Top row - 4 Presidents */}
130146
<div className="flex flex-wrap justify-center gap-6 md:gap-10">
131-
{topRow.map((member, idx) => (
147+
{committeeList.map((member, idx) => (
132148
<div
133149
key={`top-${idx}`}
134150
className="flex flex-col items-start gap-0"
135151
>
136-
<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">
137-
{member.pk === 0 ? (
138-
committeeImage(member.profile_picture)
139-
) : (
140-
<Link href={`/members/${member.pk}`}>
141-
{committeeImage(member.profile_picture)}
142-
</Link>
143-
)}
144-
</div>
145-
<div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
146-
<p className="inline-block bg-card px-2 py-1 text-white">
147-
{member.pk === 0 ? (
148-
<>{member.name}</>
149-
) : (
150-
<Link href={`/members/${member.pk}`}>{member.name}</Link>
151-
)}
152-
{member.pronouns}
153-
</p>
154-
<p className="inline-block bg-card px-2 py-1 text-primary">
155-
{roleOrder[idx]}
156-
</p>
157-
</div>
158-
</div>
159-
))}
160-
</div>
161-
162-
{/* Bottom row - 4 other roles */}
163-
<div className="mt-10 flex flex-wrap justify-center gap-6 md:gap-10">
164-
{bottomRow.map((member, idx) => (
165-
<div
166-
key={`bottom-${idx}`}
167-
className="flex flex-col items-start gap-0"
168-
>
169-
<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">
170-
{member.pk === 0 ? (
171-
committeeImage(member.profile_picture)
172-
) : (
173-
<Link href={`/members/${member.pk}`}>
174-
{committeeImage(member.profile_picture)}
175-
</Link>
176-
)}
177-
</div>
178-
<div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
179-
<p className="inline-block bg-card px-2 py-1 text-white">
180-
{member.pk === 0 ? (
181-
<>{member.name}</>
182-
) : (
183-
<Link href={`/members/${member.pk}`}>{member.name}</Link>
184-
)}
185-
{member.pronouns}
186-
</p>
187-
<p className="inline-block bg-card px-2 py-1 text-primary">
188-
{roleOrder[4 + idx]}
189-
</p>
190-
</div>
152+
{committeePortrait(member, idx)}
191153
</div>
192154
))}
193155
</div>

‎server/game_dev/models.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ class SocialMedia(models.Model):
8282
socialMediaUserName = models.CharField(max_length=200, blank=True)
8383

8484
def __str__(self):
85-
return f"{self.socialMediaName} link for {self.member.name}"
85+
return f"{self.socialMediaUserName} link for {self.member.name}"
8686

8787

8888
class Committee(models.Model):

0 commit comments

Comments
 (0)