[feat(events)] Add event type on the events.wordpress.org toppage

[hideokamoto]

See #1197

Add the 'event type' on the upcoming event table at the top of events.wordpress.org.

Screenshots

How to test the changes in this Pull Request:

1. Clone this branch
   2.Follow the instruction to launch the test environment ( https://github.com/WordPress/wordcamp.org/blob/production/public_html/wp-content/themes/wporg-events-2023/README.md ) on this branch
2. visit the top page ( http://localhost:8888 )

[pkevan]

looks like maybe a code editor has changed this - can it be reverted to the current version from the production branch?

[hideokamoto]

Oh...
I'll revert this change.

[pkevan]

Changes look good, but can we revert the change on style.css as per: https://github.com/WordPress/wordcamp.org/pull/1352/files#r1715378577

[hideokamoto]

Thank you @pkevan for reviewing my PR!
I fixed the style.css file to revert the header comment.

Best.

[pkevan]

Just tested this and it appears to hit a problem with a browser/screen width between 1279px - 961px.

See screenshot:

[renintw]

@fcoveram 👋

In this PR, @hideokamoto tried adding the event type to the table. I recall we seemed to have discussed this before, but I can’t remember where. Do we need the event type in the table? I'm thinking adding the type might make things clearer and more consistent with the event widget in the admin dashboard. If we do need it, should the Desktop view follow the design in this PR?

event widget

As for the tablet and mobile views, do you have any thoughts?

Figma: https://www.figma.com/design/jdMk5ssz2Av7KFfEaeK7de/Events?node-id=1-2193&t=R04V8WEi9a8Hz58D-0

Current implementation from this PR (Still needs some further tweaks)

Desktop	Tablet	Mobile

[fcoveram]

I'd like to ping @dorsvenabili asking for her thoughts.

The suggestion makes sense to me, and I made this mockup for desktop and mobile views in case Rocio or team members agree with the change.

You can find here the designs, and the changes area pretty straightforward. The spacing between labels ([event-type] and [location]) and dot is 3x-small. This applies to both meetup and location, and date and time.

I also noticed the row gap of li item is 20px instead of 40px (medium). Can we update that? The current spacing looks tight.

[dorsvenabili]

Thanks for the ping, @fcoveram! Yes, I confirm that showing the type of event makes a lot of sense and will help users to get a quicker sense of the type of event.

+1 to implement it :)

[renintw]

I think this PR currently has everything needed to continue with the implementation. @hideokamoto you can refer to the resources provided above. The position of the event type has changed, and attention is needed for different screen sizes.

Let me know if you run into any issues 🙂