initial commit of form revamp

css/app.css

@@ -549,6 +549,7 @@ a:hover .toggle.icon           { background-position: -20px -180px;}
 .selected .toggle.icon,
 a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
+
 /* ToolBar / Persistent UI Elements
 ------------------------------------------------------- */
 
@@ -579,8 +580,9 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .inspector-inner {
-    padding: 20px;
+    padding: 20px 20px 0px 20px;
     position: relative;
+    border-left: 1px solid #ccc;
 }
 
 .inspector-inner.message {
@@ -601,21 +603,10 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     border: 0;
 }
 
-/* preset form */
+/* Presets
+------------------------------------------------------- */
 
-.preset-section.inspector-inner:last-child { 
-    border-bottom: 1px solid #ccc;
-}
-
-.inspector-body .name-help,
-.inspector-body .type-help {
-  position: absolute;
-  right: -10px;
-}
-
-.inspector-body .name {
-    height: 120px;
-}
+/* Preset grid  */
 
 .preset-grid-search-wrap {
     height: 60px;
@@ -650,20 +641,60 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 5px;
 }
 
-.preset-label {
-    padding: 25px 20px 20px 20px;
-    position: absolute;
-    height: 100%;
-    left: 0px;
-    top: 0;
-    border-right: 1px solid #CCC;
-    text-align: right;
+/* preset form */
+
+.inspector-body { 
+
 }
 
-.preset-input {
-    margin-left: 25%;
-    padding-left: 10px;
+.inspector-preset {
+    border-bottom: 1px solid #ccc;
 }
+
+.preset-section.inspector-inner:first-child { 
+    padding-top: 0;
+}
+
+.preset-section.inspector-inner:last-child { 
+    padding-bottom: 20px;
+}
+
+.inspector-body .name {
+    height: 120px;
+}
+
+.inspector-body .name h4,
+.preset-section h4[for*="input-"] {
+    border: 1px solid #cfcfcf;
+    padding: 5px 10px;
+    background: #f6f6f6;
+    position: absolute;
+    left: 20px;
+    border-radius: 4px 4px 0 0;
+    right: 20px;
+    pointer-events: none;
+}
+
+.preset-section h4 + input,
+h4 + .input-wrap-position input {
+    padding-top: 35px;
+    height: 60px;
+}
+
+.name input.major {
+    padding-top: 35px;
+    height: 70px;
+}
+
+input[type=number] {
+    width: 50%;
+}
+
+.preset-section h4[for="input-building:levels"],
+.preset-section.checkselect h4 {
+    right: 50%;
+}
+
 .preset-fav button.fav {
     height: 30px;
     margin: 5px;
@@ -685,7 +716,7 @@ div.combobox {
 .combobox a {
     height: 25px;
     line-height: 25px;
-    cursor: pointer;
+    cursor: url(../img/cursor-pointer.png) 6 1, pointer;
     display: block;
     border-top:1px solid #ccc;
     background-color: #fff;
@@ -705,7 +736,7 @@ div.combobox {
 }
 
 .combobox-input {
-    cursor: pointer;
+    cursor: url(../img/cursor-pointer.png) 6 1, pointer;
 }
 
 .combobox-carat {
@@ -741,15 +772,17 @@ div.combobox {
 
 .checkselect label {
     display: block;
-    padding: 5px;
-    width: 100%;
+    padding: 35px 5px 5px 5px;
+    border-radius: 4px;
+    width: 50%;
     box-sizing: border-box;
     color: #999;
+    border: 1px solid #CCC;
 }
 
 .checkselect label:hover {
     cursor: pointer;
-    background: #eee;
+    background: #f1f1f1;
 }
 
 .checkselect .set {
@@ -774,30 +807,34 @@ div.combobox {
 
 /* Address input */
 
-.preset-input .addr-housename {
+.preset-section .addr-housename {
     border-bottom: none;
     border-radius: 4px 4px 0 0;
 }
 
-.preset-input .addr-number {
+.preset-section .addr-number {
     width: 20%;
     border-right: none;
     border-bottom: none;
     border-radius: 0;
 }
 
-.preset-input .addr-street {
+.preset-section .addr-street {
     width: 80%;
     border-radius: 0;
     border-bottom: none;
 }
 
-.preset-input .addr-city {
+.preset-section .addr-city {
     border-radius: 0 0 4px 4px;
 }
 
 /* tag editor */
 
+.tag-wrap .grid-entry { 
+    border-right: 0;
+}
+
 .tag-list {
     margin-top: 10px;
 }
@@ -813,10 +850,6 @@ div.combobox {
     margin-top: -1px;
     }
 
-.input-wrap-position {
-    position: relative;
-}
-
 .tag-row input {
     width: 50%;
     border-left: 0;

css/reset.css

@@ -73,6 +73,12 @@ input {
     line-height: normal;
 }
 
+/* Hide default number spinner controls in Chrome */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button { 
+display: none;
+}
+
 /*
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.

js/id/ui/preset.js

@@ -30,21 +30,16 @@ iD.ui.preset = function(context) {
             .data(preset.form)
             .enter()
             .append('div')
-            .attr('class', 'preset-section fillL inspector-inner col12');
+            .attr('class', 'fr preset-section fillL inspector-inner col9');
 
         sections.each(function(d) {
             var s = d3.select(this);
-            var wrap = s.append('div')
-                .attr('class', 'preset-section-input');
 
-           wrap.append('div')
-                .attr('class', 'col3 preset-label')
-                .append('h4')
+           s.append('h4')
                 .attr('for', 'input-' + d.key)
                 .text(function(d) { return d.label(); });
 
-            input.call(wrap.append('div')
-                .attr('class', 'col9 preset-input'), d);
+            input.call(s, d);
         });
         if (tags) event.setTags(tags);
     }

js/id/ui/preset/combo.js

@@ -1,20 +1,18 @@
 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 = wrap.append('input')
+        input = this.append('input')
             .attr('type', 'text')
             .on('change', change)
             .on('blur', change);
 
         var combobox = d3.combobox();
-        wrap.call(combobox);
+        input.call(combobox);
 
         if (form.options) {
             options(form.options);

js/id/ui/tag_editor.js

@@ -57,13 +57,14 @@ iD.ui.TagEditor = function(context) {
         typebutton.node().focus();
 
          var namewrap = headerwrap.append('div')
-             .attr('class', 'name preset-section fillL inspector-inner col9');
+             .attr('class', 'name fillL inspector-inner col9');
 
         typebutton.append('span')
             .attr('class','label')
             .text(preset.name);
 
-        namewrap.append('h4').text(t('inspector.name'));
+        namewrap.append('h4')
+            .text(t('inspector.name'));
 
         name = namewrap.append('input')
             .attr('placeholder', 'unknown')
@@ -83,7 +84,7 @@ iD.ui.TagEditor = function(context) {
             .on('change', changeTags);
 
         var tageditorpreset = editorwrap.append('div')
-            .attr('class', 'inspector-preset');
+            .attr('class', 'inspector-preset cf fillL');
 
         if (preset) {
             tageditorpreset.call(presetUI

js/id/ui/taglist.js

@@ -75,9 +75,7 @@ iD.ui.Taglist = function(context) {
                 event.change(taglist.tags());
             });
 
-        inputs.append('span')
-            .attr('class', 'input-wrap-position')
-            .append('input')
+        inputs.append('input')
             .property('type', 'text')
             .attr('class', 'value')
             .attr('maxlength', 255)