Updated Event Page Layout

[farisashai]

Description

Changelog

1. Proposed Redesign for ACM Event page to essentially use the mobile layout at all times with a max width so event images never get cropped.

   Before

   

After

2. Also fixed a minor error for a recent PR on event cards.

3. Fixed a layout bug with overflowing text title by switching title container from grid to flex on mobile.

   Before

   

After

4. Added a hover effect on Add to Calendar

5. Removed all references to Facebook links (All ACM event links now link to event page)

6. Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Logistical Change (something about code process / a readme change / documentation update)
• [ ] CI Change (relating to deployment / continuous integration)
• [ ] Something Else

How Has This Been Tested?

• [x] Tested on Localhost (Desktop)
• [x] Tested on Localhost (Mobile) - use https://ngrok.io to get a copy on a mobile device
• [x] Tested on Deployed Preview (Desktop)
• [x] Tested on Deployed Preview (Mobile)

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code as needed, particularly in hard-to-understand areas
• [x] My changes generate no new warnings (if they do, please explain why)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
main-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2023 10:15pm

[farisashai]

The changes look good! I just have one comment: the "Add to Calendar" buttons look a little weird spacing-wise, is there a better way to style them here instead of always having 2 on top and 1 on bottom?

Do you think it would look better with all 3 in a single column on mobile?

[alexzhang1618]

I think if we have space, we should have all three in a row. Maybe using flex instead of grid to style the calendar link container would work better?

[nishantbalaji]

Looks great! However, we don't use facebook anymore so you can remove that button