<p>Refs <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="636898598" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2654" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2654/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2654">#2654</a></p>
<p>This is a draft implementation of using <code>simple_form</code> and Bootstrap. I might split this PR into stages, e.g. a separate PR for refactoring the existing CSS, and I haven't finished noodling around to find any remaining forms that I broke.</p>
<p>In the meantime, you can see how simple_form work for the trace upload form:</p>
<pre><code><%= simple_form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<%= f.input :gpx_file, :as => :file, required: true %>
<%= f.input :description %>
<%= f.input :tagstring %>
<%= f.input :visibility, :collection => [:private, :public, :trackable, :identifiable],
:include_blank => false,
:hint => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
<%= f.button :submit %>
<%= link_to t(".help"), t(".help_url"), :class => "btn btn-link" %>
<% end %>
</code></pre>
<p>So for example, <code>f.input</code> takes care of checking the i18n for hints, checks the model for errors, looks up labels, and adds all those elements automatically.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/2655'>https://github.com/openstreetmap/openstreetmap-website/pull/2655</a></p>
<h4>Commit Summary</h4>
<ul>
<li>Add simple_form gem</li>
<li>Rubocop autofix for initializers</li>
<li>Refactor away from global form control styling</li>
<li>Customise simple_form_bootstrap defaults</li>
<li>Merge simple_form translations into the main en.yml form</li>
<li>Remove the red colour override, and use the bootstrap default</li>
<li>Refactor the trace forms to use simple_form and bootstrap</li>
</ul>
<h4>File Changes</h4>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-11a0d7906801d9dea0eccb85667ad811">.rubocop.yml</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-8b7db4d5cc4b8f6dc8feb7030baa2478">Gemfile</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-e79a60dc6b85309ae70a6ea8261eaf95">Gemfile.lock</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-bf43b4ee3000757ff301fb468531b6c6">app/assets/stylesheets/common.scss</a>
(413)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-96b2d5c7bef3f6d39e7f6cde1306d4d1">app/assets/stylesheets/parameters.scss</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-5881511596805618464c557b50ca5240">app/views/browse/changeset.html.erb</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-349adda24ee4ba5f87868d4ee0bebdda">app/views/browse/new_note.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-1ef4f43f391758064c76f8828ca8d1bc">app/views/browse/note.html.erb</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-42bd45bb47a1dab7bd75ad1cf2c9c939">app/views/diary_entries/show.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-7adf047d6024ca3ebd6f3fcb2245ec8d">app/views/friendships/make_friend.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-43a3d2432c5f77bc2364d552ce75abca">app/views/friendships/remove_friend.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-d97173ec8a5ff12c017f98ac7727b5cf">app/views/issues/_comments.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-f99e7f31882042f2501d6af5f30f9396">app/views/issues/index.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-01f31ee51fbf95ce8037164971b3c8f9">app/views/layouts/_search.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-72918a44d8787caf20ce25254170eb08">app/views/oauth_clients/edit.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-ddce0efde591fdd7eac19bede308cf83">app/views/oauth_clients/index.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-32abed273a19048d6b900b08ca18799e">app/views/oauth_clients/show.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-87e03d44e8967949a00b0c1fc2516fee">app/views/redactions/edit.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-fca4e4e07b705653a51341c2e2006634">app/views/redactions/new.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-49cbad8ba4aa10474a9312dafe6814fd">app/views/site/export.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-215a7ff766fcddf984c2b8ed2b2363a7">app/views/traces/edit.html.erb</a>
(59)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-839557e852505842ca3304a8ffa8c4f5">app/views/traces/new.html.erb</a>
(39)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-924c6df1c1101f04eb94e58c3b866d40">app/views/traces/show.html.erb</a>
(8)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-1f29aa56ed9530a01cc53ebfa79fe005">app/views/user_blocks/edit.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-f4396929f9f1089492cd5a43310114e1">app/views/user_blocks/new.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-0cc5a77c7a6d1792b832de7fbcb5d1d2">app/views/user_blocks/revoke.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-085bea8f66b07b89b8cda8d9afd18a2c">app/views/users/confirm.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-2e53d44b860b5d8afd9401affe20436e">app/views/users/confirm_email.html.erb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-f4de36cf4800d91a9c7e75cecd1ecf32">app/views/users/logout.html.erb</a>
(2)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-754d908a36f8f0af1316fe4b5ecd2c9b">config/initializers/simple_form.rb</a>
(177)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-b674edbbd1a9d89a9ae3d301ed2ff506">config/initializers/simple_form_bootstrap.rb</a>
(433)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-37c9b835927e3c363588f172de9bb6fa">config/locales/en.yml</a>
(28)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655/files#diff-3da1a5ba31cda8836648575cb3ee1cab">lib/templates/erb/scaffold/_form.html.erb</a>
(15)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/2655.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/2655.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/2655.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/2655.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2655">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLIPPM3CGRVC5XNZNQ3RWCW4HANCNFSM4N3JAG5A">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLJWDZNT2BICWL5E4YDRWCW4HA5CNFSM4N3JAG5KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4JPWMJTQ.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/2655",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/2655",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>