Use bootstrap_form as the formbuilder for GPX upload form

This also uses the recommended bs-custom-file-input javascript plugin
for the file input control.

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e455f297be32868f6a5ae73921b4f416c5c5f3ef..d861cbb3374cdf92f3fab27c15220df66171c70e 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -16,6 +16,8 @@
 //= require piwik
 //= require richtext
 //= require querystring
+//= require bs-custom-file-input
+//= require bs-custom-file-input-init
 
 /*
  * Called as the user scrolls/zooms around to manipulate hrefs of the

diff --git a/app/assets/javascripts/bs-custom-file-input-init.js b/app/assets/javascripts/bs-custom-file-input-init.js
new file mode 100644 (file)
index 0000000..3afdac2
--- /dev/null
+++ b/app/assets/javascripts/bs-custom-file-input-init.js
@@ -0,0 +1,5 @@
+/* global bsCustomFileInput */
+
+$(document).ready(function () {
+  bsCustomFileInput.init();
+});

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 52729cf62048e5f6d6462ec1c320cbe7facb7534..6de8fee64f7539af7331e4e5d76e5e1fac8e36b1 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -728,6 +728,14 @@ body.compact {
   }
 }
 
+/* Temporary label size override until we remove site-wide font customisation */
+
+form {
+  label {
+    font-size: 16px;
+  }
+}
+
 /* Rules for the search and direction forms */
 
 header .search_forms,
@@ -1168,30 +1176,6 @@ tr.turn:hover {
   float: right;
 }
 
-/* Rules for the new trace form */
-
-#new_trace {
-  input[type=text] {
-    width: 50%;
-    width: calc(100% - 150px);
-    max-width: 500px;
-  }
-}
-
-/* Rules for the edit trace form */
-
-.edit_trace {
-  .standard-form-row p {
-    margin-bottom: 0px;
-  }
-
-  input[type=text] {
-    width: 50%;
-    width: calc(100% - 150px);
-    max-width: 500px;
-  }
-}
-
 /* Rules for the user profile page */
 
 #userinformation {

diff --git a/app/views/traces/edit.html.erb b/app/views/traces/edit.html.erb
index b5600d059ab6b897e391e9c5bcbc592a888265e7..13829727c9378b6443daf46af126ae82fc578cf3 100644 (file)
--- a/app/views/traces/edit.html.erb
+++ b/app/views/traces/edit.html.erb
@@ -4,49 +4,16 @@
 
 <img src="<%= url_for :controller => "traces", :action => "picture", :id => @trace.id, :display_name => @trace.user.display_name %>">
 
-<%= form_for @trace do |f| %>
-
-<div id='edit-trace-form' class='standard-form'>
-  <fieldset>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".filename" %></label>
-      <p class='deemphasize'><%= @trace.name %> (<%= link_to t(".download"), trace_data_path(@trace) %>)</p>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".uploaded_at" %></label>
-      <p class='deemphasize'><%= l @trace.timestamp, :format => :friendly %></p>
-    </div>
-  <% if @trace.inserted? %>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".points" %></label>
-      <p class='deemphasize'><%= @trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/, '\1,') %></p>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".start_coord" %></label>
-    </div>
-    <div class="geo">
-      <span class="latitude"><%= @trace.latitude %></span>;
-      <span class="longitude"><%= @trace.longitude %></span>
-    </div>
-    (<%= link_to t(".map"), :controller => "site", :action => "index", :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %> / <%= link_to t(".edit"), :controller => "site", :action => "edit", :gpx => @trace.id, :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %>)
-  <% end %>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".owner" %></label>
-      <p class='deemphasize'><%= link_to @trace.user.display_name, user_path(@trace.user) %></p>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".description" %></label>
-      <%= f.text_field :description %>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".tags" %></label>
-      <%= f.text_field :tagstring %> (<%= t ".tags_help" %>)
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".visibility" %></label>
-      <%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %> (<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)
-    </div>
-  </fieldset>
-  <%= f.submit %>
-</div>
+<%= bootstrap_form_for @trace do |f| %>
+  <%= f.text_field :name, :disabled => true %>
+  <%= f.text_field :description %>
+  <%= f.text_field :tagstring %>
+  <%= f.select :visibility,
+               [[t("traces.visibility.private"), "private"],
+                [t("traces.visibility.public"), "public"],
+                [t("traces.visibility.trackable"), "trackable"],
+                [t("traces.visibility.identifiable"), "identifiable"]],
+               :help => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
+  <%= f.primary %>
+  <%= link_to t(".cancel"), show_trace_path(@trace.user, @trace), :class => "btn btn-link" %>
 <% end %>

