Design/UX #16358


Events Page Re-Skin

Added by Sara Cannon 5 months ago. Updated 30 days ago.

Testing Required
Priority name:
Category name:
Target version:
Start date:
Due date:
% Done:


Estimated time:
Deployment actions:


Update the events page design to coordinate with the new design.

- Skin the calendar view
- Create navigation similar to the directories that have "all events", "my events", and "featured" (We could change "featured" to "conferences" if that makes more sense)
- add in a filter by campus
- Create a list view that uses cards similar to the directory page
- I would argue that the list view might be more compelling as the default view that first shows up rather than the calendar - and then users can toggle to the calendar
- updated single event page

Figma File with the new design

Any and all feedback here is very welcome. Especially from people who have used the event feature before.


event-calendar-campus-filter.gif (66 KB) event-calendar-campus-filter.gif Boone Gorges, 2022-11-09 03:46 PM
event-single.png (142 KB) event-single.png Boone Gorges, 2022-11-09 03:46 PM
event-calendar.gif (112 KB) event-calendar.gif Boone Gorges, 2022-11-09 03:46 PM
event-list.png (241 KB) event-list.png Boone Gorges, 2022-11-09 03:46 PM

Related issues

Related to CUNY Academic Commons - Design/UX #16536: Main Navigation Drop-Down EliminationNewBoone Gorges2022-07-26

Actions #1

Updated by Sara Cannon 5 months ago

  • Tracker changed from Bug to Design/UX
Actions #2

Updated by Colin McDonald 3 months ago

Actions #3

Updated by Sara Cannon 2 months ago

  • Assignee changed from Sara Cannon to Boone Gorges
Actions #4

Updated by Boone Gorges 2 months ago

  • Target version set to 2.1.0
Actions #6

Updated by Boone Gorges 30 days ago

Hi all - I've had a first pass at implementing this. Once cdev is freed up from other testing, I'll put it there for you to play with. In the meantime, some comments.

1. Sara's design depends heavily on images. Previously, we had no support for featured images for events. I've added support. However, the dependence on images means that we need a fallback. You can see from screenshots that I'm using a placeholder for now. Sara, could you think about this please?
2. The way that the Event Organiser plugin implements its hover tooltips (see event-calendar.gif) makes it impossible to show the image in the tooltip, or to make the event title into a link. If these are important, then we'll need to rewrite the tooltip implementation.
3. Currently on the Commons, it's possible to view the same event's at several different URLs: the top-level one (/events/event/event-slug) as well as on the user's profile (/members/events/event-slug) and on associated groups. This is confusing and it makes styling very difficult. I've changed it so that all of these URLs resolve to the top-level one, which is styled to match the mockups.
4. The designs had no Edit link, so I added one under the 'Download iCal File' link. See event-single.php.
5. Sara's design had events on the calendar view truncated to a single line. In my tests, this makes it very difficult to differentiate. I adjusted so that it truncates after two lines.
6. The List view (which is default) shows only future events. On the Calendar view, you can go to older months.
7. The counts on each tab only count future events.
8. The mockups show a Featured tab but this feature doesn't currently exist. Do we want it? I think it could be as simple as a checkbox, visible only to site admins when editing Events. The advantage here is that the featured items would automatically disappear from the list once they're in the past, making it less important to have a heads-up view of what's featured. But I wonder whether perhaps we want to leave this feature out for the time being, until we have a better idea about how it will be maintained.

Actions #7

Updated by Raymond Hoh 30 days ago

Once cdev is freed up from other testing, I'll put it there for you to play with

Feel free to switch cdev over so others can test the new Events page, Boone!

Actions #8

Updated by Boone Gorges 30 days ago

  • Status changed from New to Testing Required

Thanks, Ray! I've merged my changes to the 2.1.x branch (ie I yoloed it) and it's ready for testing on cdev. I've created one event (see and the team should feel free to experiment with more.


Also available in: Atom PDF