Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor language tabs and make them responsive #1815

Closed
Tracked by #170 ...
JoeyStk opened this issue Oct 31, 2022 · 1 comment · Fixed by #2866
Closed
Tracked by #170 ...

Refactor language tabs and make them responsive #1815

JoeyStk opened this issue Oct 31, 2022 · 1 comment · Fixed by #2866
Assignees
Labels
effort: medium Should be doable in <12h enhancement This improves an existing feature prio: low Not urgent, can be resolved in the distant future.
Milestone

Comments

@JoeyStk
Copy link
Contributor

JoeyStk commented Oct 31, 2022

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:

Design Requirements

image

@JoeyStk JoeyStk added feature New feature or request enhancement This improves an existing feature ui-ux Issues that requires an UI/UX perspective. effort: medium Should be doable in <12h labels Oct 31, 2022
@timobrembeck timobrembeck added this to the 22Q4 milestone Oct 31, 2022
@ulliholtgrave ulliholtgrave modified the milestones: 22Q4, 23Q1 Nov 4, 2022
@JoeyStk JoeyStk modified the milestones: 23Q1, 23Q2 Feb 17, 2023
@JoeyStk JoeyStk added the prio: low Not urgent, can be resolved in the distant future. label Feb 17, 2023
@JoeyStk JoeyStk added blocked Blocked by external dependency and removed ui-ux Issues that requires an UI/UX perspective. labels Mar 6, 2023
@osmers osmers added the ui-ux Issues that requires an UI/UX perspective. label Mar 13, 2023
@JoeyStk
Copy link
Contributor Author

JoeyStk commented Mar 13, 2023

Suggestion from @timoludwig

My suggestion would be the following:

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

    show all tabs

    Screenshot 2023-03-12 at 13-21-11 Integreat Editorial System

  • 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

    Screenshot 2023-03-12 at 13-21-58 Integreat Editorial System
    Screenshot 2023-03-12 at 13-22-29 Integreat Editorial System

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

    replace the "other languages" text with another icon

    Screenshot 2023-03-12 at 13-36-47 Integreat Editorial System

    omit the text completely,

    Screenshot 2023-03-12 at 13-33-35 Integreat Editorial System

    or show the dropdown chevron inside the one tab

    Screenshot 2023-03-12 at 13-24-39 Integreat Editorial System

  • 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.

@timobrembeck timobrembeck modified the milestones: 23Q2, 23Q3 Jul 2, 2023
@svenseeberg svenseeberg modified the milestones: 23Q3, 23Q4 Aug 16, 2023
@dkehne dkehne modified the milestones: 23Q4, 24Q1 Sep 11, 2023
@JoeyStk JoeyStk removed ui-ux Issues that requires an UI/UX perspective. blocked Blocked by external dependency labels Oct 20, 2023
@JoeyStk JoeyStk self-assigned this Dec 9, 2023
@dkehne dkehne modified the milestones: 24Q1, 24Q3 Dec 13, 2023
@JoeyStk JoeyStk removed the feature New feature or request label Jan 26, 2024
@MizukiTemma MizukiTemma mentioned this issue Feb 15, 2024
24 tasks
@osmers osmers removed this from the 24Q3 milestone Jun 4, 2024
@osmers osmers modified the milestones: 24Q4, Backlog Jun 4, 2024
@JoeyStk JoeyStk modified the milestones: Backlog, 24Q3 Jun 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
effort: medium Should be doable in <12h enhancement This improves an existing feature prio: low Not urgent, can be resolved in the distant future.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants