cleanup footer styles, append account links to footer link menu

css/app.css

@@ -2181,7 +2181,8 @@ img.wiki-image {
 /* About Section
 ------------------------------------------------------- */
 
-.about-block {
+#footer {
+    width: 100%;
     position: absolute;
     right:0;
     bottom:0;
@@ -2192,21 +2193,27 @@ img.wiki-image {
     transition: opacity 200ms;
 }
 
-.about-block:hover {
+#footer:hover {
     opacity: 1;
 }
 
-#about {
-    text-align: right;
-    margin-right: 10px;
+#scale-block {
+    display: table-cell;
+    vertical-align: bottom;
+    width: 250px;
+    height: 30px;
+    float: left;
+    clear: left;
+}
+
+#info-block {
+    float: right;
+    clear: right;
 }
 
 #scale {
-    position:relative;
-    float:left;
-    height:20px;
-    width:100%;
-    padding:5px;
+    height: 30px;
+    width: 100%;
 }
 
 #scale text {
@@ -2223,6 +2230,12 @@ img.wiki-image {
     shape-rendering: crispEdges;
 }
 
+#about-list {
+    text-align: right;
+    margin-right: 10px;
+    clear: right;
+}
+
 .source-switch a {
     padding: 2px 4px 4px 4px;
     border-radius: 2px;
@@ -2262,29 +2275,18 @@ img.wiki-image {
     content: ', ';
 }
 
-/* API Status */
-
 .api-status {
-    float: left;
+    float: right;
+    clear: both;
+    text-align: right;
+    width: 100%;
 }
 
 .api-status.offline,
-.api-status.readonly {
+.api-status.readonly,
+.api-status.error {
     background: red;
-    padding: 5px 10px;
-}
-
-/* Account Information */
-
-.account {
-    float: left;
-    padding: 5px 10px;
-}
-
-.account .logout {
-    margin-left:10px;
-    border-left: 1px solid white;
-    padding-left: 10px;
+    padding: 0px 5px;
 }
 
 /* Modals

js/id/ui.js

@@ -80,31 +80,24 @@ iD.ui = function(context) {
             .attr('class', 'map-control help-control')
             .call(iD.ui.Help(context));
 
-        var aboutBlock = content.append('div')
-            .attr('class', 'col12 about-block fillD');
+        var footer = content.append('div')
+            .attr('id', 'footer')
+            .attr('class', 'fillD');
 
-        aboutBlock.append('div')
+        footer.append('div')
             .attr('id', 'scale-block')
-            .attr('class', 'fl')
             .call(iD.ui.Scale(context));
 
-        var about = aboutBlock.append('div')
-            .attr('class', 'fr');
-
-        about.append('div')
-            .attr('class', 'api-status')
-            .call(iD.ui.Status(context));
+        var linkList = footer.append('div')
+            .attr('id', 'info-block')
+            .append('ul')
+            .attr('id', 'about-list')
+            .attr('class', 'link-list');
 
         if (!context.embed()) {
-            about.append('div')
-                .attr('class', 'account')
-                .call(iD.ui.Account(context));
+            linkList.call(iD.ui.Account(context));
         }
 
-        var linkList = about.append('ul')
-            .attr('id', 'about')
-            .attr('class', 'link-list');
-
         linkList.append('li')
             .append('a')
             .attr('target', '_blank')
@@ -131,6 +124,10 @@ iD.ui = function(context) {
             .attr('tabindex', -1)
             .call(iD.ui.Contributors(context));
 
+        footer.append('div')
+            .attr('class', 'api-status')
+            .call(iD.ui.Status(context));
+
         window.onbeforeunload = function() {
             return context.save();
         };

js/id/ui/account.js

@@ -3,20 +3,25 @@ iD.ui.Account = function(context) {
 
     function update(selection) {
         if (!connection.authenticated()) {
-            selection.html('')
+            selection.selectAll('#userLink, #logoutLink')
                 .style('display', 'none');
             return;
         }
 
-        selection.style('display', 'block');
-
         connection.userDetails(function(err, details) {
-            selection.html('');
+            var userLink = selection.select('#userLink')
+                logoutLink = selection.select('#logoutLink');
+
+            userLink.html('');
+            logoutLink.html('');
 
             if (err) return;
 
+            selection.selectAll('#userLink, #logoutLink')
+                .style('display', 'list-item');
+
             // Link
-            var userLink = selection.append('a')
+            userLink.append('a')
                 .attr('href', connection.userURL(details.display_name))
                 .attr('target', '_blank');
 
@@ -35,7 +40,7 @@ iD.ui.Account = function(context) {
                 .attr('class', 'label')
                 .text(details.display_name);
 
-            selection.append('a')
+            logoutLink.append('a')
                 .attr('class', 'logout')
                 .attr('href', '#')
                 .text(t('logout'))
@@ -47,7 +52,15 @@ iD.ui.Account = function(context) {
     }
 
     return function(selection) {
-        connection.on('auth', function() { update(selection); });
+        selection.append('li')
+            .attr('id', 'logoutLink')
+            .style('display', 'none');
+
+        selection.append('li')
+            .attr('id', 'userLink')
+            .style('display', 'none');
+
+        connection.on('auth.account', function() { update(selection); });
         update(selection);
     };
 };

js/id/ui/scale.js

@@ -68,7 +68,7 @@ iD.ui.Scale = function(context) {
         var g = selection.append('svg')
             .attr('id', 'scale')
             .append('g')
-            .attr('transform', 'translate(10,' + tickHeight + ')');
+            .attr('transform', 'translate(10,11)');
 
         g.append('path').attr('id', 'scalepath');
         g.append('text').attr('id', 'scaletext');