Page MenuHomePhabricator

In mobile view, bundled notifications extend outside the screen limit
Closed, ResolvedPublic

Description

In mobile view, notifications inside bundles now have a fixed width which means they are cut off outside the screen.
This fixed width was added on purpose for desktop view - to make the notification appear properly, but it obviously doesn't work for smaller screens.

We could make the width of the sentence smaller, but in such small devices it makes the sentence really short - so short, that in some cases it's almost unusable:

Instead, we could, only for mobile-view, make the text wrap, like this:

It may also make this easier to click on small devices in mobile.

Waiting for input from @Pginer-WMF and @jmatazzoni

Event Timeline

Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJul 15 2016, 11:17 PM
Catrope assigned this task to Mooeypoo.Aug 2 2016, 9:19 PM
Catrope added a subscriber: Catrope.

The current state seems obviously worse to me than the alternative, so let's do #2 (text wrap) for now, and if @Pginer-WMF and/or @jmatazzoni want to do this differently, we can change it later.

Mooeypoo closed this task as Resolved.Aug 2 2016, 9:57 PM

With @Catrope 's fixing of the browser bug that prevented us from properly shrinking the text, this is no longer an issue. The items are their proper width, one line of text.

jmatazzoni reopened this task as Open.Aug 3 2016, 3:41 PM

Moving this to QA, just to be sure we're all good before closing.

Checked on iPhone9 (iOS 9.3.2), the original issue i.e. "In mobile view, bundled notifications extend outside the screen limit" is fixed.
The lines in bundled notifications are correctly truncated to fit the screen, e.g. in the screenshot below. However, as @Mooeypoo pointed out in the ticket, there is not much of useful info in such cases of extreme truncations. And the wrapping action is not displayed - I'll follow up on it with @Mooeypoo

I originally didn't think wrapping made sense, but the screenshot here looks pretty good. Maybe we should try it for mobile.

Change 302986 had a related patch set uploaded (by Mooeypoo):
Don't truncate bundled item content in mobile view

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

Change 302986 merged by jenkins-bot:
Don't truncate bundled item content in mobile view

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

Etonkovidova added a comment.EditedAug 10 2016, 11:28 PM

Checked in betlabs (iPHone 6s iOS 9.2.3)

The screenshot for the local wiki bundled notifications:

Wrapping works well in this context.

On mobile we can even remove some pieces of information or actions to get some extra room. For example, are timestamps for individual element inside a bundle really essential?

Another small detail, the separation between text lines looks smaller then usual. Has that been modified for some reason?

@Mooeypoo, do you know the answer to Pau's question?

...the separation between text lines looks smaller then usual. Has that been modified for some reason?

Wrapping works well in this context.
On mobile we can even remove some pieces of information or actions to get some extra room. For example, are timestamps for individual element inside a bundle really essential?
Another small detail, the separation between text lines looks smaller then usual. Has that been modified for some reason?

I think so... Bundles can show notifications from various times - especially xwiki bundles. The timestamp is super useful in those cases, I personally don't think we should get rid of them.

Of course, if the question is can we technically get rid of them in bundles, and is it easy to do, the answers are "yes" and "yes"... but I really think they're useful enough to display.

@Mooeypoo, do you know the answer to Pau's question?

...the separation between text lines looks smaller then usual. Has that been modified for some reason?

I didn't modify the line-height value, and inspecting the DOM (and less files) I don't see it being modified at all - it is the same line-height that exists for the "regular" item headings/descriptions.

line-height: 16px

With

font-size: 16px;

I think it might look a little different because in "regular" items, we usually have a heading and a description, and the description has a margin to be further down from the header text.

I can definitely change those values, though, but if I do - should I change them for all items (desktop/mobile + bundle/non-bundled) or just mobile bundled? Also, what line-height would work best?

I think so... Bundles can show notifications from various times - especially xwiki bundles. The timestamp is super useful in those cases, I personally don't think we should get rid of them.

Bundles show notifications from various times, but that also means you probably get them over time. The bundle showing the date of the most recent item may be a good-enough orientation, given that the Notification page provides all the information on a per notification basis.

I don't think that keeping those timestamps is causing a big problem, but I'm also not convinced they are absolutely needed in the panel (a context we want to be as minimal as possible to allow the users to scan the information as quick as possible). We may need to understand how those are used (feel free to provide some examples of activities where those timestamps become essential).

@Mooeypoo, do you know the answer to Pau's question?

...the separation between text lines looks smaller then usual. Has that been modified for some reason?

I didn't modify the line-height value, and inspecting the DOM (and less files) I don't see it being modified at all - it is the same line-height that exists for the "regular" item headings/descriptions.

I didn't modify the line-height value, and inspecting the DOM (and less files) I don't see it being modified at all - it is the same line-height that exists for the "regular" item headings/descriptions.

For "regular headings" my browser indicates we are using a 14px font size and a 16px line height on desktop, and 16px font and 16px line height on mobile:


In general, the line height needs to be bigger than the text size. Otherwise, the text looks crowded and that affects readability.

The default line-height value by browsers is about 1.2 times the font size. Readability guidelines often recommend it to be about 1.5 times the size of text (for dense paragraphs of text).

Line-height is expressed normally in relative terms to the font size (e.g., 1.2 or 1.2em) but not using a fixed pixel size. Otherwise as the font-size increases (either in the style sheet or the user’s browser accessibility settings), the line-height would persist affecting readability. The article I mentioned above has more details and examples on this.

In summary, I think we should not go below browser default line height. I'd propose setting it at 1.3 as line height, which would work well for both desktop and mobile font sizes (inside and outside of bundles).

Change 307637 had a related patch set uploaded (by Mooeypoo):
Fix line-height for notification item text

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

Mooeypoo added a comment.EditedAug 30 2016, 10:14 PM

I changed the rule from the strict 16px (which then didn't work in mobile, as you pointed out) to 1.3em.

Now I have -

Desktop (calculated values)

font-size: 14px;
line-height: 18.2px;

Mobile (calculated values)

font-size: 16px;
line-height: 20.8px

Patch is pending review.

Change 307637 merged by jenkins-bot:
Fix line-height for notification item text

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

Checked for the font-size/line-height adjustments (checked in Chrome mobile.

Mobile (calculated values)
font-size: 16px;
line-height: 20.8px

iPhone 6S iOS 9.3.2

Chrome mobile emulator:

jmatazzoni closed this task as Resolved.Oct 11 2016, 12:50 AM