Adjustments for mobile UI
Closed, ResolvedPublic

Description

While checking T157212: Make translation dashboard layout responsive to adapt to small screens and testing a mobile view, several small UI issues are present. I put them into a separate ticket so they could be prioritized and addressed later. Those small issues are present consistently for iPhone and Android devices and might need design consideration.

(1) The navigation links Preference', 'Beta' etc are pushed down to the point that Contribution' and Log out are obscured by the Content translation UI elements.

(2) The description of the article gets jammed with languages indicators.

(3) The icons - the star and X - are placed too close to each other.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 25 2017, 7:42 PM
Petar.petkovic added a subscriber: Petar.petkovic.

Thank you @Etonkovidova for creating this ticket.

T157212 was more like a follow-up from T158646. The sidebar was broken into two cards, and then (along with main piece of content) those are made into responsive items, flying around as screen size changes. I think that was the main purpose of previous tickets and it is one step towards better support for mobile and touch devices.

As far as this ticket goes, thank you very much for putting your efforts into creating it. I have noticed the same problems while working on previous tickets, and wanted to file these problems myself.

(1) The navigation links Preference', 'Beta' etc are pushed down to the point that Contribution' and Log out are obscured by the Content translation UI elements.

This one actually has it's own design and ticket -> T160918.

Great work, thank you!

Change 382408 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Adjustments for mobile UI

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

Change 382408 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Adjustments for mobile UI

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

Arrbee moved this task from Backlog to QA on the Language-2017-Oct-Dec board.Oct 9 2017, 9:46 AM
Arrbee moved this task from Backlog to Mobile CX on the ContentTranslation board.Oct 27 2017, 5:23 AM
Etonkovidova updated the task description. (Show Details)Oct 27 2017, 6:42 AM

(2) The description of the article gets jammed with languages indicators.

Seems to be fixed - article descriptions are truncated properly so they do not overlap anything else:


However, there are still several issues with truncation (besides other UI issues):

  • an extra dot in the description of 'Roger Norreis' article
  • the ellipsis for the 'Georgina Chapman' article description are placed far way from the actual description. The screenshot below illustrates another problem with the ellipsis - the dotdotdot are too close.

Etonkovidova added a comment.EditedOct 27 2017, 6:49 AM

(3) The icons - the star and X - are placed too close to each other.

The issue is solved - although often the X icon overlaps the article titles.

The horizontal view looks good.

Etonkovidova updated the task description. (Show Details)Oct 27 2017, 6:50 AM
Etonkovidova added a comment.EditedOct 27 2017, 7:15 AM

Closing this ticket since (1) will be addressed in a different ticket. For addressing other mobile layout issues - T179148: Special:ContentTranslation page: Mobile UI layout issues

Etonkovidova closed this task as Resolved.Oct 27 2017, 8:32 AM
Nikerabbit moved this task from QA to Done on the Language-2017-Oct-Dec board.Nov 7 2017, 7:04 AM