<p>Based on feedback from <a class="user-mention" data-hovercard-type="user" data-hovercard-url="/users/tordans/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tordans">@tordans</a>, here is an alternative to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="636904039" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2655" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/2655/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/2655">#2655</a> that uses the <a href="https://github.com/bootstrap-ruby/bootstrap_form">bootstrap_form</a> gem instead of simple_form.</p>
<p>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 <a class="user-mention" data-hovercard-type="user" data-hovercard-url="/users/tordans/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tordans">@tordans</a> wrt to maintainability of the two gems, my feelings on <code>bootstrap_form</code> are:</p>
<p>Pros:</p>
<ul>
<li>Stays closer to the standard rails forms approach. Doesn't invent its own grammar e.g. <code>f.text_field</code> (the rails way) instead of <code>f.input</code> (the simple_form / formtastic approach).</li>
<li>Much easier to use the different form types, like horizontal forms, if we want to.</li>
</ul>
<p>Cons:</p>
<ul>
<li>No automatic detection of form fields types. You need to specify e.g. <code>f.text_field :description</code> instead of <code>f.input :description</code>. So given this topic is both a pro and a con, take your pick.</li>
<li>Unsophisticated i18n for <code>select</code> field options. <code>simple_form</code> allows you to pull select option labels straight from the i18n system, e.g. <code>f.input :visibility, :collection => [:private, :public, :trackable, :identifiable]</code> will look up <code>en.simple_form.options.trace.visibility.private</code> etc for the labels. <code>bootstrap_form</code>, like rails, leaves you to do this by hand on each form afaict e.g. <code>f.select :visibility, [[t("traces.visibility.private"), "private"], ...]</code> which is clunky.</li>
</ul>
<p>Headaches:</p>
<ul>
<li>Edge case with file upload fields - you have to go full hog and use the bootstrap custom file widget, including javascript. If you use <code>f.file_field_without_bootstrap</code>, 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. <code>simple_form</code> 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.</li>
</ul>
<p>Overall, I favour this PR over <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="636904039" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2655" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/2655/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/2655">#2655</a>, but I'm interested to see what everyone else thinks.</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/2667'>https://github.com/openstreetmap/openstreetmap-website/pull/2667</a></p>

<h4>Commit Summary</h4>
<ul>
  <li>Refactor away from global form control styling</li>
  <li>Remove the red colour override, and use the bootstrap default</li>
  <li>Add bootstrap_form formbuilder gem</li>
  <li>Use bootstrap_form as the formbuilder for GPX upload form</li>
</ul>

<h4>File Changes</h4>
<ul>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-8b7db4d5cc4b8f6dc8feb7030baa2478">Gemfile</a>
    (1)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-e79a60dc6b85309ae70a6ea8261eaf95">Gemfile.lock</a>
    (4)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-a9c3bd311eab80c9ebe6a69830f9ad02">app/assets/javascripts/application.js</a>
    (2)
  </li>
  <li>
    <strong>A</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-84b6007a15457bb376beef5e5908c637">app/assets/javascripts/bs-custom-file-input-init.js</a>
    (3)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-85615be150afde4ff49cfcc265d9e0f2">app/assets/javascripts/leaflet.layers.js</a>
    (2)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-bf43b4ee3000757ff301fb468531b6c6">app/assets/stylesheets/common.scss</a>
    (416)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-96b2d5c7bef3f6d39e7f6cde1306d4d1">app/assets/stylesheets/parameters.scss</a>
    (1)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/files#diff-570e27a5178b349336f893e66dc30acb">app/views/messages/_message_summary.html.erb</a>
    (2)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/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/2667/files#diff-924c6df1c1101f04eb94e58c3b866d40">app/views/traces/show.html.erb</a>
    (6)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/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/2667/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/2667/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/2667/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/2667/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/2667/files#diff-f4de36cf4800d91a9c7e75cecd1ecf32">app/views/users/logout.html.erb</a>
    (2)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-37c9b835927e3c363588f172de9bb6fa">config/locales/en.yml</a>
    (26)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2">package.json</a>
    (4)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/2667/files#diff-8ee2343978836a779dc9f8d6b794c3b2">yarn.lock</a>
    (5)
  </li>
</ul>

<h4>Patch Links:</h4>
<ul>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/2667.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/2667.patch</a></li>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/2667.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/2667.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/2667">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLLXX2TKJENMFHQYHWLRYISCXANCNFSM4OG2MFVA">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLJWIBAD34GQPQEUEALRYISCXA5CNFSM4OG2MFVKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4JTOBV5A.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/2667",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/2667",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>