Page MenuHomePhabricator

User Links: "You have new talk page messages" at lower resolutions
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

With the changes in T276566 we hid the "you have new talk page messages" at lower resolutions.

When displayed it looks like so:

Screen Shot 2021-06-03 at 10.53.29 AM.png (1×1 px, 130 KB)

Acceptance criteria

image.png (780×500 px, 206 KB)

  • absolutely position to do testing
  • next steps will depend based on results, hiding is an option if a lot of bugs are introduced

QA Results - Beta

ACStatusDetails
1T284243#7247245

Event Timeline

@Jdlrobson maybe something like this? push the article toolbar down and put the notice under the user tools

image.png (780×500 px, 206 KB)

Maybe we can use flex order @Jdrewniak for this one?

Maybe we can use flex order @Jdrewniak for this one?

Possibly, but to the achieve the proposed design we'd need to modify the HTML a bit, since the talk page notice, notifications, and alerts are all within one container element, the search is in a second, and the user links menu is in a third. With that existing structure, moving the notice after the user links menu ain't easy.

ovasileva renamed this task from "You have new talk page messages" at lower resolutions to User Links: "You have new talk page messages" at lower resolutions.Jun 7 2021, 2:17 PM
ovasileva triaged this task as Medium priority.
ovasileva raised the priority of this task from Medium to High.Jun 7 2021, 2:25 PM
In T284243#7135015, @alexhollender wrote:

@Jdlrobson maybe something like this? push the article toolbar down and put the notice under the user tools

image.png (780×500 px, 206 KB)

@alexhollender are there any other options we could consider e.g. collapsing the message bar into an indicator of sorts at lower resolutions?
Perhaps we can reconsider the idea in T274428 and explore making this position absolute and dismissable?

image.png (887×1 px, 450 KB)

@alexhollender are there any other options we could consider e.g. collapsing the message bar into an indicator of sorts at lower resolutions?
Perhaps we can reconsider the idea in T274428 and explore making this position absolute and dismissable?

@Jdlrobson there are other options we could consider. Can you add more context regarding why you want other solutions considered and what kinds of solutions you're looking for (in more general terms)?

I believe the notification bell would have a red dot in this case, so perhaps we can just hide the yellow bar below a certain width?

Ignoring the search box, I think the following mobile design can be achieved with CSS.

Screen Shot 2021-06-22 at 11.29.15 PM.png (788×1 px, 130 KB)
Screen Shot 2021-06-22 at 11.30.22 PM.png (1×1 px, 339 KB)

The orange bar is absolutely positioned, as @Jdlrobson suggested, but for a different design. The shortcomings with absolute positioning is that we can only (safely) account for the orange bar being a fixed height and not spanning more than one line. We can force the text to remain on one line with CSS, but I can image the wording getting quite lengthy on that banner in some languages and bumping into the"The free encyclopedia" tagline. Maybe we could dispense with that at lower resolutions as well?

In general though, I think absolutely positioning the orange bar at small resolutions, below the rest of the usert links, should be pretty safe in terms of languages. I'm not sure of any gadgets or extensions that would be affected by that placement though.

I do think that we would have to collapse the search box before we move the orange bar though, because otherwise we would have 3 lines of text in the header, pushing the content down substantially.

LGoto set the point value for this task to 3.
LGoto added a subscriber: LGoto.

Update: try absolute positioning, test, if it breaks then hide it.

Have you considered making the text shorter, e.g. "You have a new message" or even just "New message"?

Edit: Sorry, I realized that I'm being annoying. For context, I recently argued for different wording in T274428, and I was trying to make a point. Maybe this discussion should continue on the other task, but I think it is a point worth considering.

Have you considered making the text shorter, e.g. "You have a new message" or even just "New message"?

We did consider a shorter message. Our thinking was: there are several different types of "messages" one can be notified about. Therefore it would be helpful to be explicit about this notification being for a Talk page message so people understand when/why it appears.

Change 704151 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Update styles for talk message at lower port widths.

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

hi @alexhollender - per planning discussion earlier today, here are some screenshots of the OBOD between 1000 - 1214 port widths that look somewhat funky. Fwiw, this is also current behavior so maybe it's fine as it is.

With the patch above here are examples of what happens to OBOD at desktop 1000 to 1214 pixels wide:

tablet/iPad Pro 1024

Screen Shot 2021-07-12 at 12.33.35 PM.png (718×1 px, 183 KB)

responsive 1047

Screen Shot 2021-07-12 at 9.38.40 AM.png (816×2 px, 225 KB)

responsive 1160

Screen Shot 2021-07-12 at 9.38.50 AM.png (676×2 px, 198 KB)

responsive 1208

Screen Shot 2021-07-12 at 9.38.58 AM.png (772×2 px, 213 KB)

Please compare against current prod. Let me know if we need to do something different at these widths.

Fyi, more screenshots available at mobile and desktop wide widths on the patch at https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/704151/1#message-db1c7ba53f268225549085539cae98e125630cc5

Change 704429 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/core@master] Add wider desktop breakpoint

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

@alexhollender ( cc @Jdlrobson ) expected behavior for the username link is that it should only show up in the user links dropdown menu up until 1000px and thereafter should disappear from the user links menu?

current default behavior is that the username link to user page appears in the user links dropdown menu at all breakpoints:

Screen Shot 2021-07-13 at 4.04.39 PM.png (330×1 px, 60 KB)

Screen Shot 2021-07-13 at 4.04.57 PM.png (452×1 px, 92 KB)

Screen Shot 2021-07-13 at 4.05.48 PM.png (422×1 px, 59 KB)

current default behavior is that the username link to user page appears in the user links dropdown menu at all breakpoints:

That seems to have been broken by another change. Fixed in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/704435 Fix collapsible item behaviour [NEW]

Change 704429 merged by jenkins-bot:

[mediawiki/core@master] Add wider desktop breakpoint

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

Change 704151 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update styles for talk message at lower port widths.

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

hi @alexhollender here's the latest on beta cluster -- there's a blip at 720-814 (and apparently around 380) that hopefully will be addressed in the design fixes ticket but this is hopefully better than it was (not sure why the gif isn't animating - if you click on it, you can see it in action)

T284243beta.gif (185×300 px, 2 MB)

This latest patch is merged so you can test this on beta cluster too by following the instructions in T285442

this looks great. where should it go next? Code review? QA?

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Orange talk page notification should display correctly at low horizontal resolutions

Screen Recording 2021-07-29 at 12.59.35 PM.mov.gif (608×1 px, 2 MB)

Edtadros updated the task description. (Show Details)
Edtadros added subscribers: ovasileva, Edtadros.

@ovasileva, I'm moving this to Ready for Signoff since it is User Links related.

Looks good, resolving