Make the document order of the footer items the same as the appearance order (re: #8004)

css/80_app.css

@@ -4464,52 +4464,35 @@ img.tile-debug {
 /* Footer - About, Source Switcher
 ------------------------------------------------------- */
 .map-footer-bar .info-block {
-    flex: 1 1 auto;
+    flex: 1 1 100%;
+    overflow: hidden;
 }
 
 .map-footer-list {
-    text-align: right;
-    margin-right: 10px;
     display: flex;
-    flex-direction: row-reverse;
-    flex-wrap: wrap;
+    flex-flow: row nowrap;
     position: relative;
     height: 100%;
-}
-.ideditor[dir='rtl'] .map-footer-list {
-    text-align: left;
-    margin-left: 10px;
-    margin-right: 0;
+    justify-content: flex-end;
 }
 
 .map-footer-list li {
-    border-left: 1px solid rgba(255,255,255,.5);
-    padding: 5px 0 5px 5px;
-    margin-left: 5px;
     height: 100%;
     display: flex;
     align-items: center;
+    white-space: nowrap;
+    padding: 5px;
 }
-.ideditor[dir='rtl'] .map-footer-list li {
-    border-left: none;
+.ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
     border-right: 1px solid rgba(255,255,255,.5);
-    margin-left: 0;
-    margin-right: 5px;
-    padding: 5px 5px 5px 0;
+}
+.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
+    border-left: 1px solid rgba(255,255,255,.5);
 }
 .map-footer-list li:empty {
     display: none;
 }
 
-.map-footer-list li:last-child {
-    border-left: 0;
-    margin-left: 0;
-    padding-left: 0;
-}
-.ideditor[dir='rtl'] .map-footer-list li:last-child {
-    border-right: none;
-}
-
 .map-footer-list a.chip {
     padding: 1px 4px 1px 4px;
     border-radius: 2px;

modules/ui/account.js

@@ -62,14 +62,15 @@ export function uiAccount(context) {
 
 
     return function(selection) {
-        selection.append('li')
-            .attr('class', 'logoutLink')
-            .classed('hide', true);
 
         selection.append('li')
             .attr('class', 'userLink')
             .classed('hide', true);
 
+        selection.append('li')
+            .attr('class', 'logoutLink')
+            .classed('hide', true);
+
         if (osm) {
             osm.on('change.account', function() { update(selection); });
             update(selection);

modules/ui/init.js

@@ -268,15 +268,30 @@ export function uiInit(context) {
             .append('ul')
             .attr('class', 'map-footer-list');
 
-        if (!context.embed()) {
+        aboutList
+            .append('li')
+            .attr('class', 'user-list')
+            .call(uiContributors(context));
+
+        var apiConnections = context.apiConnections();
+        if (apiConnections && apiConnections.length > 1) {
             aboutList
-                .call(uiAccount(context));
+                .append('li')
+                .attr('class', 'source-switch')
+                .call(uiSourceSwitch(context)
+                    .keys(apiConnections)
+                );
         }
 
         aboutList
             .append('li')
-            .attr('class', 'version')
-            .call(uiVersion(context));
+            .attr('class', 'issues-info')
+            .call(uiIssuesInfo(context));
+
+        aboutList
+            .append('li')
+            .attr('class', 'feature-warning')
+            .call(uiFeatureInfo(context));
 
         var issueLinks = aboutList
             .append('li');
@@ -297,29 +312,14 @@ export function uiInit(context) {
 
         aboutList
             .append('li')
-            .attr('class', 'feature-warning')
-            .call(uiFeatureInfo(context));
+            .attr('class', 'version')
+            .call(uiVersion(context));
 
-        aboutList
-            .append('li')
-            .attr('class', 'issues-info')
-            .call(uiIssuesInfo(context));
-
-        var apiConnections = context.apiConnections();
-        if (apiConnections && apiConnections.length > 1) {
+        if (!context.embed()) {
             aboutList
-                .append('li')
-                .attr('class', 'source-switch')
-                .call(uiSourceSwitch(context)
-                    .keys(apiConnections)
-                );
+                .call(uiAccount(context));
         }
 
-        aboutList
-            .append('li')
-            .attr('class', 'user-list')
-            .call(uiContributors(context));
-
 
         // Setup map dimensions and move map to initial center/zoom.
         // This should happen after .main-content and toolbars exist.