[openstreetmap/openstreetmap-website] Move richtext help to a tab on small screens (PR #5059)

Anton Khorev notifications at github.com
Thu Aug 8 04:10:08 UTC 2024


As I said in #5042 you have to scroll to the end of the help card in order to reach the edit/preview buttons. But you also have to scroll there in order to reach the submit button which is also annoying. What if we don't display the help card on small screens unless the user requests it?

When the screen is wide enough the UI looks like it did before:
![image](https://github.com/user-attachments/assets/1a41df85-1f7a-4f5e-b299-19888597c64c)

When the screen is narrow:
![image](https://github.com/user-attachments/assets/a5e87b81-3f81-4a91-bc71-1d8314942b4f)
![image](https://github.com/user-attachments/assets/8c4b90e1-5a11-4e3b-ac57-04906b0cc2f1)


You can view, comment on, or merge this pull request online at:

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

-- Commit Summary --

  * Remove .richtext_dopreview css class
  * Remove .richtext_content css class
  * Remove .richtext_preview css class
  * Remove unused richtext dom ids
  * Use closest() instead of parents() when looking for richtext container
  * Add richtext help tab
  * Move help card between pane/sidebar depending on sidebar visibility
  * Switch away from help tab when help sidebar becomes visible
  * Set min preview height when switching away from edit tab

-- File Changes --

    M app/assets/javascripts/richtext.js (46)
    M app/views/shared/_richtext_field.html.erb (40)

-- Patch Links --

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

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

Message ID: <openstreetmap/openstreetmap-website/pull/5059 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240807/6fdfa02b/attachment.htm>


More information about the rails-dev mailing list