Merge pull request #1004 from systemed/form-revamp

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
 ------------------------------------------------------- */
 
@@ -575,7 +576,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .inspector-body {
     overflow: auto;
     max-height: 480px;
-    min-height: 360px;
+    min-height: 330px;
 }
 
 .inspector-inner {
@@ -601,21 +602,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,19 +640,56 @@ 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-preset {
+    border-bottom: 1px solid #ccc;
 }
 
-.preset-input {
-    margin-left: 25%;
-    padding-left: 10px;
+.preset-section.inspector-inner { 
+    padding-bottom: 0;
+}
+
+.preset-section.inspector-inner:last-child { 
+    padding-bottom: 20px;
+}
+
+.inspector-body .name {
+    height: 110px;
+    border-bottom: 1px solid #ccc;
+}
+
+.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,
+h4 + .preset-input input:first-child {
+    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%;
 }
 
 button.preset-add-form {
@@ -685,19 +712,22 @@ div.combobox {
     margin-top: -1px;
     background: white;
     max-height: 180px;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
     border: 1px solid #ccc;
 }
 
 .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;
     padding:1px 4px;
+    text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
     height: 30px;
 }
 
@@ -712,7 +742,7 @@ div.combobox {
 }
 
 .combobox-input {
-    cursor: pointer;
+    cursor: url(../img/cursor-pointer.png) 6 1, pointer;
 }
 
 .combobox-carat {
@@ -748,15 +778,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 {
@@ -773,33 +805,52 @@ div.combobox {
     opacity: 1;
 }
 
-.preset-radio button {
+/* 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 */
 
-.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;
 }
 
@@ -820,10 +871,6 @@ div.combobox {
     margin-top: -1px;
     }
 
-.input-wrap-position {
-    position: relative;
-}
-
 .tag-row input {
     width: 50%;
     border-left: 0;
@@ -899,7 +946,7 @@ div.combobox {
 /* Preset grid */
 
 .grid-entry {
-    height: 120px;
+    height: 110px;
     position: relative;
     border-right: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
@@ -949,7 +996,7 @@ div.combobox {
 
 .grid-entry > .icon {
     position: absolute;
-    top: 40px;left: 0; right: 0;
+    top: 30px;left: 0; right: 0;
     margin: auto;
 }
 

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

@@ -69,18 +69,12 @@ iD.ui.preset = function(context) {
             .enter()
             .append('div')
             .attr('class', 'preset-section fillL inspector-inner col12')
-            .append('div')
-                .attr('class', 'preset-section-input');
 
-           sections.append('div')
-                .attr('class', 'col3 preset-label')
-                .append('h4')
+           sections.append('h4')
                 .attr('for', function(d) { return 'input-' + d.key; })
                 .text(function(d) { return d.label(); });
 
-           sections.append('div')
-                .attr('class', 'col9 preset-input')
-                .each(input);
+           sections.each(input);
     }
 
     presets.rendered = function() {

js/id/ui/preset/radio.js

@@ -6,7 +6,9 @@ iD.ui.preset.radio = function(form) {
     function radio(selection) {
         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')
@@ -17,7 +19,7 @@ iD.ui.preset.radio = function(form) {
                     change();
                 });
 
-        selection.append('button')
+        buttonwrap.append('button')
             .on('click', function() {
                 buttons.classed('active', false);
                 change();

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 col12');
 
         if (preset) {
             tageditorpreset.call(presetUI