From: Matt Amos <zerebubuth@gmail.com>
Date: Mon, 10 Nov 2014 19:17:21 +0000 (+0000)
Subject: Use buttons for switching to/from directions.
X-Git-Tag: live~4261^2~13^2~3
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/3a9db4cf30899d256558f2e03a7c4c30d66669fd

Use buttons for switching to/from directions.

Previously, used a small text link which wasn't very usable. Now
it uses larger buttons which are (hopefully) more usable. Also
this sorts out the weird right-hanging text boxes for the to/from
in the directions sidebar - now they look like proper text input
boxes.

However, the "back to search" button and the directions submit
buttons are weirdly large and I don't quite understand why.
Hopefully an easy fix for someone who knows the arcana of CSS
better than I.
---

diff --git a/app/assets/images/directions.png b/app/assets/images/directions.png
new file mode 100644
index 000000000..197244f4a
Binary files /dev/null and b/app/assets/images/directions.png differ
diff --git a/app/assets/images/search.png b/app/assets/images/search.png
new file mode 100644
index 000000000..15cc32e47
Binary files /dev/null and b/app/assets/images/search.png differ
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 95e5d8328..39519b81a 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -918,7 +918,6 @@ header .search_forms,
 .directions_form {
   position: relative;
   padding: $lineheight/2;
-  padding-top: 1px;
   background-color: $lightgrey;
 
   .query_wrapper {
@@ -930,17 +929,19 @@ header .search_forms,
   input[type=text] {
     width: 100%;
     height: 30px;
-    border-right: none;
-
     transition: 300ms linear;
   }
 
+  input[type=text].overflow {
+    border-right: none;
+  }
+
   input:focus {
     outline: none;
     box-shadow: 0px 0px 7px #9ED485;
   }
 
-  input[type=submit] {
+  input[type=submit].float {
     float: right;
     width: auto;
     min-width: 0;
@@ -952,6 +953,31 @@ header .search_forms,
     font-size: 10px;
     color: $blue;
   }
+
+  .describe_location {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    font-size: 10px;
+    color: $blue;
+  }
+
+  .switch_link {
+    float: right;
+    width: auto;
+    min-width: 0;
+    margin-left: 6px;
+  }
+
+  img.button {
+    display: block;
+  }
+
+  span.force_width {
+    width: 100%;
+    padding-right: 25px;
+    display: block;
+  }
 }
 
 /* Rules for the map key which appears in the popout sidebar */
@@ -1007,10 +1033,6 @@ td.direction {
 td.direction.i#{$i}  { background-position: #{($i)*-20+20}px 0px; }
 }
 
-.directions_form input[type="submit"] {
-    margin-top: 30px !important;
-}
-
 p#routing_summary {
     padding: 0 $lineheight $lineheight/4;
 }
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index 6e1aa5dc2..55b5650b2 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -1,32 +1,26 @@
 <div class="search_forms">
   <form method="GET" action="<%= search_path %>" class="search_form">
-    <div class='query_options'>
-      <%= link_to t('site.search.where_am_i'), '#', { :class => "describe_location", :title => t('site.search.where_am_i_title') } %>
-      &middot;
-      <%= link_to t('site.search.get_directions'), directions_path, { :class => "geolink", :title => t('site.search.get_directions_title') } %>
-    </div>
-
-    <%= submit_tag t('site.search.submit_text') %>
-
+    <%= link_to image_tag('directions.png', :class => 'button'), directions_path, { :class => "button switch_link", :title => t('site.search.get_directions_title') } %>
+    <%= submit_tag t('site.search.submit_text'), :class => 'float' %>
     <div class='query_wrapper'>
-      <%= text_field_tag "query", params[:query], :placeholder => t("site.search.search"), :autofocus => autofocus %>
+      <%= text_field_tag "query", params[:query], :placeholder => t("site.search.search"), :autofocus => autofocus, :class => 'overflow' %>
+      <%= link_to t('site.search.where_am_i'), '#', { :class => "describe_location", :title => t('site.search.where_am_i_title') } %>
     </div>
   </form>
 
   <form method="GET" action="<%= directions_path %>" class="directions_form">
-    <div class='query_options'>
-      <%= link_to t('site.search.close_directions'), root_path, { :class => "geolink", :title => t('site.search.close_directions_title') } %>
-    </div>
-
-    <%= submit_tag t('site.search.submit_text') %>
+    <div width="100%" align="right"><%= link_to image_tag('search.png', :class => 'button'), root_path, { :class => "button", :title => t('site.search.close_directions_title') } %></div>
 
-    <div class='query_wrapper'>
+    <div width="100%">
       <%= image_tag "marker-green.png", :class => 'routing_marker', :id => 'marker_from', :draggable => 'true' %>
-      <%= text_field_tag "route_from", params[:from], :placeholder => t('site.search.from') %>
+      <span class="force_width"><%= text_field_tag "route_from", params[:from], :placeholder => t('site.search.from') %></span>
+    </div>
+    <div width="100%">
       <%= image_tag "marker-red.png"  , :class => 'routing_marker', :id => 'marker_to'  , :draggable => 'true' %>
-      <%= text_field_tag "route_to"  , params[:to]  , :placeholder => t('site.search.to') %>
-      <select class='routing_engines' name='routing_engines'></select>
-      <%= image_tag "searching-small.gif", :class => 'spinner', :style => "vertical-align: middle; display: none;" %>
+      <span class="force_width"><%= text_field_tag "route_to"  , params[:to]  , :placeholder => t('site.search.to') %></span>
     </div>
+    <select class='routing_engines' name='routing_engines'></select>
+    <div width="100%" align="right"><%= submit_tag t('site.search.submit_text') %></div>
+    <%= image_tag "searching-small.gif", :class => 'spinner', :style => "vertical-align: middle; display: none;" %>
   </form>
 </div>