Improved Event List UI #117
Conversation
|
@bogdankharchenko Thanks, this certainly addresses a few things in the current UI that are not great. For instance, now showing "AM/PM" instead of "24 hour" times is nice. Overall, I think it's easier on the eyes.
We've never put adequate thought into testing the site for mobile responsive, accessibility, performance. These are all areas where I'm sure we could do a better job. This PR could be a good opportunity to do a bit of extra testing and probing to cover these other areas. |
|
@allella I will push these suggestions. The Add to Calendar does exist, if you click on the date, definitely not as obvious. My next PR, I want to add a iCal feed which can just stream events to your iphone/google calendar instead of adding an individual event - this way you can always be informed without checking the site. I think that would be a nice feature. |
|
Alright. We do have #109 still being an issue and I believe it's to do with the caching Zach put in place on the Laravel side because the API from which it sources the data doesn't have the duplication. We'd want to get that buttoned up before publishing something to people's calendars and risking having bad info. I haven't gotten into the guts of the Laravel app and the caching, since Zach has mostly responded to those requests, but it would be great to have someone to supplement what he's been able to volunteer. Also, I've been part of a related freeCodeCamp project, called Chapter, which we hope will offer a free self-hosted alternative to Meetup.com. One of the things that's part of the MVP for it is to use a Google Calendar API approach for updating individual events to which people have RSVPed. I'm not even clear how that API approach will work, but I did put other notes related to the more traditional iCal files that Meetup and Eventbrite send with RSVPs and it's very limited in that they will never update an event if something is changed about it. I believe you're talking about a feed URL of all events, instead of tracking individual events. I know you can easily add a new toggle on / off calendar to apps like Google Calendar, and that it would refresh itself, but I'm not sure many consumers of the HackGreenville app will want to see dozens of random tech events on their personal calendar. |
|
Pushed new changes to UI, also added mobile screenshot - this is optimized to be responsive across all devices. "Feature" Add to Calendar is only assessable via the "event date" on click event. |
|
Not sure if this is part of the free font-awesome icons, but perhaps there's something like https://fontawesome.com/icons/calendar-plus?s=solid with a mouseover / span tag that says "Add {Event Name} {Event Date / Time} to Google Calendar" so it works on mouse over and probably would be good for accessibility. |
|
The calendar icons on the homepage have a mouseover text that's hidden, so we might be able to reuse that pattern for a calendar-plus font icon.
|
|
@allella does this look any better?
|
|
Also, just a reminder, since I just used it myself for the Slack app background color, that Zach's wife created this style guide |
|
@allella These are all the default bootstrap theme styles, which are represented in the project. |
|
Looks good. Does it have a mouseover for text to well people and screenreaders what that icon does / means? |
|
@all-contributors add @bogdankharchenko for code and design |
|
I've put up a pull request to add @bogdankharchenko! 🎉 |
|
@allella added screen reader info, and hover title. |
|
I'm not sure of the best practices on this, but my guess is that since we'll have a lot of "Add to Calendar" icons, and other text for that matter, that we'll want to be more verbose in some places and less in others. For instance, on a screen reader it may be good to have "Add {something unique about the event} to Calendar". Otherwise, it may be hard to differentiate what's about to be added. I know it's an edge case, but it's probably the sort of thing that doesn't hurt to be more verbose on a mouseover / tooltip and is more useful for the accessibility case. |
|
@allella just turn on screen reader in safari and see how it looks |
|
I don't have my dev system setup because I just upgraded my OS and it blew away my local PHP and extensions. If you're happy with it, then I'll give it another look when it makes it to the staging server. |
|
Got it. I think this is moving in the right direction. We can certainly iron this out as we get feedback in staging/prod. I say merge and then we deal with improvements later |
|
This is merged and staged. Though, I need to do some server upgrades so I'll do that before pushing this live. |
|
Thanks again. This is now live. And, the server is now using PHP 8.1, so now there are less hassle trying to stage and deploy things. |
👋
UI isn't really my thing - but I figured I can make some minor tweaks to events page.
I'm not married to the design, if you don't think its a good idea, feel free to modify or just close the pr.
Proposed Design
Original Design