Language selection dropdown

[ignotus666]

I had a go at creating a dropdown menu for choosing languages instead of the rather ugly horizontal list we currently have. After a number of failed attempts I thought I'd see if Chatgpt could be of any help - and after some back and forth I actually got it working. What do you think?

[ignotus666]

I think the red surrounding box and text when a language other than EN is selected isn't really needed, but I can't figure out how to get rid of it. I reckon this should be enough to draw users to click and look for their language (added a downward arrow):

Or we could also do it like this (shows active language):

[henkdegroot]

Perhaps worth adding a pre-selection of the expected language would be a nice addition.
Believe to remember the red is coming from a small javascript which is part of footer

[ignotus666]

Perhaps worth adding a pre-selection of the expected language would be a nice addition

Could you explain?

[ignotus666]

I like this one (minus the red stuff):

It's self-explanatory and displays the active language.

[henkdegroot]

Perhaps worth adding a pre-selection of the expected language would be a nice addition

Could you explain?

I meant that it would pre-select my language rather the just indicating my local may exist in the list

[ignotus666]

I meant that it would pre-select my language rather the just indicating my local may exist in the list

So you mean auto-detect the user's OS/browser language?

[ignotus666]

So you mean auto-detect the user's OS/browser language?

I have a version with this implemented. I also managed to get rid of the red box/message.

Here's the branch if anyone wants to try it out.

[henkdegroot]

So you mean auto-detect the user's OS/browser language?

Correct that is what I meant. As if it can be detected which language the user is most likely using, it would be nice to show the site in that language rather then show the English site and have the browser performing the translation, as most browser are offering to translate the site when it is not displayed in the users language and as a result a typical user may not make use of the translation performed by us.

[ignotus666]

Ok, so auto-detection of language seems to be working correctly and I aligned the dropdown button to the right:

[pljones]

• is it possibly to ensure the popup is scrollable (to allow for landscape on phones), if it isn't already
• is it possible to ensure consistent alignment (the selected language is left-indented - it looks wrong)

[henkdegroot]

I can't wait to try this.....just a bit limited doing that at the moment due to holiday.
Some things to consider.
Is the text Lang really needed?
As when the language is display, it would be obvious you can select a language and the Lang text might not have much meaning to a user of the website depending on the language ysed.

Would it be better to show the language name instead of the shortcode? I.e. English instead of en.
And perhaps another enhancement, adding a flag icon?
When a mobile device is used, just the flag icon can be used. Maybe that even works fine for the desktop site as well.

Good work on this....hope I can give this a test soon.

[ignotus666]

is it possibly to ensure the popup is scrollable (to allow for landscape on phones), if it isn't already

Done.

is it possible to ensure consistent alignment (the selected language is left-indented - it looks wrong)

I did that so the currently selected language stands out more. But it can be aligned.

Is the text Lang really needed?

This is still a PoC, so we can discuss what's best to show there.

Would it be better to show the language name instead of the shortcode? I.e. English instead of en.
And perhaps another enhancement, adding a flag icon?

The thing about these is that it adds a fair bit of complexity, particularly taking into account that adding languages is automated (and I'd like to keep it that way).

[pljones]

I did that so the currently selected language stands out more. But it can be aligned.

Maybe add an outline box with curved corners around the selected language, if the widget supports that? Anyway, I think the bold text is enough. (I'd omit the underline, too.)

[henkdegroot]

The thing about these is that it adds a fair bit of complexity, particularly taking into account that adding languages is automated (and I'd like to keep it that way).

Okay, guess the automatic add of a language can still work when using a language + "display name". Anyway can also be done later or not at all.

[ignotus666]

Maybe add an outline box with curved corners around the selected language, if the widget supports that? Anyway, I think the bold text is enough. (I'd omit the underline, too.)

Hmm, style changes to the dropdown also affect the navigation menu and I'm having a hard time trying to separate them. I've never messed with css stuff and it's a bit overwhelming... Will come back to it at another time.

Okay, guess the automatic add of a language can still work when using a language + "display name". Anyway can also be done later or not at all.

I suppose when a language is added and we get the lang code from the issue title with a regex, we could also do the same for the full language name (requesting that it be included in the title) and store it somewhere to be retrieved for the dropdown.

[ignotus666]

@pljones what about this?:

[ignotus666]

Thinking more about displaying the full language name - I don't think it'll work, for aesthetic reasons. For some languages, particularly those with more than one variant, we'd end up with a massive button to display all the text, e.g. "Português (Portugal)". Once you try to abbreviate that, you might as well just stay with what we already have.

Oh, and another thing - it's possible to sort the languages alphabetically. Should we keep English at the top always (and sort the rest), or insert it at its corresponding place? I think I prefer the latter, but whatever.

[henkdegroot]

Guess it depends what you consider to be massive. Here an example from another site:

Keeping the current letter codes works as well for me.

For sorting, think alpha sort would be good but no real preference.

[ignotus666]

True.

How about this instead of "lang"?

[henkdegroot]

First time I have seen this "icon" being used. Looks good to me and is universal for all languages.

[ignotus666]

It's quite commonly used. Wikipedia uses it for example.

[ignotus666]

Final (or close enough) version:

• Rounded the button and dropdown so they're consistent with other buttons on the website.
• Managed to test on Smartphone and behaves as it should (scrolling).
• Moved all the css styling related to the language selector from fw.css to langselect.html so it's all in the same place.
• Added the dropdown icon to /assets/img.

Further suggestions are welcome.

[henkdegroot]

@ignotus666 do you have a screenshot as well for the mobile version?

[ignotus666]

Here you go:

[gilgongo]

This will be so much better! 🥇

Might a later version use flags?

Always a bit iffy with things like EN and some others I guess...

[ignotus666]

I think the flag thing is a bit tricky here. My understanding is that the app uses a Qt module or whatever you call it that has lists of languages and flags that you can draw from. Here we'd have to create that whole thing ourselves, I suppose using arrays to store all languages and flags... theoretically possible I guess but a fair amount of work. Or maybe not, there might be an easier way but I'm almost out of my depth with what I have... I'll look into displaying the full language name though for now (in each language if that makes sense), which I think is more doable.

[ignotus666]

There you go:

Not 100% sure I got all the languages right, but that wasn't too difficult. Next I'll have to look at how to automate future language additions, but it should certainly be doable.

[ignotus666]

The scripts to add languages automatically and display the full name in the dropdown have been updated and tested to work. I'll open a PR shortly so the changes can be reviewed in case I missed something.

Edit: @gilgongo I've just realised that a PR with this is going to conflict with a number of PRs that are waiting to be merged, in particular #988. I've completely re-done langselect.html and I don't really know how to integrate those changes. Then, in #990 there are changes to _config.yml and add-lang.yml that might be easier if they go in with my PR for this, as I've edited those files a fair amount. The rest of that PR should be fine.

Not sure what the best course of action is.

[gilgongo]

@ignotus666 Ah yes I did wonder about that. Seeing as my changes are pretty simple, it would be better to incorporate them in with your PR as they're all related.

I can put my PRs into draft, then let you do yours and we can have a look at integrating them at that point? My changes to langselect.html are just some if/then stuff.