Events page #265
Events page #265
Conversation
…into 263-events-page
|
|
||
| .events-cards::-webkit-scrollbar-thumb { | ||
| background-color: #e8e8cd; | ||
| height: 10rem !important; |
There was a problem hiding this comment.
I love the way you're handling it 🩷. Later on we'll see how to remove the !important from the project. Its use is considered bad practice.
There was a problem hiding this comment.
Agree with Mayra, I use fullcalendar in fflow, and I regularly have to spend time tracking down the magic incantation that means I can avoid important. Happy for this PR to merge as is, and fix up the !importants in a separate PR.
| @@ -1,48 +1,54 @@ | |||
| import React from 'react'; | |||
| import PropTypes from 'prop-types'; | |||
| import meetup from '../../../assets/images/meetup.jpg'; | |||
There was a problem hiding this comment.
Looks like this MeetUp page hasn't yet been (fully) styled to match the figma designs, I assume intentional. Happy to keep it for a separate issue.
| <div className="page-title-calendar"> | ||
| <h1 className="font-besley text-2xl font-bold mb-2">Upcoming Events</h1> | ||
| <p> | ||
| <a href="/join-us">Register </a>to stay updated with upcoming events |
There was a problem hiding this comment.
suggest add "and be sent meeting invitations"
| {loading ? ( | ||
| <p>Loading events...</p> | ||
| ) : meetups.length === 0 ? ( | ||
| <p>No events available</p> |
| <div | ||
| id={event.id} | ||
| key={event.id} | ||
| className={`event-card ${index % 2 === 0 ? 'yellow' : 'green'}`} |
There was a problem hiding this comment.
Option to do the striping in CSS with nth-child. It's fine this way too.
| } | ||
| } | ||
|
|
||
| @media (min-width: 850px) and (max-width: 1024px) { |
There was a problem hiding this comment.
There are potential styling gaps here betwen 767 and 850px, and betwee 1024 and 1094px. An easy way to resolve is just only one of min or max width, not both.
Changes Implemented in this section:
📅 An interactive calendar to display upcoming events.
- ✅ Integrated FullCalendar for displaying upcoming events dynamically.
-
🎟 A past meetups section with summaries and links to resources.
- ✅ Designed a past meetups section styled as per the Figma mockup.
📱 Responsive design ensuring functionality across desktop and mobile.
✅ Ensured hover/click interactions for detailed event information.
✅ Optimized performance with lazy loading for past meetups.
Notes
Further enhancements (if needed) can be added based on feedback.
Open to suggestions on improving performance or interactivity.