diff --git a/css/app.css b/css/app.css index 0df284ac5..8ccac2b72 100644 --- a/css/app.css +++ b/css/app.css @@ -290,6 +290,7 @@ form.hide { .content { border-radius: 4px; box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.7); + overflow: hidden; } .pad1 {padding: 10px;} @@ -567,22 +568,25 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} display:none; max-width: 500px; position: relative; + border-radius: 0 0 0 4px; + overflow: hidden; } .inspector-body { overflow: auto; max-height: 480px; + min-height: 360px; } .inspector-inner { padding: 20px; - border-bottom: 1px solid #ccc; position: relative; } .inspector-inner.message { height: 60px; padding: 10px; + border-bottom: 1px solid #ccc; } .inspector-inner.message h3 { @@ -599,22 +603,23 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} /* preset form */ +.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 .type button { - height: 125px; -} - .inspector-body .name { - height: 125px; + height: 120px; } .preset-grid-search-wrap { height: 60px; + border-bottom: 1px solid #ccc; } .preset-grid-search-wrap .icon { @@ -892,6 +897,7 @@ div.combobox { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 0; + overflow: hidden; } .grid-inner { @@ -904,19 +910,27 @@ div.combobox { .grid-entry:hover .preset-help { display: block; - border-radius: 4px 0 0 0; + border-radius: 0; } .grid-entry .preset-help { display: none; position: absolute; - bottom: 0px; - right: 0px; + bottom: 0; + right: 0; + height: 30px; + width: 30px; + background: rgba(0,0,0,.5); +} + +.grid-entry .preset-help:hover { + background: rgba(0,0,0,.9); } .preset-inspect { position: relative; - background: #fff; + background: white; + border-bottom: 1px solid #ccc; } .grid-entry .preset-icon-fill.area { @@ -940,17 +954,14 @@ div.combobox { text-align: center; display: block; position: absolute; - top: 60%; - width: 80%; + padding: 5px; + bottom: 0; left: 0; right: 0; margin: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -} - -.inspector-body-line .grid-entry .label { - top: 80%; + border-top: 1px solid rgba(0, 0, 0, .1); } /* Preset icon colors */ diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 36b28121c..4ad63ef50 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -6,16 +6,13 @@ iD.ui.Inspector = function(context) { function inspector(selection) { var entity = selection.datum(); - var inspectorbody = selection.append('div') - .attr('class', 'fillL'); - var presetGrid = iD.ui.PresetGrid(context) .entity(entity) .on('close', function() { event.close(); }) .on('choose', function(preset) { - inspectorbody.call(tagEditor, preset); + selection.call(tagEditor, preset); }); tagEditor = iD.ui.TagEditor(context) @@ -27,10 +24,10 @@ iD.ui.Inspector = function(context) { event.close(entity); }) .on('choose', function() { - inspectorbody.call(presetGrid, true); + selection.call(presetGrid, true); }); - inspectorbody.call(initial ? presetGrid : tagEditor); + selection.call(initial ? presetGrid : tagEditor); selection.call(iD.ui.Toggle(true)); } diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 8e022d144..2a000d703 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', 'preset-section inspector-inner col12'); + .attr('class', 'preset-section fillL inspector-inner col12'); sections.each(function(d) { var s = d3.select(this); diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index f175d8fa2..9e45690d9 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -20,7 +20,7 @@ iD.ui.PresetGrid = function(context) { .attr('class', 'preset-grid-search-wrap inspector-inner'); var grid = selection.append('div') - .attr('class', 'preset-grid fillD inspector-body inspector-body-' + entity.geometry(context.graph())) + .attr('class', 'preset-grid inspector-body fillL2 inspector-body-' + entity.geometry(context.graph())) .call(drawGrid, context.presets().defaults(entity, 12)); searchwrap.append('span').attr('class', 'icon search'); @@ -120,7 +120,7 @@ iD.ui.PresetGrid = function(context) { entered.append('button') .attr('tabindex', -1) - .attr('class', 'preset-help minor') + .attr('class', 'preset-help') .on('click', function(d) { // Display description box inline @@ -165,7 +165,7 @@ iD.ui.PresetGrid = function(context) { _.find(data, function(d) { return d.lang === 'en'; }); description.text(doc.description); link.attr('href', 'http://wiki.openstreetmap.org/wiki/' + encodeURIComponent(doc.title)); - link.text(doc.title); + link.text(t('inspector.reference')); }); }) .append('span') diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js index 6ed106db3..94fbb12f9 100644 --- a/js/id/ui/tag_editor.js +++ b/js/id/ui/tag_editor.js @@ -38,7 +38,7 @@ iD.ui.TagEditor = function(context) { .text(t('inspector.choose')); var editorwrap = selection.append('div') - .attr('class', 'tag-wrap inspector-body inspector-body-' + entity.geometry(context.graph())); + .attr('class', 'tag-wrap inspector-body fillL2 inspector-body-' + entity.geometry(context.graph())); var headerwrap = editorwrap.append('div').attr('class','col12 head'); @@ -57,10 +57,10 @@ iD.ui.TagEditor = function(context) { typebutton.node().focus(); var namewrap = headerwrap.append('div') - .attr('class', 'name preset-section inspector-inner col9'); + .attr('class', 'name preset-section fillL inspector-inner col9'); typebutton.append('span') - .attr('class','h4') + .attr('class','label') .text(preset.name); namewrap.append('h4').text(t('inspector.name')); diff --git a/locale/en.js b/locale/en.js index e78e6ccd1..4ffabf3f4 100644 --- a/locale/en.js +++ b/locale/en.js @@ -185,7 +185,8 @@ locale.en = { editing: "Editing {type}", additional: "Additional tags", choose: "What are you adding?", - results: "{n} results for {search}" + results: "{n} results for {search}", + reference: "View on OpenStreetMap Wiki →" }, background: {