diff --git a/css/app.css b/css/app.css index b49238880..ede9e7eae 100644 --- a/css/app.css +++ b/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 diff --git a/js/id/ui.js b/js/id/ui.js index 0d119f631..eacf19f8f 100644 --- a/js/id/ui.js +++ b/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(); }; diff --git a/js/id/ui/account.js b/js/id/ui/account.js index 97de778fb..abf1c60ad 100644 --- a/js/id/ui/account.js +++ b/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); }; }; diff --git a/js/id/ui/scale.js b/js/id/ui/scale.js index 6a18bec74..2136f2295 100644 --- a/js/id/ui/scale.js +++ b/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');