[openstreetmap/openstreetmap-website] WIP: Bootstrap form (#2667)

[Andy Allan]

Based on feedback from @tordans, here is an alternative to #2655 that uses the [bootstrap_form](https://github.com/bootstrap-ruby/bootstrap_form) gem instead of simple_form.

It covers the same ground as the earlier PR, namely converting the trace forms, so it's easy to compare the two options. Beyond the general advice given by @tordans wrt to maintainability of the two gems, my feelings on `bootstrap_form` are:

Pros:
* Stays closer to the standard rails forms approach. Doesn't invent its own grammar e.g. `f.text_field` (the rails way) instead of `f.input` (the simple_form / formtastic approach).
* Much easier to use the different form types, like horizontal forms, if we want to.

Cons:
* No automatic detection of form fields types. You need to specify e.g. `f.text_field :description` instead of `f.input :description`. So given this topic is both a pro and a con, take your pick.
* Unsophisticated i18n for `select` field options. `simple_form` allows you to pull select option labels straight from the i18n system, e.g. `f.input :visibility, :collection => [:private, :public, :trackable, :identifiable]` will look up `en.simple_form.options.trace.visibility.private` etc for the labels. `bootstrap_form`, like rails, leaves you to do this by hand on each form afaict e.g. `f.select :visibility, [[t("traces.visibility.private"), "private"], ...]` which is clunky.

Headaches:
* Edge case with file upload fields - you have to go full hog and use the bootstrap custom file widget, including javascript. If you use `f.file_field_without_bootstrap`, then you get the standard browser button (like we have now), but you have to do everything by else hand, such as label tags and error displays. `simple_form` was half-way in between. But since I've already figured out how to get all the javascript working (eventually) then I'm happy to go with it.

Overall, I favour this PR over #2655, but I'm interested to see what everyone else thinks.

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

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

-- Commit Summary --

  * Refactor away from global form control styling
  * Remove the red colour override, and use the bootstrap default
  * Add bootstrap_form formbuilder gem
  * Use bootstrap_form as the formbuilder for GPX upload form

-- File Changes --

    M Gemfile (1)
    M Gemfile.lock (4)
    M app/assets/javascripts/application.js (2)
    A app/assets/javascripts/bs-custom-file-input-init.js (3)
    M app/assets/javascripts/leaflet.layers.js (2)
    M app/assets/stylesheets/common.scss (416)
    M app/assets/stylesheets/parameters.scss (1)
    M app/views/browse/changeset.html.erb (6)
    M app/views/browse/new_note.html.erb (2)
    M app/views/browse/note.html.erb (4)
    M app/views/diary_entries/show.html.erb (2)
    M app/views/friendships/make_friend.html.erb (2)
    M app/views/friendships/remove_friend.html.erb (2)
    M app/views/issues/_comments.html.erb (2)
    M app/views/issues/index.html.erb (2)
    M app/views/layouts/_search.html.erb (2)
    M app/views/messages/_message_summary.html.erb (2)
    M app/views/oauth_clients/edit.html.erb (2)
    M app/views/oauth_clients/index.html.erb (2)
    M app/views/oauth_clients/show.html.erb (2)
    M app/views/redactions/edit.html.erb (2)
    M app/views/redactions/new.html.erb (2)
    M app/views/site/export.html.erb (2)
    M app/views/traces/edit.html.erb (59)
    M app/views/traces/new.html.erb (39)
    M app/views/traces/show.html.erb (6)
    M app/views/user_blocks/edit.html.erb (2)
    M app/views/user_blocks/new.html.erb (2)
    M app/views/user_blocks/revoke.html.erb (2)
    M app/views/users/confirm.html.erb (2)
    M app/views/users/confirm_email.html.erb (2)
    M app/views/users/logout.html.erb (2)
    M config/locales/en.yml (26)
    M package.json (4)
    M yarn.lock (5)

-- Patch Links --

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

-- 
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/pull/2667
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20200624/3fc00477/attachment.htm>