From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 11 Nov 2013 21:37:32 +0000 (-0800)
Subject: Move search form to header on small screens
X-Git-Tag: live~4609^2~127
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/0d52b82d4e2103fd77400c0619266c5321c0c90e?hp=2ebe5de1a1cf247596f98cd82420cb00179cc477

Move search form to header on small screens
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 5e96c3517..7d2e954ad 100644
--- a/app/assets/javascripts/index.js
+++ b/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(
diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js
index e92f3747f..7f6eac9ca 100644
--- a/app/assets/javascripts/index/search.js
+++ b/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;
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 081f0945f..86b5a6a75 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/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;
diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index 182272e78..5e8edc28c 100644
--- a/app/assets/stylesheets/small.css.scss
+++ b/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;
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 1142eeb79..334056ee1 100644
--- a/app/views/layouts/_header.html.erb
+++ b/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",
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
new file mode 100644
index 000000000..1d054d5cd
--- /dev/null
+++ b/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 %>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 1daae059e..a7d00f53f 100644
--- a/app/views/layouts/map.html.erb
+++ b/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>