diff --git a/app/views/traces/new.html.erb b/app/views/traces/new.html.erb
index d2ccebb4cd4621922ab1bd7bbc69c411eba6de63..b7951cb32eb8f167f46b11e0cef5500441ec4323 100644 (file)
--- a/app/views/traces/new.html.erb
+++ b/app/views/traces/new.html.erb
@@ -2,32 +2,16 @@
   <h1><%= t ".upload_trace" %></h1>
 <% end %>
 
-<%= error_messages_for "trace" %>
-
-<%= form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
-  <div class="standard-form">
-    <fieldset>
-      <div class='standard-form-row'>
-        <label for="trace_gpx_file" class="standard-label"><%= t ".upload_gpx" %></label>
-        <%= f.file_field :gpx_file %>
-      </div>
-      <div class='standard-form-row'>
-        <label class="standard-label"><%= t ".description" %></label>
-        <%= f.text_field :description %>
-      </div>
-      <div class='standard-form-row'>
-        <label class="standard-label"><%= t ".tags" %></label>
-        <%= f.text_field :tagstring %>
-        <span class="form-help deemphasize">(<%= t ".tags_help" %>)</span>
-      </div>
-      <div class='standard-form-row'>
-        <label class="standard-label"><%= t ".visibility" %></label>
-        <%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %>
-        <span class="form-help deemphasize">(<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)</span>
-      </div>
-    </fieldset>
-
-    <%= f.submit %>
-    <span class="form-help deemphasize"><a href="<%= t ".help_url" %>"><%= t ".help" %></a></span>
-  </div>
+<%= bootstrap_form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
+  <%= f.file_field :gpx_file, :placeholder => t("helpers.file.prompt") %>
+  <%= f.text_field :description %>
+  <%= f.text_field :tagstring %>
+  <%= f.select :visibility,
+               [[t("traces.visibility.private"), "private"],
+                [t("traces.visibility.public"), "public"],
+                [t("traces.visibility.trackable"), "trackable"],
+                [t("traces.visibility.identifiable"), "identifiable"]],
+               :help => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
+  <%= f.primary %>
+  <%= link_to t(".help"), t(".help_url"), :class => "btn btn-link" %>
 <% end %>

diff --git a/app/views/traces/show.html.erb b/app/views/traces/show.html.erb
index fe1d670c313adc9210175a2cc01885aea9ec2b4a..d82c51881b6d645f8760ceac521a289477c27a8b 100644 (file)
--- a/app/views/traces/show.html.erb
+++ b/app/views/traces/show.html.erb
@@ -55,10 +55,10 @@
 <br /><br />
 
 <% if current_user && (current_user==@trace.user || current_user.administrator? || current_user.moderator?) %>
-  <div class="buttons standard-form">
+  <div>
     <% if current_user == @trace.user %>
-      <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "button" %>
+      <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "btn btn-outline-primary" %>
     <% end %>
-    <%= button_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :data => { :confirm => t(".confirm_delete") } } %>
+    <%= link_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :class => "btn btn-outline-danger", :data => { :confirm => t(".confirm_delete") } } %>
   </div>
 <% end %>

