[openstreetmap/openstreetmap-website] Features should be enabled based on screen width, not menu width (Issue #4130)

Andy Allan notifications at github.com
Wed Aug 2 11:07:41 UTC 2023


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](https://github.com/openstreetmap/openstreetmap-website/assets/360803/0f73ef45-668f-4001-b4d3-c5ec805c2320)
![Screenshot from 2023-08-02 11-44-15](https://github.com/openstreetmap/openstreetmap-website/assets/360803/95b9a745-c585-4943-9a05-5733cedf444c)
![Screenshot from 2023-08-02 11-44-27](https://github.com/openstreetmap/openstreetmap-website/assets/360803/4446cd51-e72a-4793-aa9f-a3ac8d8e84b5)

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.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/4130
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/4130 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230802/1398a879/attachment.htm>


More information about the rails-dev mailing list