Project

General

Profile

Actions

Design/UX #16358

closed

Events Page Re-Skin

Added by Sara Cannon over 1 year ago. Updated about 1 year ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Design
Target version:
Start date:
2022-07-13
Due date:
% Done:

0%

Estimated time:
Deployment actions:

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

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

Actions
Actions #1

Updated by Sara Cannon over 1 year ago

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

Updated by Colin McDonald over 1 year ago

Actions #3

Updated by Sara Cannon over 1 year ago

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

Updated by Boone Gorges over 1 year ago

  • Target version set to 2.1.0
Actions #6

Updated by Boone Gorges over 1 year 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 over 1 year 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 over 1 year 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.

Actions #9

Updated by Colin McDonald about 1 year ago

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.

Actions #10

Updated by Sara Cannon about 1 year 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!

Actions #11

Updated by Boone Gorges about 1 year 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

Actions #12

Updated by Colin McDonald about 1 year 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?

Actions #13

Updated by Sara Cannon about 1 year ago

Yes, let's keep it consistent with the other pages with the wording and the black. Thanks for pointing this out!

Actions #14

Updated by Boone Gorges about 1 year 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.

Actions #15

Updated by Boone Gorges about 1 year ago

  • Status changed from Testing Required to Resolved
Actions

Also available in: Atom PDF