Switch to a persistent sidebar

css/app.css

@@ -41,12 +41,10 @@ body {
 
 .spinner {
     opacity: .5;
-    z-index: 2;
-    position: relative;
 }
 
 .spinner img {
-    position: fixed;
+    position: absolute;
     height: 40px;
     width: 40px;
     right: 10px;
@@ -636,20 +634,25 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 /* Inspector
 ------------------------------------------------------- */
 
-.inspector-wrap {
-    position: absolute;
+#sidebar {
+    position: relative;
+    float: right;
     height: 100%;
-    right: 0;
     overflow: hidden;
 }
 
+.inspector-wrap {
+    width: 100%;
+    height: 100%;
+}
+
 .inspector-body {
     overflow-y: scroll;
     overflow-x: hidden;
     position: absolute;
     right: 0;
     left: 0;
-    bottom: 30px;
+    bottom: 0;
     top: 60px;
 }
 
@@ -1840,13 +1843,9 @@ img.wiki-image {
 ------------------------------------------------------- */
 
 #map {
-    display:block;
-    position:absolute;
+    position:relative;
     overflow:hidden;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
+    height:100%;
     background:#000;
 }
 

js/id/ui.js

@@ -13,11 +13,19 @@ iD.ui = function(context) {
             map.centerZoom([-77.02271, 38.90085], 20);
         }
 
+        var sidebar = container.append('div')
+            .attr('id', 'sidebar')
+            .attr('class', 'col4 fillL2');
+
+        sidebar.append('div')
+            .style('display', 'none')
+            .attr('class', 'inspector-wrap fr content');
+
         var m = container.append('div')
             .attr('id', 'map')
             .call(map);
 
-        var bar = container.append('div')
+        var bar = m.append('div')
             .attr('id', 'bar')
             .attr('class','fillD');
 
@@ -40,12 +48,12 @@ iD.ui = function(context) {
             .attr('class', 'spinner')
             .call(iD.ui.Spinner(context));
 
-        container.append('idv')
+        m.append('div')
             .attr('class', 'attribution')
             .attr('tabindex', -1)
             .call(iD.ui.Attribution(context));
 
-        container.append('div')
+        m.append('div')
             .style('display', 'none')
             .attr('class', 'help-wrap fillL col5 content');
 
@@ -74,11 +82,7 @@ iD.ui = function(context) {
             .attr('class', 'map-control geolocate-control')
             .call(iD.ui.Geolocate(map));
 
-        container.append('div')
-            .style('display', 'none')
-            .attr('class', 'inspector-wrap fr content col4');
-
-        var about = container.append('div')
+        var about = m.append('div')
             .attr('class','col12 about-block fillD');
 
         about.append('div')

js/id/ui/inspector.js

@@ -64,32 +64,11 @@ iD.ui.Inspector = function(context) {
             panewrap.style('right', '-0%');
             tagLayer.call(entityEditor);
         }
-
-        if (d3.event) {
-            // Pan the map if the clicked feature intersects with the position
-            // of the inspector
-            var inspectorSize = selection.size(),
-                mapSize = context.map().size(),
-                offset = 50,
-                shiftLeft = d3.event.clientX - mapSize[0] + inspectorSize[0] + offset,
-                center = (mapSize[0] / 2) + shiftLeft + offset;
-
-            if (shiftLeft > 0 && inspectorSize[1] > d3.event.clientY) {
-                context.map().centerEase(context.projection.invert([center, mapSize[1]/2]));
-            }
-        }
     }
 
     inspector.close = function(selection) {
         entityEditor.close();
-
-        selection.transition()
-            .style('right', '-500px')
-            .each('end', function() {
-                d3.select(this)
-                    .style('display', 'none')
-                    .html('');
-            });
+        selection.html('');
     };
 
     inspector.entityID = function(_) {