design enhancements..

* replace full width bottom bar with subtle list item
* move hidden feature details to list item tooltip
* simplify some of the text labels on the Map Data panel
* progressively hide some footer elements with media queries

css/app.css

@@ -275,18 +275,6 @@ ul li { list-style: none;}
     background: #E8EBFF;
 }
 
-.link-list li {
-    float: right;
-    border-left: 1px solid rgba(255,255,255,.5);
-    padding: 5px 0 5px 5px;
-    margin-left: 5px;
-}
-
-ul.link-list li:last-child {
-    border-left: 0;
-    margin-left: 0;
-    padding-left: 0;
-}
 
 /* Utility Classes
 ------------------------------------------------------- */
@@ -316,7 +304,8 @@ ul.link-list li:last-child {
 div.hide,
 form.hide,
 button.hide,
-a.hide {
+a.hide,
+li.hide {
     display: none;
 }
 
@@ -2327,6 +2316,19 @@ img.wiki-image {
     clear: right;
 }
 
+#about-list li {
+    float: right;
+    border-left: 1px solid rgba(255,255,255,.5);
+    padding: 5px 0 5px 5px;
+    margin-left: 5px;
+}
+
+#about-list li:last-child {
+    border-left: 0;
+    margin-left: 0;
+    padding-left: 0;
+}
+
 .source-switch a {
     padding: 2px 4px 4px 4px;
     border-radius: 2px;
@@ -2336,18 +2338,18 @@ img.wiki-image {
     color:#fff;
 }
 
-@media screen and (max-width: 1200px) {
-    .user-list {
-        display: none !important;
-    }
+.feature-warning a {
+    background: #1e90ff;
+    padding: 2px 4px 4px 4px;
+    border-radius: 2px;
+    color: #eee;
 }
 
 .user-list a:not(:last-child):after {
     content: ', ';
 }
 
-.api-status,
-.feature-info {
+.api-status {
     float: right;
     clear: both;
     text-align: right;
@@ -2361,10 +2363,6 @@ img.wiki-image {
     background: red;
 }
 
-.feature-info {
-    background: #1e90ff;
-}
-
 /* Modals
 ------------------------------------------------------- */
 
@@ -2886,6 +2884,19 @@ img.wiki-image {
     #bar .save .label { display: block;}
 }
 
+@media screen and (max-width: 1200px) {
+    .user-list { display: none !important; }
+}
+
+@media screen and (max-width: 1000px) {
+    #userLink { display: none !important; }
+}
+
+@media screen and (max-width: 900px) {
+    #scale-block { display: none !important; }
+}
+
+
 /* Scrollbars
  ----------------------------------------------------- */
 

data/core.yaml

@@ -181,7 +181,8 @@ en:
   loading_auth: "Connecting to OpenStreetMap..."
   report_a_bug: report a bug
   feature_info:
-    hidden_features: "Hidden: {features}"
+    hidden_warning: "{count} hidden features"
+    hidden_details: "These features are currently hidden: {details}"
   status:
     error: Unable to connect to API.
     offline: The API is offline. Please try editing later.
@@ -250,9 +251,9 @@ en:
   map_data:
     title: Map Data
     description: Map Data
-    show_features: Show Map Features
-    show_layers: Show Data Layers
+    data_layers: Data Layers
     fill_area: Fill Areas
+    map_features: Map Features
     autohidden: "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them."
   feature:
     points:

dist/locales/en.json

@@ -227,7 +227,8 @@
     "loading_auth": "Connecting to OpenStreetMap...",
     "report_a_bug": "report a bug",
     "feature_info": {
-        "hidden_features": "Hidden: {features}"
+        "hidden_warning": "{count} hidden features",
+        "hidden_details": "These features are currently hidden: {details}"
     },
     "status": {
         "error": "Unable to connect to API.",
@@ -305,9 +306,9 @@
     "map_data": {
         "title": "Map Data",
         "description": "Map Data",
-        "show_features": "Show Map Features",
-        "show_layers": "Show Data Layers",
+        "data_layers": "Data Layers",
         "fill_area": "Fill Areas",
+        "map_features": "Map Features",
         "autohidden": "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them."
     },
     "feature": {

js/id/ui.js

@@ -96,24 +96,23 @@ iD.ui = function(context) {
             .attr('id', 'scale-block')
             .call(iD.ui.Scale(context));
 
-        var linkList = footer.append('div')
+        var aboutList = footer.append('div')
             .attr('id', 'info-block')
             .append('ul')
-            .attr('id', 'about-list')
-            .attr('class', 'link-list');
+            .attr('id', 'about-list');
 
         if (!context.embed()) {
-            linkList.call(iD.ui.Account(context));
+            aboutList.call(iD.ui.Account(context));
         }
 
-        linkList.append('li')
+        aboutList.append('li')
             .append('a')
             .attr('target', '_blank')
             .attr('tabindex', -1)
             .attr('href', 'http://github.com/openstreetmap/iD')
             .text(iD.version);
 
-        var bugReport = linkList.append('li')
+        var bugReport = aboutList.append('li')
             .append('a')
             .attr('target', '_blank')
             .attr('tabindex', -1)
@@ -127,15 +126,16 @@ iD.ui = function(context) {
                 .placement('top')
             );
 
-        linkList.append('li')
+        aboutList.append('li')
+            .attr('class', 'feature-warning')
+            .attr('tabindex', -1)
+            .call(iD.ui.FeatureInfo(context));
+
+        aboutList.append('li')
             .attr('class', 'user-list')
             .attr('tabindex', -1)
             .call(iD.ui.Contributors(context));
 
-        footer.append('div')
-            .attr('class', 'feature-info')
-            .call(iD.ui.FeatureInfo(context));
-
         footer.append('div')
             .attr('class', 'api-status')
             .call(iD.ui.Status(context));

js/id/ui/account.js

@@ -4,7 +4,7 @@ iD.ui.Account = function(context) {
     function update(selection) {
         if (!connection.authenticated()) {
             selection.selectAll('#userLink, #logoutLink')
-                .style('display', 'none');
+                .classed('hide', true);
             return;
         }
 
@@ -18,7 +18,7 @@ iD.ui.Account = function(context) {
             if (err) return;
 
             selection.selectAll('#userLink, #logoutLink')
-                .style('display', 'list-item');
+                .classed('hide', false);
 
             // Link
             userLink.append('a')
@@ -54,11 +54,11 @@ iD.ui.Account = function(context) {
     return function(selection) {
         selection.append('li')
             .attr('id', 'logoutLink')
-            .style('display', 'none');
+            .classed('hide', true);
 
         selection.append('li')
             .attr('id', 'userLink')
-            .style('display', 'none');
+            .classed('hide', true);
 
         connection.on('auth.account', function() { update(selection); });
         update(selection);

js/id/ui/feature_info.js

@@ -7,19 +7,32 @@ iD.ui.FeatureInfo = function(context) {
 
         if (hidden.length) {
             var stats = features.stats(),
+                count = 0,
                 hiddenList = _.map(hidden, function(k) {
+                    count += stats[k];
                     return String(stats[k]) + ' ' + t('feature.' + k + '.description');
+                }),
+                tooltip = bootstrap.tooltip()
+                    .placement('top')
+                    .html(true)
+                    .title(function() {
+                        return iD.ui.tooltipHtml(hiddenList.join('<br/>'));
+                    });
+
+            var warning = selection.append('a')
+                .attr('href', '#')
+                .attr('tabindex', -1)
+                .html(t('feature_info.hidden_warning', { count: count }))
+                .call(tooltip)
+                .on('click', function() {
+                    tooltip.hide(warning);
+                    // open map data panel?
+                    d3.event.preventDefault();
                 });
-
-            selection.append('span')
-                .html(t('feature_info.hidden_features', { features: hiddenList.join(', ') }));
         }
 
-        if (!hidden.length) {
-            selection.transition().duration(200).style('opacity', 0);
-        } else if (selection.style('opacity') === '0') {
-            selection.transition().duration(200).style('opacity', 1);
-        }
+        selection
+            .classed('hide', !hidden.length);
     }
 
     return function(selection) {

js/id/ui/map_data.js

@@ -182,7 +182,7 @@ iD.ui.MapData = function(context) {
 
         // data layers
         content.append('a')
-            .text(t('map_data.show_layers'))
+            .text(t('map_data.data_layers'))
             .attr('href', '#')
             .classed('hide-toggle', true)
             .classed('expanded', true)
@@ -287,7 +287,7 @@ iD.ui.MapData = function(context) {
 
         // feature filters
         content.append('a')
-            .text(t('map_data.show_features'))
+            .text(t('map_data.map_features'))
             .attr('href', '#')
             .classed('hide-toggle', true)
             .classed('expanded', false)
@@ -318,10 +318,6 @@ iD.ui.MapData = function(context) {
             .on('B', hidePanel)
             .on('H', hidePanel);
 
-        // keybinding.on('m', function() {
-        //         context.enter(iD.modes.SelectImage(context));
-        //     });
-
         d3.select(document)
             .call(keybinding);