diff --git a/css/app.css b/css/app.css index 8ccac2b72..40fa971fc 100644 --- a/css/app.css +++ b/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; diff --git a/css/reset.css b/css/reset.css index d8c4036a9..5d98c807d 100644 --- a/css/reset.css +++ b/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. diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 2a000d703..e26d07dcd 100644 --- a/js/id/ui/preset.js +++ b/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); } diff --git a/js/id/ui/preset/combo.js b/js/id/ui/preset/combo.js index 851b993a9..d7a11eb01 100644 --- a/js/id/ui/preset/combo.js +++ b/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); diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js index 94fbb12f9..db65d3190 100644 --- a/js/id/ui/tag_editor.js +++ b/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 diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js index 25cd7c847..2d3f4ed64 100644 --- a/js/id/ui/taglist.js +++ b/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)