Convert container from id to class

css/80_app.css

@@ -34,20 +34,20 @@ body {
     width: 100%;
 }
 
-#content {
+.main-content {
     position: relative;
     overflow: hidden;
     height: 100%;
 }
 
-#content.active {
+.main-content.active {
     -webkit-filter: none !important;
     filter: none !important;
     -webkit-duration: 200ms;
     transition-duration: 200ms;
 }
 
-#content.inactive {
+.main-content.inactive {
     -webkit-filter: grayscale(80%) brightness(80%);
     filter: grayscale(80%) brightness(80%);
     -webkit-duration: 200ms;

modules/modes/save.js

@@ -61,23 +61,26 @@ export function modeSave(context) {
             .append('div')
             .attr('class','sidebar-component');
 
-        context.container().selectAll('#content')
-            .attr('class', 'active');
+        context.container().selectAll('.main-content')
+            .classed('active', true)
+            .classed('inactive', false);
 
         var ui = uiConflicts(context)
             .conflictList(conflicts)
             .origChanges(origChanges)
             .on('cancel', function() {
-                context.container().selectAll('#content')
-                    .attr('class', 'inactive');
+                context.container().selectAll('.main-content')
+                    .classed('active', false)
+                    .classed('inactive', true);
                 selection.remove();
                 keybindingOn();
 
                 uploader.cancelConflictResolution();
             })
             .on('save', function() {
-                context.container().selectAll('#content')
-                    .attr('class', 'inactive');
+                context.container().selectAll('.main-content')
+                    .classed('active', false)
+                    .classed('inactive', true);
                 selection.remove();
 
                 uploader.processResolvedConflicts(changeset);
@@ -206,8 +209,9 @@ export function modeSave(context) {
 
         keybindingOn();
 
-        context.container().selectAll('#content')
-            .attr('class', 'inactive');
+        context.container().selectAll('.main-content')
+            .classed('active', false)
+            .classed('inactive', true);
 
         var osm = context.connection();
         if (!osm) {
@@ -233,8 +237,9 @@ export function modeSave(context) {
 
         keybindingOff();
 
-        context.container().selectAll('#content')
-            .attr('class', 'active');
+        context.container().selectAll('.main-content')
+            .classed('active', true)
+            .classed('inactive', false);
 
         context.ui().sidebar.hide();
     };

modules/svg/debug.js

@@ -30,7 +30,7 @@ export function svgDebug(projection, context) {
     }
 
 
-    let legend = d3_select('#content')
+    let legend = d3_select('.main-content')
       .selectAll('.debug-legend')
       .data(debugData.length ? [0] : []);
 

modules/ui/curtain.js

@@ -19,7 +19,7 @@ export function uiCurtain() {
     function curtain(selection) {
         surface = selection
             .append('svg')
-            .attr('id', 'curtain')
+            .attr('class', 'curtain')
             .style('z-index', 1000)
             .style('pointer-events', 'none')
             .style('position', 'absolute')

modules/ui/init.js

@@ -102,8 +102,7 @@ export function uiInit(context) {
 
         var content = container
             .append('div')
-            .attr('id', 'content')
-            .attr('class', 'active');
+            .attr('class', 'main-content active');
 
         // Top toolbar
         content
@@ -247,7 +246,7 @@ export function uiInit(context) {
 
 
         // Setup map dimensions and move map to initial center/zoom.
-        // This should happen after #content and toolbars exist.
+        // This should happen after .main-content and toolbars exist.
         ui.onResize();
         map.redrawEnable(true);
 
@@ -423,7 +422,7 @@ export function uiInit(context) {
         // Recalc dimensions of map and sidebar.. (`true` = force recalc)
         // This will call `getBoundingClientRect` and trigger reflow,
         //  but the values will be cached for later use.
-        var mapDimensions = utilGetDimensions(d3_select('#content'), true);
+        var mapDimensions = utilGetDimensions(d3_select('.main-content'), true);
         utilGetDimensions(d3_select('.sidebar'), true);
 
         if (withPan !== undefined) {

modules/ui/photoviewer.js

@@ -105,7 +105,7 @@ export function uiPhotoviewer(context) {
 
     photoviewer.onMapResize = function() {
         var photoviewer = d3_select('.photoviewer');
-        var content = d3_select('#content');
+        var content = d3_select('.main-content');
         var mapDimensions = utilGetDimensions(content, true);
         // shrink photo viewer if it is too big
         // (-90 preserves space at top and bottom of map used by menus)

test/spec/ui/confirm.js

@@ -4,11 +4,11 @@ describe('iD.uiConfirm', function () {
     beforeEach(function() {
         elem = d3.select('body')
             .append('div')
-            .attr('id', 'confirm-wrap');
+            .attr('class', 'confirm-wrap');
     });
 
     afterEach(function() {
-        d3.select('#confirm-wrap')
+        d3.select('.confirm-wrap')
             .remove();
     });
 

test/spec/ui/modal.js

@@ -4,11 +4,11 @@ describe('iD.uiModal', function () {
     beforeEach(function() {
         elem = d3.select('body')
             .append('div')
-            .attr('id', 'modal-wrap');
+            .attr('class', 'modal-wrap');
     });
 
     afterEach(function() {
-        d3.select('#modal-wrap')
+        d3.select('.modal-wrap')
             .remove();
     });