478 club page redesign #492

AbhiramTadepalli · 2025-12-22T05:26:39Z

Implemented this design by @Isoscelestial: https://www.figma.com/design/snmEoRUgfjAZYSc6hqySkY/Wireframes-for-Jupiter?node-id=1356-3146&p=f&t=BIcwF2agOk5VNxpI-0

Created a Left column of details, contact info, and officers
Center-right column has an expandable description & upcoming events
Modified event card to look better on hover
Added hover transitions for lots of elements
Expandable Officer List
Moved tags to the Title area
Banner has no overlayed title text anymore
Added error states / info unavailable states
Details can show last event, last update to the club, founding date, and # members
Modified getDirectoryInfo in src/server/api/routers/club.ts and src/server/api/routers/admin.ts files to also return the number of members in the club

Also ContactButtons will now only render 1 button

…can be async

…s well

vercel · 2025-12-22T05:26:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
clubs	Ready	Preview, Comment	Dec 22, 2025 1:52pm

Except the OfficerList since it doesn't play well with the dynamic truncation

AbhiramTadepalli · 2025-12-22T13:49:48Z

Need to do the same for events

TyHil

Looking super nice!

TyHil · 2025-12-24T19:14:48Z

src/app/directory/[slug]/page.tsx

    <>
      <Header />
-      <main className="mb-5 flex flex-col space-y-4 p-4">
+      <main className="mb-5 flex flex-col space-y-4 p-4 px-[10vw]">


Other pages have been using max-w-6xl. If that still works it would be more consistent.

Would probably be better on mobile too

TyHil · 2025-12-24T19:18:53Z

src/components/club/listing/ClubBody.tsx

+  });
+  const upcomingEvents = events.filter((e) => e.endTime >= now);
+  const lastEventDate =
+    events.filter((e) => e.startTime <= now).reverse()[0]?.endTime ?? null;


It might be more clean to put lastEventDate in getDirectoryInfo and still use currentTime: now for filtering.

TyHil · 2025-12-24T19:20:49Z

src/components/club/listing/ClubBody.tsx

+  return (
+    <section
+      id="club-body"
+      className="w-full rounded-lg grid grid-cols-1 md:grid-cols-5 gap-5 items-start mt-8"


I think we need to wrap sooner. I can get this on the right sized screen

TyHil · 2025-12-24T19:23:42Z

src/components/club/listing/ClubContactCard.tsx

+
+export default function ClubContactCard({ club }: ClubContactCardProps) {
+  return (
+    <BaseCard className="flex flex-col bg-neutral-50 border-slate-200 shadow-sm p-5 gap-2">


Remove border-slate-200

Same with the other cards

TyHil · 2025-12-24T19:26:45Z

src/components/club/listing/ContactButton.tsx

+        target="_blank"
+        className="inline-block w-full"
+      >
+        <IconButton


Use a MUI Button with startIcon

TyHil · 2025-12-24T19:44:38Z

src/components/club/listing/ClubTitle.tsx

+        {club.tags && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {club.tags.map((tag) => (
+              <Chip


Love this chip design, should we standardize it to a component and use it in the rest of the code base?

TyHil · 2025-12-24T19:48:55Z

src/components/club/listing/OfficerList.tsx

+export default function OfficerList({
+  officers,
+}: {
+  officers: NonNullable<RouterOutputs['club']['getDirectoryInfo']>['officers'];


SelectOfficer again if that works

TyHil · 2025-12-24T19:51:25Z

src/components/club/listing/OfficerList.tsx

+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {


This works great on desktop but on mobile it defaults to showing a lot of officers.

TyHil · 2025-12-24T19:54:10Z

src/components/club/listing/OfficerList.tsx

+      {needsTruncation && (
+        <div className="mt-2 pt-2 border-t border-slate-300 z-10">
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}


Can this have the same styling as the ExpandableMarkdownText Show more button or vice versa? Just in terms of underline/hover color

TyHil · 2025-12-24T20:01:44Z

src/components/events/EventCard.tsx

Can we move these changes to a separate PR and do the same to the ClubCard there?

AbhiramTadepalli added 30 commits December 18, 2025 07:44

add club title

92ca3a1

created ClubBody and filled in the details card

d4b2f24

Also ContactButtons will now only render 1 button

update ContactButton and implement Contact info card

2ca7a69

Move Officers to the ClubBody on the left

e576bb2

initial attempt at an expandable description

333967c

Move Expandable MarkdownText into it's own component so the ClubBody …

d3f54c7

…can be async

Add events & use ExpandableMarkDownText

4234942

Use Code from ClubUpcomingEvents

2c025ef

lint

9cf8498

format

fee1fe6

style details

58c20a0

style contact

aee02dd

styled Officers

0616c0f

made officers expandable

dd3e308

make description full-width

0afdbc0

style upcoming events card

fa6d7a5

lint and format

e9a8ddc

added padding to the page based on viewport width

5cb2154

use 4.5:1 banner ratio

acf6d5d

remove text on header

9439c6d

position ClubTitle

f2ab284

space clubBody

fe27e8d

chip color and image bigger

65bb3de

add more horizontal padding to the club page

2838dd5

don't show read more on small descriptions

d546d18

format

256aafe

Show alternate text if no officers exist

0a9d90f

add states if club info doesn't exist

1820e8d

Change error text

e3f6457

differentiate text on upcoming events for orgs not on Clubs yet

97e1cc6

AbhiramTadepalli added 17 commits December 21, 2025 12:48

add shadow to contact options

87bb46a

make shadow more visible on EventCard (for all uses of it ig)

a5f5dc7

on hover, zoom image, raise card, and more transitions

e6d96c0

make the no upcoming events look better

129d42a

ensure minimum height is 300px

ab14fe0

changed "See all officers" color

d763177

add hover effect on contact cards

9a05271

Include image with officers

9816811

modify club.ts's getDirectoryInfo to return the number of members a…

0eb1f5b

…s well

use numMembers and foundingDate from clubs

85a8803

USe club.updatedAt & remove true's

6a02059

remove userMetadataToClubs as a field returned by getDirectoryInfo

5651e62

Make it last *event*

43bebf6

Distribute ClubBody into Components for clarity

2949666

include numMembers logic from 0eb1f5b into admin

d6d36b4

Use new Components in admin page

3832ee7

delete old components (no use -- functionality has been replaced)

c12955d

AbhiramTadepalli requested review from BK2004 and Shivhare-Ayush as code owners December 22, 2025 05:26

AbhiramTadepalli linked an issue Dec 22, 2025 that may be closed by this pull request

Club Page Redesign #478

Open

AbhiramTadepalli requested review from Isoscelestial, TyHil and nl32 December 22, 2025 05:27

AbhiramTadepalli added 3 commits December 22, 2025 07:05

Merge branch 'develop' into 478-club-page-redesign

072010c

BaseCard: transition-all and allow id

6b3688e

Use BaseCard throughout

3b686aa

Except the OfficerList since it doesn't play well with the dynamic truncation

vercel bot deployed to Preview December 22, 2025 13:52 View deployment

TyHil requested changes Dec 24, 2025

View reviewed changes


		const contentRef = useRef<HTMLDivElement>(null);

		useLayoutEffect(() => {

478 club page redesign #492

Are you sure you want to change the base?

478 club page redesign #492

Conversation

AbhiramTadepalli commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AbhiramTadepalli commented Dec 22, 2025

Uh oh!

TyHil left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AbhiramTadepalli commented Dec 22, 2025 •

edited

Loading

vercel bot commented Dec 22, 2025 •

edited

Loading