diff --git a/css/app.css b/css/app.css index 1afa22426..36faa04ee 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 ------------------------------------------------------- */ @@ -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; } 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 48203b457..8f2242d45 100644 --- a/js/id/ui/preset.js +++ b/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() { diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index 0340084fa..14f9fb4d9 100644 --- a/js/id/ui/preset/radio.js +++ b/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(); diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js index 061ee52be..3e7f5482b 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 col12'); if (preset) { tageditorpreset.call(presetUI