cleanup styles for map overlays'

css/app.css

@@ -212,13 +212,24 @@ table.tags, table.tags td, table.tags th {
 
 ul li { list-style: none;}
 
+ul.toggle-list {
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid #CCC;
+    margin-bottom: 10px;
+}
+
 ul.toggle-list li a {
+    position: relative;
     padding: 5px 10px;
     display:block;
     border-top: 1px solid #ccc;
     white-space:nowrap;
     text-overflow:ellipsis;
-    overflow:hidden;
+}
+
+ul.toggle-list li:first-child a {
+    border-top: 0;
 }
 
 ul.toggle-list li a:hover { background-color: #ececec;}
@@ -1361,9 +1372,9 @@ img.wiki-image {
     max-width: 260px;
     min-width: 210px;
     position: fixed;
-    left: 40px;
+    left: 30px;
     display: block;
-    border-radius: 4px;
+    padding: 10px;
 }
 
 /* Zoomer */
@@ -1387,21 +1398,19 @@ img.wiki-image {
     border-radius:0 4px 0 0;
 }
 
-.nudge-container {
-    margin-top: 10px;
+.background-control button.active {
+    border-radius: 0;
 }
 
-.background-control .adjustments {
-    padding: 10px;
+.nudge-container {
+    border-top: 1px solid #CCC;
+    margin: 10px -10px -10px -10px;
 }
 
 .background-control .adjustments button {
-    height:30px;
-    font-size:10px;
-    padding:0 5px 3px 5px;
     background: white;
     text-transform: uppercase;
-    font-weight: bold;
+    border-color: #CCC;
 }
 
 .background-control .adjustments button:hover {
@@ -1485,10 +1494,6 @@ img.wiki-image {
     border-radius: 0 4px 4px 0;
 }
 
-.opacity-options-wrapper {
-    padding: 10px 10px 0 10px;
-}
-
 .opacity-options {
     background: url(../img/background-pattern-opacity.png) 0 0 repeat;
     height:20px;
@@ -1533,8 +1538,7 @@ img.wiki-image {
 }
 
 .background-control .layer-toggle-gpx .layer-extent {
-    float: right;
-    border: 0;
+    border-left: 1px solid #CCC;
 }
 
 .background-control .layer-toggle-gpx.selected .layer-extent {
@@ -1548,23 +1552,24 @@ img.wiki-image {
 }
 
 .geocode-control form {
-    padding: 4px;
+    padding: 5px;
 }
 
 .geocode-control input {
     width: 100%;
 }
 
-.geocode-control div.content {
+.geocode-control div.map-overlay {
+    border-top: 1px solid #CCC;
     z-index: 100;
-    top: 200px;
     max-height: 300px;
     overflow-y: auto;
+    padding: 0;
 }
 
-.geocode-control div.content span {
+.geocode-control div.map-overlay span {
     display: inline-block;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #CCC;
     padding: 5px 10px;
 }
 
@@ -1957,10 +1962,6 @@ div.typeahead a:first-child {
 }
 
 .commit-modal .warning-section .changeset-list button {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
     border-left: 1px solid #CCC;
 }
 

js/id/ui/background.js

@@ -148,7 +148,7 @@ iD.ui.Background = function(context) {
         }
 
         var content = selection.append('div')
-                .attr('class', 'content fillD map-overlay hide'),
+                .attr('class', 'fillL map-overlay hide'),
             tooltip = bootstrap.tooltip()
                 .placement('right')
                 .html(true)
@@ -200,32 +200,35 @@ iD.ui.Background = function(context) {
 
         var layerList = content
             .append('ul')
-            .attr('class', 'toggle-list fillL');
+            .attr('class', 'toggle-list');
 
         var gpxLayerItem = content
             .append('ul')
             .style('display', iD.detect().filedrop ? 'block' : 'none')
-            .attr('class', 'toggle-list fillL')
+            .attr('class', 'toggle-list')
             .append('li')
             .append('a')
             .classed('layer-toggle-gpx', true)
-            .call(bootstrap.tooltip()
-                .title(t('gpx.drag_drop'))
-                .placement('right'))
             .on('click.set-gpx', clickGpx);
 
+        gpxLayerItem.call(bootstrap.tooltip()
+            .title(t('gpx.drag_drop'))
+            .placement('right'))
+
         gpxLayerItem.append('span')
             .text(t('gpx.local_layer'));
 
         gpxLayerItem
-            .append('a')
-            .attr('class', 'icon geocode layer-extent')
+            .append('button')
+            .attr('class', 'minor layer-extent')
             .on('click', function() {
                 d3.event.preventDefault();
                 d3.event.stopPropagation();
                 context.map()
-                    .extent(d3.geo.bounds(context.map().layers[1].geojson()));
-            });
+                    .extent(d3.geo.bounds(context.map().layers[1].geojson()))
+            })
+            .append('span')
+                .attr('class', 'icon geocode' );
 
         var adjustments = content
             .append('div')

js/id/ui/geocoder.js

@@ -115,14 +115,14 @@ iD.ui.Geocoder = function(context) {
 
         var gcForm = selection.append('form');
 
-        var inputNode = gcForm.attr('class', 'content fillL map-overlay hide')
+        var inputNode = gcForm.attr('class', 'fillL map-overlay hide')
             .append('input')
             .attr({ type: 'text', placeholder: t('geocoder.placeholder') })
             .attr('tabindex', 1)
             .on('keydown', keydown);
 
         var resultsList = selection.append('div')
-            .attr('class', 'content fillD map-overlay hide');
+            .attr('class', 'fillL map-overlay hide');
 
         context.surface().on('mousedown.geocoder-outside', hide);
         context.container().on('mousedown.b.geocoder-outside', hide);