Improve, move geocoder

css/app.css

@@ -102,12 +102,21 @@ table th {
     right:0;
 }
 
-input#geocode-location {
+div.geocode-control {
     position:absolute;
-    background:#f4f4ff;
+    top:130px;
+    left:10px;
     color:#222;
 }
 
+#bar div.geocode-control button {
+    width:40px;
+}
+
+div.geocode-control input {
+    display:none;
+}
+
 #bar button {
     width:80px;
     white-space:nowrap;
@@ -145,19 +154,15 @@ div.buttons-joined {
 }
 
 #bar .messages {
-    position:absolute;
-    right:200px;
-    top:0;
     padding:10px;
     overflow:hidden;
     width:100px;
+    display:inline-block;
 }
 
 #bar .user {
-    width:200px;
-    position:absolute;
-    right:300px;
-    top:0;
+    width:150px;
+    display:inline-block;
     padding:10px;
 }
 
@@ -176,9 +181,7 @@ div.buttons-joined {
 }
 
 #bar button.save {
-    position:absolute;
-    top:0;
-    right:100px;
+    display:inline-block;
 }
 
 #bar button.mini,
@@ -188,8 +191,8 @@ div.buttons-joined {
 
 #bar input[type=text] {
     width:150px;
-    height:30px;
-    border:0;
+    height:20px;
+    border:1px solid #ccc;
     padding:5px;
     margin:0;
 }

js/id/id.js

@@ -60,24 +60,11 @@ window.iD = function(container) {
             .call(bootstrap.tooltip()
                 .placement('bottom'));
 
-        bar.append('input')
-            .attr({ type: 'text', placeholder: 'find a place', id: 'geocode-location' })
-            .on('keydown', function () {
-                if (d3.event.keyCode !== 13) return;
-                d3.event.preventDefault();
-                var val = d3.select('#geocode-location').node().value;
-                d3.select(document.body).append('script')
-                    .attr('src', 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
-                        encodeURIComponent(val) + '.jsonp?callback=grid');
-            });
 
         window.grid = function(resp) {
             map.center([resp.results[0][0].lon, resp.results[0][0].lat]);
         };
 
-        bar.append('div')
-            .attr('class', 'messages');
-
         bar.append('div')
             .attr('class', 'user')
             .append('div')
@@ -119,6 +106,9 @@ window.iD = function(container) {
                 }
             });
 
+        bar.append('div')
+            .attr('class', 'messages');
+
         var zoom = bar.append('div')
             .attr('class', 'zoombuttons')
             .selectAll('button')
@@ -127,6 +117,28 @@ window.iD = function(container) {
                 .text(function(d) { return d[1]; })
                 .on('click', function(d) { return d[2](); });
 
+        var gc = bar.append('div').attr('class', 'geocode-control');
+        gc.append('button').text('?');
+        gc.on('mouseover', function() {
+            d3.select('.geocode-control input').style('display', 'inline-block');
+        });
+        gc.on('mouseout', function() {
+            d3.select('.geocode-control input').style('display', 'none');
+        });
+        gc.append('input')
+            .attr({
+                type: 'text',
+                placeholder: 'find a place'
+            })
+            .on('keydown', function () {
+                if (d3.event.keyCode !== 13) return;
+                d3.event.preventDefault();
+                var val = this.value;
+                d3.select(document.body).append('script')
+                    .attr('src', 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
+                        encodeURIComponent(val) + '.jsonp?callback=grid');
+            });
+
         this.append('div')
             .attr('class', 'inspector-wrap')
             .style('display', 'none');