Change the LanguageSelector UI to a dropdown list

[wt-lin]

Description

• Change the LanguageSelector UI to a dropdown list. It won't show in mobile view.
• Move the Q&A content to About page. Home page shows the vaccine data only.
• Amend the meta data
• Detect the user's language when initialising i18n.

Screenshots

• PC

• Mobile

[kevinjcliao]

@i-liszt hey! Thanks for putting this together again! Here are some thoughts:

• 很多外語使用者讀不懂『華語』這兩個字也不知道它的意思是點擊這個按鈕之後會看得到所有支援的語言。
• 因此，把語言選項放在最上面是對於外語朋友最友善的顯示方式。

我同意，現在把 Language Selector 放在最上面是有一點浪費空間，但是還沒想出一個能夠指示給外語朋友可以轉換語言的地方。你覺得呢？另外，在小螢幕是上，使用者不知道這個功能是在 Menu 裡面。。。

• Many non-Mandarin speakers can't understand the characters for Mandarin. So displaying these two characters in a drop-down menu doesn't tell them that they can switch the language there.
• As such, putting the language options at the top is easiest in terms of discoverability for our non-Mandarin speaking users.

I agree, putting the language selector at the top is a bit of a waste of space, but I haven't found a better way to clearly show changing languages to our users. What do you think? In addition, mobile users don't know the functionality is inside the menu button.

Proposals/主意

1. Add an icon next to the drop-down selector that is 'the world', or some other icon that tells our user that this dropdown is for languages. Maybe also add the text in English: "Change Language"
2. Add the flag for each language next to the language.
3. Place the language selector between the menu button and vaxx.tw even in mobile view.

What do you think?

[wt-lin]

I agree, so I changed the UI to an earth icon. As for the icons of each country, need to find other sources. To make UI consistent, I suggest find a icon library to apply. That one should match the design style of Bootstrap as well.

Moreover, because the view of mobile device is limited, I hide the language selector. Language will detected by the navigator.language. Basically, it follows the browser setting. People often set the language they're familiar with.

[wt-lin]

Some UI are still inconsistent. Need time to redesign. Better to do this with the information architecture, e.g., what information this application would like to deliver.

[wt-lin]

By the way, could you tell me what issues did you encounter when executing the pre-commit command? I notice that my setting is reverted.