Page MenuHomePhabricator

Improve the alignment for individual settings
Closed, DuplicatePublic

Description

Individual setting's alignment is not standard. there needs to be a separation between

  • title
  • byline (explanation of feature)
  • control (checkbox, dropdown, +/-)

We need a better format. the alignment shouldn't be dependent on what type of control it is.

Proposal

Title and by line goes on left,

  • easier to scan the features, as they start at the same point
  • better hierarchy and paddings between title, byline
  • the space given to the controls is independent of the type of control.

Note: the order shown in the mockup is after we promote font size and expand articles. before we do them, they will fall under beta

Zeplin spec
https://zpl.io/aRmMMgN

Event Timeline

Nirzar created this task.Nov 14 2017, 1:40 AM
Nirzar updated the task description. (Show Details)Nov 14 2017, 1:43 AM
Nirzar updated the task description. (Show Details)Nov 14 2017, 1:46 AM

This might as well be fixed in T169369. It's touching all this code and rewriting it in oojsui anyway so effectively starting from a clean slate. It also changed which widgets should be used.

Id suggest merging this into that card to avoid wasting developer time.

I thought developers love breaking down work into smaller chunks... I wanted to avoid "sneaking in" design changes but I guess, I will!

Jdlrobson added a comment.EditedNov 14 2017, 10:52 PM

@Volker_E - how can this be achieved via OOUI?

Closest I can get without hacking the css is:

In particular I'm curious if we can

  1. control width of drop down
  2. right align the checkbox alongside the dropdown.

@Nirzar I spent some time understanding OOUI a little more and I see a problem with the proposed design and the select menu. On a mobile screen the labels of the dropdown and the accompanying text conflict (and if the translation text is longer there will be more problems)

Using 75/25% split of the available space we get:

Nexus 5:


iPhone 5

Increasing available space for controls to 50% ensures labels do not get cut off in English

Makes me wonder if the select menu widget should be on its own line or more similar to Material design https://material.io/guidelines/components/menus.html#menus-simple-menus

Let me know your thoughts!

I just looked into the issue. It seems OOJS UI dropdown widget doesn't actually trigger select element using native OS UI.

This looks like a major issue in OOJS UI in general. very concerning one.

OOJS UI on iOS

What it should actually work like

@Volker_E we need to get this fixed really soon.

@Jdlrobson let's go with using what you are showing but we will fix the OOJS UI dropdown widget at the source

Jdlrobson added a comment.EditedNov 16 2017, 7:23 PM

I've raised a bug for the more serious issue here - T180730 (alignment tracked here T180652). I hadn't even got round to testing how it behaved on a mobile device!

The non-focused state would still be problematic... The drop down in the example you've given works nicely as the labels are two characters maximum. Is the clipping behaviour okay even if we can't read the label? An alternative might be to drop it down to the line below.


what is the width you are trying?

here's what it looks like on a 350pt wide phone with exact sizes

also we can reduce the labels to

  • Small
  • Default
  • Large
  • X Large

for now.

@Nirzar I think this can be merged into T169369 right?
Is there anything missing from this on http://reading-web-staging.wmflabs.org/wiki/Special:MobileOptions ?

@Jdlrobson yes can be merged