diff --git a/css/80_app.css b/css/80_app.css index 438bad6b6..1cc1b8476 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1422,50 +1422,62 @@ img.tag-reference-wiki-image { } .form-field-input-multicombo ul.chiplist { - padding: 5px 0 5px 10px; + padding: 5px 7px 5px 7px; background: #fff; display: block; border-radius: 0 0 4px 4px; } .form-field-input-multicombo li.chips { + background-color: #eff2f7; + border: 1px solid #ccd5e3; + line-height: 25px; + padding: 2px 0px 2px 5px; +} +.form-field-input-multicombo li { display: inline-flex; flex-flow: row nowrap; align-items: center; - background-color: #eff2f7; - border: 1px solid #ccd5e3; - border-radius: 4px; - line-height: 25px; - padding: 2px 5px; margin: 3px; + border-radius: 4px; } .form-field-input-multicombo a { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; - line-height: 24px; + line-height: 22px; float: right; - margin: 1px 0 0 5px; - padding: 0; + padding: 0px 5px 0px 5px; + margin: 0; cursor: pointer; color: #a6b4ce; } -.form-field-input-multicombo input { +.form-field-input-multicombo .input-wrap { border: 1px solid #ddd; width: 100px; - margin: 3px; height: 31px; + overflow: hidden; } - -.form-field-input-multicombo .combobox-caret { - margin: 3px 3px 3px -30px; +.form-field-input-multicombo input { + border: none; + width: 100%; } .form-field-input-multicombo input:focus { border-radius: 4px !important; } +.form-field-input-multicombo .full-line-chips li { + display: block; +} +.form-field-input-multicombo .full-line-chips li:not(:last-child) { + margin-bottom: 6px; +} +.form-field-input-multicombo .full-line-chips .input-wrap { + width: auto; +} + /* Field - Text / Numeric ------------------------------------------------------- */ diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js index 88882084e..aaf7d4438 100644 --- a/modules/ui/fields/combo.js +++ b/modules/ui/fields/combo.js @@ -42,6 +42,7 @@ export function uiFieldCombo(field, context) { .caseSensitive(caseSensitive) .minItems(isMulti || isSemi ? 1 : 2); var container = d3_select(null); + var inputWrap = d3_select(null); var input = d3_select(null); var _comboData = []; var _multiData = []; @@ -292,17 +293,37 @@ export function uiFieldCombo(field, context) { container = container.selectAll('.chiplist') .data([0]); + var listClass = 'chiplist'; + + // Use a separate line for each value in the Destinations field + // to mimic highway exit signs + if (field.id === 'destination_oneway') { + listClass += ' full-line-chips'; + } + container = container.enter() .append('ul') - .attr('class', 'chiplist') + .attr('class', listClass) .on('click', function() { window.setTimeout(function() { input.node().focus(); }, 10); }) .merge(container); - } - input = container.selectAll('input') - .data([0]); + + inputWrap = container.selectAll('.input-wrap') + .data([0]); + + inputWrap = inputWrap.enter() + .append('li') + .attr('class', 'input-wrap') + .merge(inputWrap); + + input = inputWrap.selectAll('input') + .data([0]); + } else { + input = container.selectAll('input') + .data([0]); + } input = input.enter() .append('input') @@ -395,7 +416,7 @@ export function uiFieldCombo(field, context) { .remove(); var enter = chips.enter() - .insert('li', 'input') + .insert('li', '.input-wrap') .attr('class', 'chips'); enter.append('span');