Make language selector more compact
Closed, ResolvedPublic
Actions

Assigned To

None

Authored By

	Pginer-WMF
	Jul 7 2017, 9:21 AM

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:

cx-dashboard-reviewed.png (316×664 px, 63 KB)

Details

	Subject	Repo	Branch	Lines +/-
	Make language selector more compact	mediawiki/extensions/ContentTranslation	master	+37 -24

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Pginer-WMF	T157457 Align Content Translation with the design style guide
		Resolved		None	T169967 Make language selector more compact

Event Timeline

Pginer-WMF created this task.Jul 7 2017, 9:21 AM

Pginer-WMF removed Pginer-WMF as the assignee of this task.Jul 7 2017, 9:24 AM

Pginer-WMF added a project: User-Petar.petkovic.

Pginer-WMF mentioned this in T158961: Rearrange selectors in the dashboard.Jul 7 2017, 9:26 AM

• Petar.petkovic moved this task from Backlog to In progress on the User-Petar.petkovic board.Jul 7 2017, 9:30 AM

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

In T169967#3419512, @Nikerabbit wrote:

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

gerritbot added a project: Patch-For-Review.Jul 11 2017, 2:24 PM

• Petar.petkovic moved this task from In progress to For Review on the User-Petar.petkovic board.Jul 11 2017, 2:26 PM

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 ?

In T169967#3447564, @santhosh wrote:

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

• Petar.petkovic moved this task from For Review to QA on the User-Petar.petkovic board.Aug 3 2017, 8:00 AM

ReleaseTaggerBot added a project: MW-1.30-release-notes (WMF-deploy-2017-08-08_(1.30.0-wmf.13)).Aug 3 2017, 8:00 AM