layer pane now matches help pane

css/app.css

@@ -1824,21 +1824,11 @@ img.wiki-image {
     background: rgba(0, 0, 0, .8);
 }
 
+.map-control > button.active,
 .map-control > button.active:hover {
     background: #7092ff;
 }
 
-.map-overlay {
-    z-index: -1;
-    right: 75%;
-    max-width: 260px;
-    min-width: 210px;
-    position: fixed;
-    left: 30px;
-    display: block;
-    padding: 10px 10px 0 10px;
-}
-
 /* Zoomer */
 
 .zoombuttons button.zoom-in {
@@ -1851,22 +1841,12 @@ img.wiki-image {
     border-radius: 4px 0 0 0;
 }
 
-.background-control button.active {
-    border-radius: 0;
-}
-
 .background-control {
     position: relative;
 }
 
-.background-control .map-overlay {
-    position: absolute;
-    top: 0;
-}
-
 .nudge-container {
-    border-top: 1px solid #CCC;
-    margin: 0 -10px;
+    border: 1px solid #CCC;
 }
 
 .background-control .adjustments button:last-child {
@@ -1957,7 +1937,6 @@ img.wiki-image {
     float: left;
     display: block;
     width:20%;
-    border-radius: 0;
     border-right: 1px solid #CCC;
     position: relative;
 }
@@ -2001,8 +1980,8 @@ img.wiki-image {
     height:20px;
     width:82px;
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 50px;
+    top: 20px;
     border: 1px solid #ccc;
 }
 
@@ -2064,19 +2043,22 @@ img.wiki-image {
     border-radius: 0 0 0 4px;
 }
 
-/* Help */
-
-.help-control button {
-    border-radius: 0 0 0 4px;
-}
-
-.help-wrap {
+.map-overlay.content {
     position: fixed;
     top:60px;
     bottom: 30px;
     padding: 20px 50px 20px 20px;
     right: 0;
-    overflow-y: scroll;
+    overflow: auto;
+}
+
+.background-control .map-overlay {
+    z-index: -1;
+}
+/* Help */
+
+.help-control button {
+    border-radius: 0 0 0 4px;
 }
 
 .help-wrap p {
@@ -2700,23 +2682,28 @@ img.wiki-image {
 
 /* Exceptions for tooltip layouts */
 
-/* make tooltips in editor pane dark */
+/* make tooltips in panels dark */
+.map-overlay .tooltip.top .tooltip-arrow,
 .entity-editor-pane .tooltip.top .tooltip-arrow {
     border-top-color: #000;
 }
 
+.map-overlay .tooltip.bottom .tooltip-arrow,
 .entity-editor-pane .tooltip.bottom .tooltip-arrow {
     border-bottom-color: #000;
 }
 
+.map-overlay .tooltip.left .tooltip-arrow
 .entity-editor-pane .tooltip.left .tooltip-arrow {
     border-left-color: #000;
 }
 
+.map-overlay .tooltip.right .tooltip-arrow,
 .entity-editor-pane .tooltip.right .tooltip-arrow {
     border-right-color: #000;
 }
 
+.map-overlay .tooltip-inner,
 .entity-editor-pane .tooltip-inner {
     background: #000;
     color: #ccc;

js/id/ui.js

@@ -55,7 +55,7 @@ iD.ui = function(context) {
 
         content.append('div')
             .style('display', 'none')
-            .attr('class', 'help-wrap fillL col5 content');
+            .attr('class', 'help-wrap map-overlay fillL col5 content');
 
         var controls = bar.append('div')
             .attr('class', 'map-controls');

js/id/ui/background.js

@@ -83,7 +83,7 @@ iD.ui.Background = function(context) {
             enter.filter(function(d) { return d.description; })
                 .call(bootstrap.tooltip()
                     .title(function(d) { return d.description; })
-                    .placement('left'));
+                    .placement('top'));
 
             var label = enter.append('label');
 
@@ -139,7 +139,7 @@ iD.ui.Background = function(context) {
         }
 
         var content = selection.append('div')
-                .attr('class', 'fillL map-overlay content hide'),
+                .attr('class', 'fillL map-overlay col3 content hide'),
             tooltip = bootstrap.tooltip()
                 .placement('left')
                 .html(true)
@@ -163,16 +163,16 @@ iD.ui.Background = function(context) {
                         return d3.event.stopPropagation();
                     });
                     content.style('display', 'block')
-                        .style('left', '0px')
+                        .style('right', '-300px')
                         .transition()
                         .duration(200)
-                        .style('left', '-260px');
+                        .style('right', '0px');
                 } else {
                     content.style('display', 'block')
-                        .style('left', '-260px')
+                        .style('right', '0px')
                         .transition()
                         .duration(200)
-                        .style('left', '0px')
+                        .style('right', '-300px')
                         .each('end', function() {
                             d3.select(this).style('display', 'none');
                         });
@@ -317,10 +317,6 @@ iD.ui.Background = function(context) {
         resetButton.append('div')
             .attr('class', 'icon undo');
 
-        resetButton.call(bootstrap.tooltip()
-            .title(t('background.reset'))
-            .placement('bottom'));
-
         context.map()
             .on('move.background-update', _.debounce(update, 1000));
         update();

js/id/ui/help.js

@@ -152,9 +152,6 @@ iD.ui.Help = function(context) {
             return d3.event.stopPropagation();
         });
 
-        selection.on('mousedown.help-inside', function() {
-            return d3.event.stopPropagation();
-        });
     }
 
     return help;