478 club page redesign

[AbhiramTadepalli]

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

[AbhiramTadepalli]

The design calls for displaying the URL or the social media account handle, rather than the contact platform. This'll probably be a utility function that uses Regexes.

function contactDisplay(contact: SelectContact) {
  switch (contact.platform) {
    case 'discord':
      return (
        contact.url.split('://')[1]?.replace('www.', '').replace(/\/+$/, '') ??
        contact.platform
      );
    case 'instagram':
      return contact.url.indexOf('instagram.com/') >= 0
        ? '@' + contact.url.split('instagram.com/')[1]!.replace(/\/+$/, '')
        : contact.platform;
    case 'website':
      return contact.url
        .replace('http://', '')
        .replace('https://', '')
        .replace('www.', '')
        .replace(/\/+$/, '');
    case 'email':
      return contact.url;
    case 'twitter':
      return contact.url.indexOf('.com/') > 0
        ? '@' + contact.url.split('.com/')[1]!.replace(/\/+$/, '')
        : contact.platform;
    case 'facebook':
      return contact.url.indexOf('.com/') > 0
        ? '@' + contact.url.split('.com/')[1]!.replace(/\/+$/, '')
        : contact.platform;
    case 'youtube':
      return contact.url.indexOf('youtube.com/@') >= 0
        ? contact.url.split('youtube.com/')[1]!.replace(/\/+$/, '')
        : contact.platform;
    case 'twitch':
      return (
        contact.url.split('twitch.tv/')[1]?.replace(/\/+$/, '') ??
        contact.platform
      );
    case 'linkedIn':
      return contact.platform;
    default:
      return contact.platform;
  }
}

Thoughts on my first pass?

[TyHil]

Thoughts on my first pass?

Default to the contact name instead of the platform. "LinkedIn" instead of "linkedIn"

[AbhiramTadepalli]

contact name instead of the platform

wdym

[TyHil]

Use contactNames in src/server/db/schema/contacts.ts which maps the platform keys to the properly capitalized names of the platforms