Open
Conversation
- 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
- 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)
laurenpudz
requested changes
Feb 16, 2026
Comment on lines
+67
to
+73
| <Image | ||
| src={profilePic === null ? "/landing_placeholder.png" : profilePic} | ||
| alt="/landing_placeholder.png" | ||
| width={134} | ||
| height={144} | ||
| className="h-[9rem] w-[8.4rem]" | ||
| /> |
Contributor
There was a problem hiding this comment.
just noticed that images are not maintaining aspect ratio here and becoming warped
| alt="/landing_placeholder.png" | ||
| width={134} | ||
| height={144} | ||
| className="h-[9rem] w-[8.4rem]" |
Contributor
There was a problem hiding this comment.
do these have a tailwind utility class equivalent?
Comment on lines
+136
to
+152
| <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} |
Contributor
There was a problem hiding this comment.
can we refactor this out into a component instead of repeating it twice?
| <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 */} |
Contributor
There was a problem hiding this comment.
If we enforce two rows of 4 portraits the rows will wrap individually, so we end up with a strange wrapping situation (see screenshot)
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...
Contributor
There was a problem hiding this comment.
(ignore the navbar, that was just screenshot weirdness, im talking about the positioning of the frames)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Change Summary
-Increased the font size of the committee portrait labels to sm
Change Form
Other Information
Related issue