[openstreetmap/openstreetmap-website] Use simple_form and bootstrap (#2654)

Andy Allan notifications at github.com
Thu Jun 11 10:21:27 UTC 2020


Our forms are quite varied, for various historical reasons. Some use the rails input helpers (e.g. `f.text_field`) and some are completely hand-crafted (with raw html, e.g. `<input type=`).

We also have a custom set of CSS styling rules for forms, some of which I dislike (e.g. making text inputs 50% wide, even on small screens) and some of which is confusing (e.g. our use of deemphasised buttons).

Finally, we have inconsistent behaviours between different forms, such as when and where to show error messages, location of cancel buttons (if any), marking dangerous actions with different button colours, and all these sort of things that people subliminally expect with modern websites.

So I'd like to move our forms to use Bootstrap styling, and gain all the nice things that come with it like hints, placeholders, buttons, error field highlights etc. But building those forms manually, even with rails helpers, involves a lot of work to get the errors and hints in the right places, and with the right CSS classes to get styled correctly. This is where [simple_form](https://github.com/heartcombo/simple_form) comes in. I've used it, and other form builders like [formtastic](https://github.com/justinfrench/formtastic), in other projects, and simple_form ties in best with bootstrap. It greatly simplifies the form building and increases the chance of ending up on the "happy path" with errors hints etc all working smoothly.

I'm opening this issue just to explain what I'm planning, since this is another one of these things that will take multiple PRs to implement. I have some WIP code to share shortly, but here's a preview of the trace upload form.
![Screen Shot 2020-06-11 at 12 12 59](https://user-images.githubusercontent.com/360803/84373578-0fd59880-abdd-11ea-8b2e-d2ca39c7d013.png)


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2654
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20200611/c1dd5556/attachment.htm>


More information about the rails-dev mailing list