Tweaks to the infobox interface

- Variable height depending on the context list
- Added width that alligns with the grid
- Re-use classnames shared by the interface
- Changes to the unit toggle
  -- Shortened name to current unit of measurement (Accounted for this change in i8n)
  -- Display as a button to match other toggle/button like elements in the interface

css/app.css

@@ -287,6 +287,11 @@ ul li { list-style: none;}
     color: white;
 }
 
+.fillD2 {
+    background:rgba(0,0,0,.75);
+    color: white;
+}
+
 .fl { float: left;}
 .fr { float: right;}
 
@@ -2152,29 +2157,34 @@ img.wiki-image {
 /* Info Box
 ------------------------------------------------------- */
 .infobox {
-    z-index: 5;
     position: absolute;
-    overflow: hidden;
-    top: 220px;
-    width: 200px;
-    height: 150px;
-    padding: 5px 10px;
-    background: rgba(0, 0, 0, 0.75);
-    border-radius: 0 4px 4px 0;
-    color: #ccc;
+    z-index: 1;
+    right: 0;
+    bottom: 30px;
+    width: 240px;
+    border-radius: 4px 0 0 0;
+    border-bottom: 1px solid black;
 }
 
-.infobox h3 {
-    color: rgba(255, 255, 0, 0.9);
-    font-weight: normal;
+.infobox .selection-heading {
+    display: block;
+    border-radius: 4px 0 0 0;
+    padding: 5px 10px;
+    height: 30px;
 }
 
 .infobox ul {
-    margin-bottom: 10px;
+    padding: 5px 10px;
 }
 
-.infobox li {
-    line-height: 1.25;
+.infobox .button {
+    position: absolute;
+    background: #7092ff;
+    border-radius: 2px;
+    padding: 0 4px;
+    color: white;
+    top: 40px;
+    right: 10px;
 }
 
 /* About Section

data/core.yaml

@@ -214,8 +214,8 @@ en:
     area: Area
     centroid: Centroid
     location: Location
-    metric: Switch to metric
-    imperial: Switch to imperial
+    metric: Metric
+    imperial: Imperial
   geometry:
     point: point
     vertex: vertex

dist/locales/en.json

@@ -264,8 +264,8 @@
         "area": "Area",
         "centroid": "Centroid",
         "location": "Location",
-        "metric": "Switch to metric",
-        "imperial": "Switch to imperial"
+        "metric": "Metric",
+        "imperial": "Imperial"
     },
     "geometry": {
         "point": "point",
@@ -3689,4 +3689,4 @@
             }
         }
     }
-}
+}

js/id/ui.js

@@ -38,7 +38,7 @@ iD.ui = function(context) {
             .call(iD.ui.MapInMap(context));
 
         content.append('div')
-            .attr('class', 'infobox')
+            .attr('class', 'infobox fillD2')
             .style('display', 'none')
             .call(iD.ui.Info(context));
 

js/id/ui/info.js

@@ -91,7 +91,8 @@ iD.ui.Info = function(context) {
                 entity;
 
             selection.html('');
-            selection.append('h3')
+            selection.append('h4')
+                .attr('class', 'selection-heading fillD')
                 .text(singular || t('infobox.selected', { n: selected.length }));
 
             if (!selected.length) return;
@@ -141,10 +142,11 @@ iD.ui.Info = function(context) {
                     .text(t('infobox.centroid') + ': ' + centroid[0].toFixed(5) + ', ' + centroid[1].toFixed(5));
 
 
-                var toggle  = imperial ? 'metric' : 'imperial';
-                selection.append('p').append('a')
+                var toggle  = imperial ? 'imperial' : 'metric';
+                selection.append('a')
                     .text(t('infobox.' + toggle))
                     .attr('href', '#')
+                    .attr('class', 'button')
                     .on('click', function() {
                         d3.event.preventDefault();
                         imperial = !imperial;