Update event list UI: Reorder event information and display event type

[renintw]

See WordPress/wordcamp.org#894

This PR aims to improve the event list user interface by rearranging the information for each event and displaying the event type prominently. The changes include:

This update is being made in order to support the The Next Generation of WordCamps pilot event program. More traffic will be directed to this page (community/events) and clearly communicating the event type has been identified as a needed improvement.

• Moving the time information to the first line.
• Keeping the event name in the second line.
• Placing the location information in the third line.
• Introducing the event type and putting it before the location for better identification.

Screenshots

Before	After1	After2

Note

1. mb_convert_case was used because even though we don't seem to translate this page into any other languages, I guess we will in the future and this function will fit the case while ucwords won't. Also, I assume type in the database is specified as UTF-8.

2. I'm not sure if it's worth doing (or best to do) more on our current layout. Perhaps adding some labels before each piece of information, like Time: 2:00 p.m., or adding a table for it, could be beneficial? What do you all think? And Is now a good time to bring the meta design into this discussion, or someone else should be tagged instead? ✅

Testing Steps

Go to https://make.wordpress.org/community/events/ while sandboxed and check if the layout is the same as the screenshots above.

[iandunn]

Is now a good time to bring the meta design into this discussion

That seems like a good idea, they might have ideas about the labels, etc 👍🏻

@WordPress/meta-design

[iandunn]

This is looking good, but may need a few tweaks before merge.

[jasmussen]

Seems like a fine micro improvement to what exists.

Provided you'd be up for potentially new tweaks at some point in the future, at some point we likely need to refresh these sections holistically to the new design. So it seems fine to go with an iterative improvement for now. What do you think?

[renintw]

So it seems fine to go with an iterative improvement for now. What do you think?

Thanks for jumping in. It makes sense to refresh the sections holistically. Regarding a micro improvement that doesn't require too much additional time, I agree that this is good to go 👍

[jasmussen]

Also just to clarify, by using the term "micro improvement" I didn't mean to belittle your work 😅 — on the contrary, I appreciate the constant iteration. Thank you.

[renintw]

Ah, I totally get it. Perhaps I should put it this way: "Given your feedback, I think there's no need to spend too much additional time atm, and a micro improvement would be good enough to go" Sorry for the confusion and much appreciated for the clarification 🙂

[jasmussen]

No confusion, all appreciation 🚀

[StevenDufresne]

@renintw I think it's worth adding the context for this PR since it's separated from its driver (WordCamp pilot event MVP).

This update is being made in order to support the The Next Generation of WordCamps pilot event program. More traffic will be directed to this page and clearly communicating the event type has been identified as a needed improvement.

[renintw]

@renintw I think it's worth adding the context for this PR since it's separated from its driver (WordCamp pilot event MVP).

This update is being made in order to support the The Next Generation of WordCamps pilot event program. More traffic will be directed to this page and clearly communicating the event type has been identified as a needed improvement.

Thanks. I've added it to the PR description.

[pkevan]

Not fully relevant to this PR, but how is the caching supposed to work here: https://github.com/WordPress/wordpress.org/pull/152/files#diff-040d01da7ce85154ff3542bb0faaaa35dfeca9941c16446fe1701fa30fe92c26R37-R50? Am I missing something?

[renintw]

Not fully relevant to this PR, but how is the caching supposed to work here: https://github.com/WordPress/wordpress.org/pull/152/files#diff-040d01da7ce85154ff3542bb0faaaa35dfeca9941c16446fe1701fa30fe92c26R37-R50? Am I missing something?

I think there might be a misuse of the term here. I'm guessing it might have meant to indicate that it had loaded some cached stuff, but they actually come from the DB. Not so sure about the real intent here in the first place, though.
Same stuff happens here.

If there are no further thoughts on this guess, I'll open a ticket later to address this minor issue.

[renintw]

As per the feedback from the community, I believe it's also worth adding event type to WP Dashboard event widget. Any concerns about doing so? @StevenDufresne @naokomc

[iandunn]

I'm guessing it might have meant to indicate that it had loaded some cached stuff, but they actually come from the DB

Yeah, the database is acting as a local cache of the external APIs. It's not the canonical source, it's just a copy for performance.

IMO that's a correct use of the term, but I also agree that it might be worth a comment somewhere to clarify that it's not a memory cache 👍🏻

[renintw]

the database is acting as a local cache of the external APIs. It's not the canonical source

Ah, I see now, thanks for clarifying. I also agree that it's worth leaving a comment to explain this is not a mem cache 👍

[naokomc]

it's also worth adding event type to WP Dashboard event widget

If there's room for the label, I agree it'd be good additional information for the audience.