Page MenuHomePhabricator

Fix graph dialog in mobile visual editor
Closed, ResolvedPublic

Description

The graph dialog is making poor use of the space in mobile:


The menu takes up too much space, leaving inadequate room for the pages.

Event Timeline

Tchanders triaged this task as Normal priority.Sep 4 2018, 3:16 PM
Tchanders created this task.
Tchanders added a comment.EditedSep 4 2018, 5:45 PM

In this case, I'd propose changing the booklet layout (menu at the side) to an index layout, like this (from the score inspector):


There's not really a good reason to use the booklet layout here, unlike with the gallery dialog, where the images need to be seen (T203477), or the math dialog, which has a very long menu.

Change 459255 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/Graph@master] Improve layout of graph dialog

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

Appearance after that patch:

That looks and works much better in my opinion, also given that it's just three options.
One thing I'd like to note is, the labels and widgets should align top & bottom in 320px to 481px media query range. That would circumvent weird px breakout in next line and make labels like “Automatic padding” which got weirdly translated to “Automatische Auffüllung” (<= I have no idea what that should refer to as German native speaker) stay in one line
Status quo in German:

@Volker_E I don't think we should change the layout align to 'top' right now as it is quite a regression on desktop.

We should probably look in to making the 'left' align field layouts responsive, but for now we just want to make the dialogs usable on mobile with the least disruption, and then we'll iterate.

@Esanders

One thing I'd like to note is, the labels and widgets should align top & bottom in 320px to 481px media query range.

Sorry, forgot you put that, but even so I don't think we should hack in a downstream media query to transform left align to top align.

Change 459255 merged by jenkins-bot:
[mediawiki/extensions/Graph@master] Improve layout of the visual editor graph dialog

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

Sorry, forgot you put that, but even so I don't think we should hack in a downstream media query to transform left align to top align.

@Esanders Why not? It's already hacked in to be left and right aligned context-specifically. Why not continue treating it as a special case and improve that case on mobile?

It's already hacked in to be left and right aligned context-specifically.

What do you mean by that?

Should I file a task for making the alignment responsive upstream?

The new layout looks good. But there are some alignment issues for the Data tab as well on a very small screen (iphone5s). The delete icons are not aligned with the input fields. I can mark this as verified if these issues are being tracked on a separate task.

Deskana closed this task as Resolved.Oct 1 2018, 2:05 PM
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptOct 1 2018, 2:05 PM