Refactor language tabs and make them responsive

[JoeyStk]

Motivation

We want to improve the CMS views for mobile screen. One major remaining issue are the language tabs. Up until now they still look wild (s. screenshot). However because they were initially written in Python this needs major changes. Therefore we want to rebuild the language tabs to use Javascript.
Based on that we want check via Javascript how much space there is and fill the space with as many tabs as possible (as by now this is hard-coded at four tabs) and store the left-over tabs in a dropdown "Other languages". In case there is not enough space to even show the current language and "other languages" the dropdown has the higher hierarchy and the current language gets hidden.

Proposed Solution

• Refactor language tabs using Javascript
• Make language selection usable on mobile screens

Alternatives

• We can ask UI/UX for better solutions. So far we have only discussed this inside the CMS team

Additional Context

This is part of the Meta Issue #170 to make the CMS responsive.

This is blocked by:

• Create a design for language tabs #2108

Design Requirements

[JoeyStk]

Suggestion from @timoludwig

My suggestion would be the following:

• On very wide screens which fit all of them, we

  show all tabs

  

• On all screens which fit at least 2 tabs (but not all), we

  show the current language plus as many as possible, and the "other languages" dropdown

  
  

• On all screens which only fit one tab, we either

  replace the "other languages" text with another icon

  

  omit the text completely,

  

  or show the dropdown chevron inside the one tab

  

• All screens which are even smaller are probably unusable for content creation anyways, I don't think we need a separate solution for that.

Since we don't know how many tabs fit onto the screen until we have rendered them, this solution would have to be implemented in JS.