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

Features should be enabled based on screen width, not menu width #4130

Open
gravitystorm opened this issue Aug 2, 2023 · 1 comment · May be fixed by #5363
Open

Features should be enabled based on screen width, not menu width #4130

gravitystorm opened this issue Aug 2, 2023 · 1 comment · May be fixed by #5363
Labels
ui User Interface

Comments

@gravitystorm
Copy link
Collaborator

When the screen is too narrow to display the 'compact-nav' list of menus (namely: logo+primary-nav+compact-secondary-nav+(user_menu or login_menu)), we switch to the 'small-nav' setup, with just the logo and the "burger" menu button.

However, this breakpoint depends on the calculated width of the menu items, not the width of the screen. It means that some features, like the edit button and the export button, are disabled based on the length of certain strings, rather than the screen width. Even in English, this means it depends on the length of the user's display name:

Screenshot from 2023-08-02 11-43-24
Screenshot from 2023-08-02 11-44-15
Screenshot from 2023-08-02 11-44-27

I think it's reasonable to show the edit button, even in the 'small-nav' menu, for a screen width of over 1100 pixels!

Even without the silly name, the point still stands, particularly for languages where the four labels (edit, history, export, more) might be significantly different widths from in English. And it will also impact English, if we ever add or remove buttons from the primary menu.

We should decide what minimum width is appropriate for each tool, and hide (or disable) the buttons based on the screen width, instead of the menu width.

@gravitystorm gravitystorm added the ui User Interface label Aug 2, 2023
@AntonKhorev
Copy link
Collaborator

The obvious choice for small-to-compact breakpoint is 768px. Sidebars switch at this breakpoint. However the header ui (logo + edit + history + export + more + login + signup) still doesn't fit into this size with some localizations. This doesn't depend on the username because it happens when logged out.

I think the Export button should be moved to the secondary nav where it can collapse into More. #351 already did something like this long ago. The only reason for Export to stay as a button is that it opens a map and other secondary nav items don't. But that's their current implementation, I can imagine GPS Traces opening a map.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui User Interface
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants