Make language selector more compact
Closed, ResolvedPublic

Description

Currently the language selector component becomes wider as there is more space available:

This results in a control that becomes too wide for no reason. The following adjustments are proposed instead:

  • Make the component grow to accommodate the language labels with some padding (8px vertical, and 16px horizontal).
  • Set a maximum width for the component not to take more then one third of the available space, and make the language labels to be cropped with ellipsis for the exceptionally long cases.
  • Remove the chevron.
  • Use base90 (#f8f9fa) as background color.

The resulting component should look closer to the example below:

Pginer-WMF removed Pginer-WMF as the assignee of this task.

Are the language names intended to be font-weight: bold?

Are the language names intended to be font-weight: bold?

Yes. We are adjusting their style closer to the one buttons use.

santhosh updated the task description. (Show Details)Jul 11 2017, 8:36 AM

Change 364443 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Make language selector more compact

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

I am not happy with javascript size handling https://gerrit.wikimedia.org/r/364443. I think the requirement

"Make the component grow to accommodate the language labels with some padding (8px horizontal, ad 16px vertical)." is what make this difficult.

flex-shrink, flex-grow can handle this I guess. How about doing this auto grow only if browser support it and leave fixed size for old browsers? @Pginer-WMF ?

I am not happy with javascript size handling https://gerrit.wikimedia.org/r/364443. I think the requirement

"Make the component grow to accommodate the language labels with some padding (8px horizontal, ad 16px vertical)." is what make this difficult.

flex-shrink, flex-grow can handle this I guess. How about doing this auto grow only if browser support it and leave fixed size for old browsers? @Pginer-WMF ?

I agree JS-based size control tends to lead to problems. The proposed solution sounds good even if not all users can benefit from it. Another alternative is to set a reasonable fixed max-width for the labels as illustrated in this codepen.

I also noted that the padding indications were reversed (it should be 8px vertical and 16px horizontal). I'll correct that in the description.

Pginer-WMF updated the task description. (Show Details)Jul 18 2017, 11:53 AM

Current patch uses flexbox. It seems to work nicely, other than the fact that if there is a short name and a long name, both get "punished" equally. Ideally the long name would get more truncation than the short one, but it seems too complex to implement. Rather I would prefer to avoid having to truncate at all, per my comment in T158961#3492562.

Change 364443 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Make language selector more compact

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

Checked in betalabs - the language selector length adjusts to the length of languages.

Etonkovidova closed this task as Resolved.Aug 8 2017, 12:27 AM