diff --git a/config/locales/en.yml b/config/locales/en.yml
index 5ae211ffa0e43d865a5820bc06e732860cd3c551..8c4dd25d83f4d325fda5fa50d00f0e0d7febb96b 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -6,6 +6,8 @@ en:
       friendly: "%e %B %Y at %H:%M"
       blog: "%e %B %Y"
   helpers:
+    file:
+      prompt: Choose file
     submit:
       diary_comment:
         create: Save
@@ -93,6 +95,10 @@ en:
         longitude: "Longitude"
         public: "Public"
         description: "Description"
+        name: Filename
+        gpx_file: Upload GPX File
+        visibility: Visibility
+        tagstring: Tags
       message:
         sender: "Sender"
         title: "Subject"
@@ -105,6 +111,9 @@ en:
         description: "Description"
         languages: "Languages"
         pass_crypt: "Password"
+    help:
+      trace:
+        tagstring: comma delimited
   datetime:
     distance_in_words_ago:
       about_x_hours:
@@ -1819,11 +1828,6 @@ en:
       identifiable: "Identifiable (shown in trace list and as identifiable, ordered points with timestamps)"
     new:
       upload_trace: "Upload GPS Trace"
-      upload_gpx: "Upload GPX File:"
-      description: "Description:"
-      tags: "Tags:"
-      tags_help: "comma delimited"
-      visibility: "Visibility:"
       visibility_help: "what does this mean?"
       visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces"
       help: "Help"
@@ -1836,20 +1840,9 @@ en:
         one: "You have %{count} trace waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users."
         other: "You have %{count} traces waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users."
     edit:
+      cancel: Cancel
       title: "Editing trace %{name}"
       heading: "Editing trace %{name}"
-      filename: "Filename:"
-      download: "download"
-      uploaded_at: "Uploaded:"
-      points: "Points:"
-      start_coord: "Start coordinate:"
-      map: "map"
-      edit: "edit"
-      owner: "Owner:"
-      description: "Description:"
-      tags: "Tags:"
-      tags_help: "comma delimited"
-      visibility: "Visibility:"
       visibility_help: "what does this mean?"
       visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces"
     update:

diff --git a/package.json b/package.json
index 964bda4c117109f19ba85f9be6bea76ad4720a7a..5757fdb220a4a4cbb32d4ef52055bdaf89a3875e 100644 (file)
--- a/package.json
+++ b/package.json
@@ -1,7 +1,9 @@
 {
   "name": "openstreetmap",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "bs-custom-file-input": "^1.3.4"
+  },
   "devDependencies": {
     "eslint": "^6.8.0"
   }

diff --git a/test/controllers/traces_controller_test.rb b/test/controllers/traces_controller_test.rb
index fd91fa6175df7875686553d6c6ca84f096c63c0c..364142dd9a669b4aaf52352d16dc57c46419c7ea 100644 (file)
--- a/test/controllers/traces_controller_test.rb
+++ b/test/controllers/traces_controller_test.rb
@@ -616,7 +616,7 @@ class TracesControllerTest < ActionDispatch::IntegrationTest
     session_for(user)
     post traces_path, :params => { :trace => { :gpx_file => file, :description => "", :tagstring => "new,trace", :visibility => "trackable" } }
     assert_template :new
-    assert_match "Description is too short (minimum is 1 character)", response.body
+    assert_match "is too short (minimum is 1 character)", response.body
   end
 
   # Test fetching the edit page for a trace using GET

diff --git a/yarn.lock b/yarn.lock
index 249a4d621cf360f831d50842c26157776e2e2593..552a1a8d98cbab17c62bb5aa3cccf6e47f17dcdf 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -100,6 +100,11 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+bs-custom-file-input@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-custom-file-input/-/bs-custom-file-input-1.3.4.tgz#c275cb8d4f1c02ba026324292509fa9a747dbda8"
+  integrity sha512-NBsQzTnef3OW1MvdKBbMHAYHssCd613MSeJV7z2McXznWtVMnJCy7Ckyc+PwxV6Pk16cu6YBcYWh/ZE0XWNKCA==
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"