[openstreetmap/openstreetmap-website] Show edit and export on small screens (PR #4839)

[Tobias]

I looked into making the edit button visible on small screen https://github.com/openstreetmap/openstreetmap-website/issues/2233 and ran into a few issues that are making this less straight forward than I was hoping it to be.

1. Bootstrap does not provide responsive classes to change the button group to vertical. 
    - There is an issue on this at https://github.com/twbs/bootstrap/issues/39213
    - We could change the layout of course. 
    - We could also change the classes in JavaScript, which I did for this draft.
3. Bootstrap has a bug with vertical button list when the first button is a dropdown. 
   - I reported this in https://github.com/twbs/bootstrap/issues/40487 and my PR https://github.com/twbs/bootstrap/pull/40488 might fix it. 
   - I added this fix as a workaround to our css for this draft.
5. Bootstrap does not support vertical button groups with split buttons ATM. 
   - See https://getbootstrap.com/docs/5.2/components/button-group/#vertical-variation _"Split button dropdowns are not supported here."_. 
   - We can work around this by adding a few utility classes, which I did for this draft. 
   - But since the way we do responsive design on the website is a bit special, there are slight changes to what we have right now in certain edge case screen sizes. We could use more JS to fix this if needed…
7. Bootstrap does not handle hidden items in a group.
   - We are hiding the "Export" Page on the button group via CSS ATM and Bootstrap does not handle the case of hidden elements, so the button group borders are wrong. 
   - For this draft I made all menu items visible. Following the logic that the reason why we have an export page so prominently on the page at all is to showcase the story of OSM, which is just as true on mobile. Hiding part of the story is worse than showing it so users can learn about it an realize they need a different device to use this part of the website. – We could continue hiding the page, of course, but need to add more custom css or JS to make bootstrap work.

**This is what it looks like:**

<img width="601" alt="image" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/7f1e4fb8-e330-4fa5-bc73-1069d0b80c91">

<img width="720" alt="image" src="https://github.com/openstreetmap/openstreetmap-website/assets/111561/a1657b76-d981-4f1b-9862-fb9d532711ab">

---

**Where do go from here?**

I consider hiding the Edit button in 2024 a bug which we should fix. And this PR is a way to do this.

In the near future we will need to reconsider this part of the menu, especially the screen usually visible on mobile to incorporate editors in the menu (https://github.com/openstreetmap/operations/issues/877#issuecomment-2130858478).


---

Closes https://github.com/openstreetmap/openstreetmap-website/issues/2233
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4839

-- Commit Summary --

  * Show edit and export in small-nav

-- File Changes --

    M app/assets/javascripts/application.js (3)
    M app/assets/stylesheets/common.scss (19)
    M app/views/layouts/_header.html.erb (8)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4839.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4839.diff

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

Message ID: <openstreetmap/openstreetmap-website/pull/4839 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240525/869ffa66/attachment-0001.htm>