Refactor the export form to use bootstrap form controls

I started refatoring the export inputs to use a flex grid instead of
floats, but this is perhaps the one place on the whole site where left/right
makes sense since even in rtl we want min_lon on the left.

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index e3c8ff202b63eab47f0807b4bf8016584c15b5b3..3a8b97fbc9a8b01bd7d9d5158a2184d76de0826d 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1005,9 +1005,8 @@ tr.turn:hover {
   .export_area_inputs {
     margin-bottom: $lineheight/2;
     input[type="text"] {
   .export_area_inputs {
     margin-bottom: $lineheight/2;
     input[type="text"] {

-      width: 80px;
+      width: 100px;

       text-align: center;
       text-align: center;

-      margin-bottom: 5px;

     }
   }
 
     }
   }
 


@@ -1025,18 +1024,13 @@ tr.turn:hover {
       float: right;
       /* no-r2 */ margin-right: -1px;
     }
       float: right;
       /* no-r2 */ margin-right: -1px;
     }

-    #minlat { margin-bottom: 0; }
+    #minlat { margin-bottom: -1px; }

   }
 
   .export_bound {
     margin: $lineheight/4;
   }
 
   }
 
   .export_bound {
     margin: $lineheight/4;
   }
 

-  .export_button {
-    margin-top: $lineheight;
-    margin-bottom: $lineheight;
-  }
-

   dl {
     padding-left: $lineheight/2;
     dd {
   dl {
     padding-left: $lineheight/2;
     dd {

diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index 934b56a0248c865117f4df277b946d43043089e7..d6db3908b73c0816eb4fd0a7f0b2f9dd9245045a 100644 (file)
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -2,17 +2,17 @@
 
 <%= render "sidebar_header", :title => t(".title") %>
 
 
 <%= render "sidebar_header", :title => t(".title") %>
 

-<%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form standard-form" }) do %>
+<%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form" }) do %>

   <%= hidden_field_tag "format", "osm" %>
 
   <div class='export_area_inputs'>
     <div class='export_boxy'>
   <%= hidden_field_tag "format", "osm" %>
 
   <div class='export_area_inputs'>
     <div class='export_boxy'>

-      <%= text_field_tag("maxlat", nil, :size => 10, :class => "export_bound") %>
-      <br />
-      <%= text_field_tag("minlon", nil, :size => 10, :class => "export_bound") %>
-      <%= text_field_tag("maxlon", nil, :size => 10, :class => "export_bound") %>
-      <br /><br />
-      <%= text_field_tag("minlat", nil, :size => 10, :class => "export_bound") %>
+      <%= text_field_tag("maxlat", nil, :size => 10, :class => "export_bound form-control mx-auto") %>
+      <div class="clearfix">
+        <%= text_field_tag("minlon", nil, :size => 10, :class => "export_bound form-control") %>
+        <%= text_field_tag("maxlon", nil, :size => 10, :class => "export_bound form-control") %>
+      </div>
+      <%= text_field_tag("minlat", nil, :size => 10, :class => "export_bound form-control mx-auto") %>

       </div>
     <a id='drag_box' href="#"><%= t ".manually_select" %></a>
   </div>
       </div>
     <a id='drag_box' href="#"><%= t ".manually_select" %></a>
   </div>


@@ -27,8 +27,8 @@
   </div>
 
   <div id="export_commit">
   </div>
 
   <div id="export_commit">

-    <div class="export_button">
-      <%= submit_tag t(".export_button") %>
+    <div class="form-group d-flex">
+      <%= submit_tag t(".export_button"), :class => "btn btn-primary mx-auto" %>

     </div>
 
     <p><%= t ".too_large.advice" %></p>
     </div>
 
     <p><%= t ".too_large.advice" %></p>