From 6bea28e59738c2eeea30b0c0cbc4bcc585e80067 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Thu, 13 Dec 2012 14:50:59 -0500
Subject: [PATCH] basics done for better tag inspector.

---
 css/app.css           | 59 +++++++++++++++++++++++++++++--------------
 js/id/ui/inspector.js | 15 ++++++-----
 2 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/css/app.css b/css/app.css
index 439bdda70..b16cfe7cc 100644
--- a/css/app.css
+++ b/css/app.css
@@ -171,6 +171,12 @@ button.Browse {
     width:40px;
 }
 
+button.minor {
+    height: 20px;
+    width: 20px;
+    margin: 0;
+}
+
 .buttons-joined {
     display: inline-block;
     margin:10px;
@@ -356,37 +362,52 @@ button.Browse .label {
     padding: 10px;
 }
 
+.inspector-inner button {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.inspector-inner button.tag-help {
+    right: 40px;
+}
+
 .inspector-wrap a.permalink {
     text-decoration:none;
     margin-right:1em;
 }
 
-.inspector tbody td {
-    border: 1px solid #ccc;
-    width:150px;
+.inspector-inner.tag-wrap {
+    max-height: 200px;
+    overflow: auto;
 }
 
-.inspector input {
+.tag-row {
+    width: 100%;
+    padding-right: 80px;
+    position: relative;
+    height: 30px;
+}
+
+.input-wrap {
+    position: absolute;
+    left: 0px;
+    right: 80px;
+    }
+
+.tag-row input {
+    width: 50%;
     margin:0;
+    height: 30px;
     padding:4px;
-    border:0;
+    border:1px solid #ccc;
+    border-right: 0;
+    border-top: 0;
     background:#fff;
-    width:150px;
 }
 
-.inspector-wrap .tag-table-wrap {
-    max-height:350px;
-    border-top: 1px solid #ccc;
-    overflow:auto;
-}
-
-.inspector-wrap table td {
-    padding:0;
-    border-spacing:0;
-}
-
-.inspector-wrap .buttons {
-    border-top: 1px solid #ccc;
+.tag-row input.value {
+    border-right: 1px solid #ccc;
 }
 
 /* Map Controls */
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index e215d8b5b..39a03ca58 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -59,7 +59,7 @@ iD.Inspector = function() {
                 .attr('class', 'head inspector-inner').call(drawhead);
 
             var inspectorwrap = selection
-                .append('ul').attr('class', 'inspector-inner tag-table-wrap fillL2')
+                .append('ul').attr('class', 'inspector-inner tag-wrap fillL2')
 
             inspectorwrap
                 .data(['tag', 'value', ''])
@@ -69,10 +69,13 @@ iD.Inspector = function() {
                 var tr = inspectorwrap.selectAll('li')
                     .data(d3.entries(data));
                 tr.exit().remove();
-                var row = tr.enter().append('li');
-                var valuetds = row.selectAll('input')
+                var row = tr.enter().append('li').attr('class','tag-row');
+                var inputs = row.append('div').attr('class','input-wrap').selectAll('input')
                     .data(function(d) { return [d, d]; });
-                valuetds.enter().append('input')
+                inputs.enter().append('input')
+                    .attr('class', function(d, i) {
+                        return i ? 'value' : 'key';
+                    })
                     .property('value', function(d, i) { return d[i ? 'value' : 'key']; })
                     .on('keyup.update', function(d, i) {
                         d[i ? 'value' : 'key'] = this.value;
@@ -89,8 +92,8 @@ iD.Inspector = function() {
                                 });
                             }));
                     });
-                row.append('button').attr('class','remove');
-                row.append('a').attr('class', 'tag-help button')
+                row.append('button').attr('class','remove minor');
+                row.append('button').attr('class', 'tag-help minor').append('a')
                     .text('?')
                     .attr('target', '_blank')
                     .attr('tabindex', -1)