Move search form to header on small screens

app/assets/javascripts/index.js

@@ -297,12 +297,13 @@ $(document).ready(function () {
     if (this.host === window.location.host && OSM.route(this.pathname + this.search + this.hash)) e.preventDefault();
   });
 
-  $("#search_form").on("submit", function(e) {
+  $(".search_form").on("submit", function(e) {
     e.preventDefault();
-    OSM.route("/search?query=" + encodeURIComponent($("#query").val()) + OSM.formatHash(map));
+    $("header").addClass("closed");
+    OSM.route("/search?query=" + encodeURIComponent($(this).find("input[name=query]").val()) + OSM.formatHash(map));
   });
 
-  $("#describe_location").on("click", function(e) {
+  $(".describe_location").on("click", function(e) {
     e.preventDefault();
     var precision = zoomPrecision(map.getZoom());
     OSM.route("/search?query=" + encodeURIComponent(

app/assets/javascripts/index/search.js

@@ -1,10 +1,10 @@
 OSM.Search = function(map) {
-  $("#query")
+  $(".search_form input[name=query]")
     .on("focus", function() {
-      $("#describe_location").fadeOut(100);
+      $(".describe_location").fadeOut(100);
     })
     .on("blur", function() {
-      $("#describe_location").fadeIn(100);
+      $(".describe_location").fadeIn(100);
     });
 
   $("#sidebar_content")
@@ -48,7 +48,8 @@ OSM.Search = function(map) {
 
   page.pushstate = page.popstate = function(path) {
     var params = querystring.parse(path.substring(path.indexOf('?') + 1));
-    $("#query").val(params.query);
+    $(".search_form input[name=query]").val(params.query);
+    map.invalidateSize();
     $("#sidebar_content").load(path, function() {
       if (xhr.getResponseHeader('X-Page-Title')) {
         document.title = xhr.getResponseHeader('X-Page-Title');
@@ -80,7 +81,7 @@ OSM.Search = function(map) {
   page.unload = function() {
     map.removeLayer(marker);
     map.removeObject();
-    $("#query").val("");
+    $(".search_form input[name=query]").val("");
   };
 
   return page;

app/assets/stylesheets/common.css.scss

@@ -900,21 +900,25 @@ nav.secondary {
 
 /* Rules for the search box */
 
-#search_form {
+header .search_form {
+  display: none;
+}
+
+.search_form {
   position: relative;
   padding: $lineheight/2;
   background-color: $lightgrey;
 
-  #query_wrapper {
+  .query_wrapper {
     position: relative;
     overflow: hidden;
+    border-radius: 2px 0 0 2px;
   }
 
-  input {
+  input[type=text] {
     width: 100%;
     height: 30px;
     border-right: none;
-    border-radius: 2px 0 0 2px;
 
     transition: 300ms linear;
     -webkit-transition: 300ms linear;
@@ -933,7 +937,7 @@ nav.secondary {
     border-radius: 0 2px 2px 0;
   }
 
-  #describe_location {
+  .describe_location {
     position: absolute;
     top: 6px;
     right: 6px;

app/assets/stylesheets/small.css.scss

@@ -32,8 +32,13 @@ header {
   &.closed nav {
     display: none;
   }
+
+  .search_form {
+    display: block;
+  }
 }
 
+#sidebar .search_form,
 #edit_tab,
 #export_tab {
   display: none;

app/views/layouts/_header.html.erb

@@ -7,6 +7,7 @@
   </h1>
   <a href="#" id="menu-icon"></a>
   <nav class='primary'>
+    <%= render :partial => "layouts/search" %>
     <ul>
       <li id="edit_tab" class="dropdown <%= current_page_class(edit_path) %>">
         <%= link_to t('layouts.edit'), edit_path, :class => "tab geolink editlink",

app/views/layouts/_search.html.erb

@@ -0,0 +1,7 @@
+<%= form_tag search_path, :class => "search_form" do %>
+  <%= submit_tag t('site.search.submit_text') %>
+  <div class='query_wrapper'>
+    <input type="text" name="query" value="<%= params[:query] %>" placeholder="<%= t('site.search.search') %>">
+    <%= link_to t('site.search.where_am_i'), '#', { :class => "describe_location", :title => t('site.search.where_am_i_title') } %>
+  </div>
+<% end %>

app/views/layouts/map.html.erb

@@ -18,14 +18,7 @@
 
 <% content_for :content do %>
   <div id="sidebar">
-    <%= form_tag search_path, :id => "search_form" do %>
-      <%= submit_tag t('site.search.submit_text') %>
-      <div id='query_wrapper'>
-        <%= text_field_tag :query, params[:query],
-                           :placeholder => t('site.search.search') %>
-        <%= link_to t('site.search.where_am_i'), '#', { :id => "describe_location", :title => t('site.search.where_am_i_title') } %>
-      </div>
-    <% end %>
+    <%= render :partial => "layouts/search" %>
 
     <% if STATUS == :database_offline or STATUS == :api_offline %>
       <p class="error"><%= t 'layouts.osm_offline' %></p>