Page MenuHomePhabricator

Language selector: adjust list items style
Open, MediumPublic

Description

Looking at the initial implementation of the language selector (T253303) available for Section Translation at test wiki, items in the list of languages need some adjustments:

  • Adjust item dimensions. Items should use an 8px padding on all sides except their start (32px), and have 4px margin between columns (when displayed as a dialog, in wider screens). Currently items have 4px padding on all sides except the start (32px) and some additional unexpected margins on top and after the element. See images of the inspected elements and the spec below. (See T287888#7361404 for the aspects missing)
  • Cursor on hover. Hovering a language of the list should use the "pointer" cursor (a hand communicating interactivity).
Inspected padding and marginSpec
Screenshot 2021-08-02 at 18.02.15 (2).png (600×1 px, 149 KB)
Layout spacing.png (768×1 px, 88 KB)

Event Timeline

Pginer-WMF triaged this task as Medium priority.Aug 2 2021, 4:38 PM
Pginer-WMF created this task.

Change 714456 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX Language selector: Style adjustments

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

Change 714456 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX Language selector: Style adjustments

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

This looks good. The proposed adjustments seem in place. The only consideration is that when the selector is presented as a dialog, the separation between the columns should be 4px. Currently it expands to fill a larger space.

The current behaviour makes sense when the selector is taking the full width (on small screens), but for larger screens, it is preferred to keep such distance fixed to 4px to avoid making the selector wider than needed.

I was playing a bit with the browser inspector, and found some potential rules that may be stretching the dialog further (I marked two items as hovered to make more noticeable the distance between them):

CurrentDisabling width/height constraints
lang-sel-width-original.png (822×1 px, 305 KB)
lang-sel-width-modified.png (822×1 px, 306 KB)

The screenshot under the header "Disabling width/height constraints" is not centrally aligned in the screen right? And when we start searching for something, the number of languages quickly reduces. So if we base the dialog size on languages in it, the dialog shrinks. And the size jumps on key presses since it triggers searches. So we need some sensible width, may be adjusted for wider and extra wider screens.

The screenshot under the header "Disabling width/height constraints" is not centrally aligned in the screen right? And when we start searching for something, the number of languages quickly reduces. So if we base the dialog size on languages in it, the dialog shrinks. And the size jumps on key presses since it triggers searches. So we need some sensible width, may be adjusted for wider and extra wider screens.

Good points. I was not proposing to disable those rules as the solution. I included the screenshot to illustrate how the current spacing between columns was larger than 4px, and which were some potential rules adding the distortion. Th ideal would be to keep the column separation at 4px, the dialog centered and avoid it to shrink further as results are filtered.

I don't know the best way to translate that to CSS rules. In case a max-width is helpful., I included the expected width for two columns (348px) and three columns (512px) in the spec image above.

Change 739701 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Restrict the width of language selector on wider screens

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

Change 739701 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Restrict the width of language selector on wider screens

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

As per this patch, we restrict the max width of the dialog so that columns are not stretched apart beyond a limit in wider screens.

Change 739701 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Restrict the width of language selector on wider screens

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