From 3228e1fcdaaec69daeac1111053900745cf24d70 Mon Sep 17 00:00:00 2001
From: saman bb <samanpwbb@gmail.com>
Date: Tue, 12 Mar 2013 20:25:35 -0400
Subject: [PATCH] more work on new preset layout.

---
 css/app.css              | 27 ++++++++++++++++++++-------
 js/id/ui/preset.js       |  2 +-
 js/id/ui/preset/combo.js |  6 ++++--
 js/id/ui/preset/radio.js |  6 ++++--
 js/id/ui/tag_editor.js   |  2 +-
 js/id/ui/taglist.js      |  4 +++-
 6 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/css/app.css b/css/app.css
index 5b5170f88..bc37e41a3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -582,7 +582,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .inspector-inner {
     padding: 20px;
     position: relative;
-    border-left: 1px solid #ccc;
 }
 
 .inspector-inner.message {
@@ -799,11 +798,29 @@ div.combobox {
     opacity: 1;
 }
 
-.preset-radio button {
-    margin-top: 40px;
+/* Radio buttons */
+
+.radio-wrap { 
+    display: block;
+    padding: 30px 0 0 0;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: #999;
+    border: 1px solid #CCC;
+    overflow: hidden;
+}
+
+.radio-wrap button {
     font-weight: normal;
     padding: 2px 10px;
     height: 30px;
+    border-radius: 0;
+    border-right: 1px solid #CCC;
+    width: 20%;
+}
+
+.radio-wrap button:last-child { 
+    border-right: 0;
 }
 
 /* Address input */
@@ -832,10 +849,6 @@ div.combobox {
 
 /* tag editor */
 
-.tag-wrap .grid-entry { 
-    border-right: 0;
-}
-
 .tag-list {
     margin-top: 10px;
 }
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index e26d07dcd..ac4249141 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -30,7 +30,7 @@ iD.ui.preset = function(context) {
             .data(preset.form)
             .enter()
             .append('div')
-            .attr('class', 'fr preset-section fillL inspector-inner col9');
+            .attr('class', 'preset-section fillL inspector-inner col12');
 
         sections.each(function(d) {
             var s = d3.select(this);
diff --git a/js/id/ui/preset/combo.js b/js/id/ui/preset/combo.js
index d7a11eb01..851b993a9 100644
--- a/js/id/ui/preset/combo.js
+++ b/js/id/ui/preset/combo.js
@@ -1,18 +1,20 @@
 iD.ui.preset.combo = function(form) {
 
     var event = d3.dispatch('change', 'close'),
+        wrap,
         input;
 
     function combo(selection) {
 
+        wrap = this.append('span').attr('class', 'input-wrap-position');
 
-        input = this.append('input')
+        input = wrap.append('input')
             .attr('type', 'text')
             .on('change', change)
             .on('blur', change);
 
         var combobox = d3.combobox();
-        input.call(combobox);
+        wrap.call(combobox);
 
         if (form.options) {
             options(form.options);
diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js
index a13dd9159..2b7a190bd 100644
--- a/js/id/ui/preset/radio.js
+++ b/js/id/ui/preset/radio.js
@@ -8,7 +8,9 @@ iD.ui.preset.radio = function(form) {
 
         selection.classed('preset-radio', true);
 
-        buttons = selection.selectAll('button')
+        var buttonwrap = selection.append('div').attr('class','radio-wrap');
+
+        buttons = buttonwrap.selectAll('button')
             .data(form.options)
             .enter()
             .append('button')
@@ -18,7 +20,7 @@ iD.ui.preset.radio = function(form) {
                     d3.select(this).classed('active', true);
                     change();
                 });
-        selection.append('button')
+        buttonwrap.append('button')
             .on('click', function() {
                 buttons.classed('active', false);
                 change();
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index db65d3190..66655b002 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -84,7 +84,7 @@ iD.ui.TagEditor = function(context) {
             .on('change', changeTags);
 
         var tageditorpreset = editorwrap.append('div')
-            .attr('class', 'inspector-preset cf fillL');
+            .attr('class', 'inspector-preset cf fillL col12');
 
         if (preset) {
             tageditorpreset.call(presetUI
diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js
index 2d3f4ed64..25cd7c847 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -75,7 +75,9 @@ iD.ui.Taglist = function(context) {
                 event.change(taglist.tags());
             });
 
-        inputs.append('input')
+        inputs.append('span')
+            .attr('class', 'input-wrap-position')
+            .append('input')
             .property('type', 'text')
             .attr('class', 'value')
             .attr('maxlength', 255)