Design/UX #16358
closedEvents Page Re-Skin
Added by Sara Cannon over 2 years ago. Updated almost 2 years ago.
0%
Description
Update the events page design to coordinate with the new design.
https://commons.gc.cuny.edu/events/
- 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 https://commons.gc.cuny.edu/events/event/new-media-lab-general-meeting-19/
Figma File with the new design https://www.figma.com/proto/Rtuot2GEiDE3vcgDIViBjO/CUNY-Design---Summer-2022?page-id=1951%3A3846&node-id=1951%3A3847&viewport=453%2C957%2C0.5&scaling=min-zoom
Any and all feedback here is very welcome. Especially from people who have used the event feature before.
Files
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 | ||
should-event-tab-have-a-create-new-event-button-scaled.jpg (111 KB) should-event-tab-have-a-create-new-event-button-scaled.jpg | Colin McDonald, 2023-01-23 09:10 AM |
Related issues
Updated by Colin McDonald about 2 years ago
- Related to Design/UX #16536: Main Navigation Drop-Down Elimination added
Updated by Sara Cannon about 2 years ago
- Assignee changed from Sara Cannon to Boone Gorges
Updated by Sara Cannon about 2 years ago
Events Page Presentaion: https://www.figma.com/proto/egUblnG1UzGfKU05esn9Jl/CUNY-Design---Fall-2022-(Development)?page-id=1951%3A3846&node-id=1951%3A3847&viewport=476%2C972%2C0.46&scaling=min-zoom
Events Page Figma File: https://www.figma.com/file/egUblnG1UzGfKU05esn9Jl/CUNY-Design---Fall-2022-(Development)?node-id=1951%3A3846
Updated by Boone Gorges about 2 years ago
- File event-single.png event-single.png added
- File event-calendar-campus-filter.gif event-calendar-campus-filter.gif added
- File event-calendar.gif event-calendar.gif added
- File event-list.png event-list.png added
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.
Updated by Raymond Hoh about 2 years 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!
Updated by Boone Gorges about 2 years 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 https://commons.gc.cuny.edu/events/) and the team should feel free to experiment with more.
Updated by Colin McDonald almost 2 years ago
- File should-event-tab-have-a-create-new-event-button-scaled.jpg should-event-tab-have-a-create-new-event-button-scaled.jpg added
Sara and dev team, what do you think about adding a "Create Event" button on the header of the new Events page, the same as we have on the Groups and Sites pages? It would go to this universal event creation link one can only access via the top toolbar dropdown:
https://commons.gc.cuny.edu/members/colinmcd/events/new-event/
See screenshot for suggested placement, and thanks Scott for pointing this out during the dev call on Friday. We agreed it seems like a good suggestion given the new Events design and re-emphasizing activity on this page.
Probably not crucial for launch, and could be added later once we're in agreement.
Updated by Sara Cannon almost 2 years ago
- I'm all for having a create link on that page! Good call! https://share.getcloudapp.com/Jruy5D6j
- When it comes to fallback featured event images, could they be "randomly" chosen - like how default avatars are assigned so that we have a variety? This and not using any icons in it might be better. If this is more complicated to implement, we can push it off and use the image like the one that you have there but without the mortarboard.
Everything else looks great!
Updated by Boone Gorges almost 2 years ago
Thanks, Colin and Sara!
In https://github.com/cuny-academic-commons/cac/commit/232c65af86809b3c6e7a13ba3ca19a4e65f329e5 I added the Create button to the Events directory. Then I realized that Sara's mockup showed the button as white rather than black, and used the text 'Create Event' rather than 'Create a New Event'. Both of these are different from the conventions in the Groups and Sites directory. In https://github.com/cuny-academic-commons/cac/commit/e3ca5a939c4f93aba798896a086d9ec4736b944e I changed my implementation to match Sara's mockup - let me know if we like this, or if we want to switch back to match the styling/wording of other directories.
- When it comes to fallback featured event images, could they be "randomly" chosen - like how default avatars are assigned so that we have a variety? This and not using any icons in it might be better. If this is more complicated to implement, we can push it off and use the image like the one that you have there but without the mortarboard.
Yes, I've made the change so that the fallback is randomly selected. https://github.com/cuny-academic-commons/cac/commit/9ba59cb031762ef736ab9a93a23c639687343e31
Updated by Colin McDonald almost 2 years ago
Thanks, Boone. You're right that "Create an Event" rather than "Create Event" would be more consistent with this link for the other directories. And I see that it is more of a link than the button in the same place on the Groups and Sites pages. That feels a little more important to get right. Sara, what do you think?
Updated by Sara Cannon almost 2 years ago
Yes, let's keep it consistent with the other pages with the wording and the black. Thanks for pointing this out!
Updated by Boone Gorges almost 2 years ago
Thanks for confirming. In https://github.com/cuny-academic-commons/cac/commit/414e58fb0beb6ce38f6828cbf0643ddcc32fdfe2 I rolled back the change so that the button now matches other directories.
Updated by Boone Gorges almost 2 years ago
- Status changed from Testing Required to Resolved