Feat: redesign events page ✨

[saurabhburade]

Description

• Implementation of Events page redesign #13367

• Redesign EventCard
• Redesign UpcomingEventsList
• Redesign MeetupList

Preview URL

https://deploy-preview-13374--ethereumorg.netlify.app/en/community/events

Related Issue

Fixes #13367

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	f85cb38
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66b0a8080502b800083b913b
😎 Deploy Preview	https://deploy-preview-13374--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 45 (🔴 down 6 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 10 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[saurabhburade]

Hi @konopkja, please check the preview. Also please let me know if any modifications required

[konopkja]

Wow! looking good, there might be few minor adjustments with the interaction but overall this is shaping up pretty well! Thank you.

1. could you please double the padding for Month headline? (right now month headline is too close to the cards from previous month)

2. Can we load by default 2 months instead of one?

3. The button should also load 2 months more instead of one to prevent excessive need to click on the button

[saurabhburade]

Thank you! surely, making the required modifications.

[konopkja]

Thank you! surely, making the required modifications.

Lgtm, thank you!!

[wackerow]

Hey @saurabhburade! Thanks for the work here, appreciate this. It's overall looking great! I left a note about concerns for non-English pages with the proposed logic for parsing the display date range.

Let me know if what I mentioned makes sense, but ideally these can be displayed properly according to the users locale, and not be forced to just English.

[konopkja]

a small UI change requests after team review:

1. remove year from each event date (month and day should be enough)
2. increase the padding around the button "load more" button as it seems a bit hidden now

[saurabhburade]

@konopkja @wackerow Thank you for your feedback, here's the modified implementation for dates

[konopkja]

@konopkja @wackerow Thank you for your feedback, here's the modified implementation for dates

why is there the "ago" part?

[wackerow]

@konopkja I'm assuming this is showing Italian ("August" is "agosto", shortened to "ago")

[saurabhburade]

It's a locale date-time for es-ES

[wackerow]

Looking good @saurabhburade! Mind clearing the merge conflicts an we'll give this a final review?

[wackerow]

Hey @saurabhburade, sorry to block again. Noted a couple things:

1. Clamping lines leads to unreachable content
2. Can use Intl.DateTimeFormat(locale,options).formatRange(from,to) to get date range string in a simple, easy to maintain, an intl friendly manner
3. to is now deprecated; use href

I kinda see 2 and 3 as blocking, curious your take @konopkja

[saurabhburade]

@wackerow @konopkja

Clamping lines are to evenly show the event cards, if not it may lead to uneven heights. As the length of the description of an event is unpredictable

[wackerow]

@saurabhburade Gotcha! In that case I'd consider a css grid which would allow you to have cards in a row all have the same height, but have that height be flexible depending on the longest card text for that row

[nloureiro]

All good from the design side!!!
Great work!

[nloureiro]

@saurabhburade, great work, thank you.

one last thing, I got this error on Safari.

[saurabhburade]

@nloureiro, thank you. The safari issue is fixed now.

[saurabhburade]

@wackerow Please do the final review, LGTM for approval.

[wackerow]

Looks great, thank @saurabhburade! Can continue to iterate on some other upgrades here, and the tailwind migration separately