Page MenuHomePhabricator

Styling for "Your Events" table
Closed, ResolvedPublic

Description

In scope:

  • Implement styling for "Your Events" table; organizer view

Screen Shot 2022-05-13 at 10.59.38 AM.png (2,412ร—1,324 px, 213 KB)

Event Timeline

Change 793521 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/extensions/CampaignEvents@master] Add styling for the events table

https://gerrit.wikimedia.org/r/793521

Change 793521 merged by Cmelo:

[mediawiki/extensions/CampaignEvents@master] Add styling for the events table

https://gerrit.wikimedia.org/r/793521

Adding a few notes here as per our previous discussion, with things that differ from the prototype:

  • Header links are not grey in the actual interface. That's because they are actual links, and there would be no visual cue that they're clickable
  • I'm not sure why the date spans two lines in the prototype, but it was implemented on a single line. There's plenty of horizontal space and I believe it's more readable if on a single line.
  • I didn't put the "user" image next to the participant numbers. This is actually something I wanted to ask, but then forgot about it. Since the value is inside a column with a header that says "Number of participants", does every row need to have an icon? I'm not sure if we need to provide the additional hint that the number refers to the participant, and instead I wonder if it could be more confusing.

Adding a few notes here as per our previous discussion, with things that differ from the prototype:

  • Header links are not grey in the actual interface. That's because they are actual links, and there would be no visual cue that they're clickable
  • I'm not sure why the date spans two lines in the prototype, but it was implemented on a single line. There's plenty of horizontal space and I believe it's more readable if on a single line.
  • I didn't put the "user" image next to the participant numbers. This is actually something I wanted to ask, but then forgot about it. Since the value is inside a column with a header that says "Number of participants", does every row need to have an icon? I'm not sure if we need to provide the additional hint that the number refers to the participant, and instead I wonder if it could be more confusing.

tagging in @gonyeahialam and @ifried about this third bullet point above - does every row in the Participants column need to have an icon?

I'm neutral on the question above. I agree that the icon may not be necessary since the row title is "Number of participants." So we will await response from @gonyeahialam to see what he thinks and learns more about the background on the icons.

Adding a few notes here as per our previous discussion, with things that differ from the prototype:

  • Header links are not grey in the actual interface. That's because they are actual links, and there would be no visual cue that they're clickable
  • I'm not sure why the date spans two lines in the prototype, but it was implemented on a single line. There's plenty of horizontal space and I believe it's more readable if on a single line.
  • I didn't put the "user" image next to the participant numbers. This is actually something I wanted to ask, but then forgot about it. Since the value is inside a column with a header that says "Number of participants", does every row need to have an icon? I'm not sure if we need to provide the additional hint that the number refers to the participant, and instead I wonder if it could be more confusing.

tagging in @gonyeahialam and @ifried about this third bullet point above - does every row in the Participants column need to have an icon?

@vaughnwalters @Daimona The icons can be removed

@Daimona a few minor notes about the table header:

  1. In the comp, the arrow indicating sort direction comes after the text, but in the build it comes before the text.
  1. In the comp, the text is No. of Participants, but in the build it is Number of Participants.

comp:

build.png (2,216ร—116 px, 21 KB)

build:

build.png (2,216ร—116 px, 21 KB)


also noting here that the kebab/"three dots" menu is rotated 90 degrees from the the icon in the comp and this change was as an intentional change as noted in T308607#7957847

  1. In the comp, the arrow indicating sort direction comes after the text, but in the build it comes before the text.

MW core puts the arrow before the text, so I'm not sure why it's different in the comp... For consistency with the rest of the interface and given how the icon positioning works internally, I'd rather not change that if possible.

  1. In the comp, the text is No. of Participants, but in the build it is Number of Participants.

This is an intentional change I made; I think the interface messages should be as clear as possible, and according to the manual we should avoid jargon, slang, etc. I didn't see a compelling reason to use an abbreviation here, and so I just used the full word.

The styling has been implemented, with some changes to the styling based on comments shared above. For this reason, I'm marking this ticket as Done.