wordcamp.org icon indicating copy to clipboard operation
wordcamp.org copied to clipboard

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

Open hideokamoto opened this issue 1 year ago • 6 comments

See #1197

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

Screenshots

スクリーンショット 2024-07-21 16 53 47

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 )

hideokamoto avatar Jul 29 '24 02:07 hideokamoto

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

Best.

hideokamoto avatar Aug 16 '24 13:08 hideokamoto

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

See screenshot:

Screenshot 2024-08-22 at 12 22 59

pkevan avatar Aug 22 '24 11:08 pkevan

@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 image

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
image image image

outdoor2kode avatar Aug 26 '24 21:08 outdoor2kode

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.

Mockups of events homepage on desktop and mobile

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.

Mockup of event item in big and small size

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

Row item with spacing notes from browser inspector

fcoveram avatar Aug 29 '24 09:08 fcoveram

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 :)

dorsvenabili avatar Sep 03 '24 13:09 dorsvenabili

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 🙂

outdoor2kode avatar Sep 05 '24 15:09 outdoor2kode