Touch Up Language Dropdown

[skipjack]

Some follow up code-style and styling tweaks for #1148.

cc @lcxfs1991

Preview of styling tweaks:

[lcxfs1991]

Looks perfect!

[sprrw]

Great job on adding multiple languages, but we should not use national flags in language selectors for the following reasons:

1. It is wrong semantically, as the flags do not represent languages but nations. There's simply no one to one correspondence between flags and languages, neither in injective nor in surjective sense.
2. It may be offensive to some people because their multilingual country is associated with not their own language, or because their language is not associated with their own country.
3. Webpack has built itself some reputation, therefore using a wrong pattern will serve as a bad reference for other people.

Best way to represent languages in a limited navbar space is by using abbreviated name of the language in the language itself.

[skipjack]

@sprrw very good points, would you be interested in submitting a PR? By abbreviated name you mean the two or three letter language code like "En" for example?

[sprrw]

Yeah, I can do a PR. Let's discuss, how do we want to present the language on the menu.
I think that the best way is just list the language as it's spelled in the language itself. So, for current set of languages, it will be:

• English
• 中文

Will this be a good way?

We can add ISO 639 codes as well, but on the second thought I think it'll only create unnecessary clutter without adding any useful additional information.

We can also use the "language icon" (see http://www.languageicon.org/) in place of a flag to indicate there's a language dropdown.

[skipjack]

So something like this:

[icon]
|_ English
|_ 中文
|_ Español
|_ Other options...

... with the language icon and dropdown arrow in the nav and each language option spelled out in it's own locale? Sounds like a great plan to me 👍

We can add ISO 639 codes as well, but on the second thought I think it'll only create unnecessary clutter without adding any useful additional information.

I was thinking of this more in terms of how it would be displayed in the nav bar not the actual options (e.g. En ↓) but I think it's fine to just always display the language icon.

[sprrw]

@skipjack Does this look alright to you?

[skipjack]

Looks great, I would just remove the "English" section from the actual dropdown for now to conserve space as it may break the nav on smaller screen sizes:

In terms of implementation though you could add that bit and just comment it out for now. That way I'll know to add it back in down the road once we've cleaned up our breakpoints a bit.

[sprrw]

ok, will do a PR then with that bit commented.

[sprrw]

@skipjack Can you ping the most suitable reviewer for #1310?

[skipjack]

Sure I'll review shortly and ping one other for review as well.