Close up space in map controls when embedded (#1329)

css/app.css

@@ -1513,10 +1513,12 @@ img.wiki-image {
 
 /* Map Controls */
 
-.map-control {
+.map-controls {
+    left: 0;
+    top: 80px;
+    width: 30px;
+    position: absolute;
     z-index: 100;
-    left:0px;
-    position:absolute;
 }
 
 .map-control > button {
@@ -1546,21 +1548,12 @@ img.wiki-image {
 
 /* Zoomer */
 
-.zoombuttons {
-    top: 180px;
-    width: 30px;
-}
-
 .zoombuttons button.zoom-in {
     border-radius:0 4px 0 0;
 }
 
 /* Background Settings */
 
-.background-control {
-    top: 80px;
-}
-
 .background-control button {
     border-radius:0 4px 0 0;
 }
@@ -1699,7 +1692,7 @@ img.wiki-image {
 
 /* Geocoder */
 
-.geocode-control, .geocode-control form {
+.geocode-control form {
     top:260px;
 }
 
@@ -1736,10 +1729,6 @@ img.wiki-image {
 
 /* Geolocator */
 
-.geolocate-control {
-    top:300px;
-}
-
 .geolocate-control button {
     border-radius: 0 0 4px 0;
 }
@@ -1747,7 +1736,7 @@ img.wiki-image {
 /* Help */
 
 .help-control {
-    top: 120px;
+    margin-bottom: 20px;
 }
 
 .help-control button {

js/id/ui.js

@@ -49,28 +49,31 @@ iD.ui = function(context) {
             .style('display', 'none')
             .attr('class', 'help-wrap fillL col5 content');
 
-        container.append('div')
+        var controls = bar.append('div')
+            .attr('class', 'map-controls');
+
+        controls.append('div')
+            .attr('class', 'map-control background-control')
+            .call(iD.ui.Background(context));
+
+        controls.append('div')
+            .attr('class', 'map-control help-control')
+            .call(iD.ui.Help(context));
+
+        controls.append('div')
             .attr('class', 'map-control zoombuttons')
             .call(iD.ui.Zoom(context));
 
         if (!context.embed()) {
-            container.append('div')
+            controls.append('div')
                 .attr('class', 'map-control geocode-control')
                 .call(iD.ui.Geocoder(context));
         }
 
-        container.append('div')
-            .attr('class', 'map-control background-control')
-            .call(iD.ui.Background(context));
-
-        container.append('div')
+        controls.append('div')
             .attr('class', 'map-control geolocate-control')
             .call(iD.ui.Geolocate(map));
 
-        container.append('div')
-            .attr('class', 'map-control help-control')
-            .call(iD.ui.Help(context));
-
         container.append('div')
             .style('display', 'none')
             .attr('class', 'inspector-wrap fr content col4');