diff --git a/css/80_app.css b/css/80_app.css index 15bc8a7a4..d528e5cd7 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -160,7 +160,6 @@ input[type=email] { border: 1px solid #ccc; padding: 5px 20px 5px 10px; height: 30px; - width: 100%; border-radius: 4px; text-overflow: ellipsis; } @@ -1203,6 +1202,8 @@ a.hide-toggle { } .form-field { + display: flex; + flex-wrap: wrap; margin-bottom: 10px; width: 100%; -webkit-transition: margin-bottom 200ms; @@ -1220,26 +1221,22 @@ a.hide-toggle { position: relative; font-weight: bold; border: 1px solid #cfcfcf; - padding: 5px 0 5px 10px; background: #f6f6f6; - display: block; border-radius: 4px 4px 0 0; overflow: hidden; + flex: 1 1 100%; + display: flex; } -[dir='rtl'] .form-label { +.form-label .label-text { + flex: 1 1 auto; + padding: 5px 0 5px 10px; +} +[dir='rtl'] .form-label .label-text { padding: 5px 10px 5px 0; } - .form-label-button-wrap { - position: absolute; - top: 0; - right: 0; - height: 100%; background: transparent; -} -[dir='rtl'] .form-label-button-wrap { - right: auto; - left: 0; + flex: 0 1 auto; } .form-label-button-wrap .tag-reference-button { @@ -1261,7 +1258,6 @@ a.hide-toggle { border-left: none; border-right: 1px solid #ccc; border-radius: 4px 0 0 0; - width: 31px; } .form-label button:hover { background: #f1f1f1; @@ -1286,6 +1282,7 @@ a.hide-toggle { border-radius: 0 0 4px 4px; overflow: hidden; position: relative; + flex: 1; } .form-field textarea { @@ -1296,6 +1293,27 @@ a.hide-toggle { border-bottom: 1px solid #ccc } +/* Fields - corner radius for fields with following elements on the same line +------------------------------------------------------- */ +[dir='ltr'] .inspector-wrap:not(.inspector-hover) .form-field .wiki-title, +[dir='ltr'] .inspector-wrap:not(.inspector-hover) .form-field .localized-main, +[dir='ltr'] .inspector-wrap:not(.inspector-hover) .form-field .member-role, +[dir='ltr'] .inspector-wrap:not(.inspector-hover) .form-field .spin-control button:first-child, +[dir='ltr'] .inspector-wrap:not(.inspector-hover) .form-field input[type='text'].number, +[dir='ltr'] #preset-input-maxspeed, +[dir='ltr'] #preset-input-maxspeed_advisory { + border-bottom-right-radius: 0; +} +[dir='rtl'] .inspector-wrap:not(.inspector-hover) .form-field .wiki-title, +[dir='rtl'] .inspector-wrap:not(.inspector-hover) .form-field .localized-main, +[dir='rtl'] .inspector-wrap:not(.inspector-hover) .form-field .member-role, +[dir='rtl'] .inspector-wrap:not(.inspector-hover) .form-field .spin-control button:first-child, +[dir='rtl'] .inspector-wrap:not(.inspector-hover) .form-field input[type='text'].number, +[dir='rtl'] #preset-input-maxspeed, +[dir='rtl'] #preset-input-maxspeed_advisory { + border-bottom-left-radius: 0; +} + /* Inspector (hover styles) ------------------------------------------------------- */ .inspector-hover .checkselect label:last-of-type, @@ -1346,7 +1364,6 @@ a.hide-toggle { } /* hide but preserve in layout */ -.inspector-hover .entity-editor-pane button.minor, .inspector-hover .combobox-caret, .inspector-hover .header button, .inspector-hover .spin-control, @@ -1358,13 +1375,13 @@ a.hide-toggle { .inspector-hover .footer * { opacity: 0; } +/* hide and do not affect layout */ +.inspector-hover .entity-editor-pane button.minor { + display: none; +} /* Styles for raw tag inspector on hover */ .inspector-hover .tag-row .key-wrap, -.inspector-hover .tag-row .form-field.input-wrap-position { - width: 50%; -} -.inspector-hover .tag-row .key-wrap, .inspector-hover .tag-row .input-wrap-position { height: 31px; } @@ -1464,10 +1481,6 @@ a.hide-toggle { padding: 5px 10px; } -[dir='rtl'] .preset-input-wrap .col6 { - float: right; -} - /* Field - Access, Cycleway, Structure ------------------------------------------------------- */ @@ -1475,12 +1488,18 @@ a.hide-toggle { .form-field-cycleway .preset-input-wrap li, .form-field-access .preset-input-wrap li { border-bottom: 1px solid #ccc; + display: flex; } .structure-extras-wrap li:last-child, .form-field-cycleway .preset-input-wrap li:last-child, .form-field-access .preset-input-wrap li:last-child { border-bottom: 0; } +.structure-extras-wrap li > *, +.form-field-cycleway .preset-input-wrap li > *, +.form-field-access .preset-input-wrap li > * { + flex: 1; +} .structure-input-type-wrap input, .structure-input-layer-wrap input, .preset-input-cycleway-wrap input, @@ -1488,6 +1507,7 @@ a.hide-toggle { border-radius: 0; border-width: 0; border-left-width: 1px; + width: 100%; } [dir='rtl'] .structure-input-type-wrap input, [dir='rtl'] .structure-input-layer-wrap input, @@ -1496,6 +1516,17 @@ a.hide-toggle { border-left-width: 0; border-right-width: 1px; } +.structure-extras-wrap .spin-control button { + border-bottom: 0; +} +[dir='ltr'] .structure-extras-wrap .spin-control button { + border-right: 0; + border-left-width: 1px; +} +[dir='rtl'] .structure-extras-wrap .spin-control button { + border-left: 0; + border-right-width: 1px; +} .preset-input-wrap li:last-child input { border-bottom-right-radius: 4px; @@ -1549,6 +1580,7 @@ a.hide-toggle { display: block; border-radius: 0 0 4px 4px; overflow: hidden; + flex: 1 1 auto; } .form-field-multicombo:focus { border-bottom: 0px; @@ -1599,50 +1631,10 @@ a.hide-toggle { /* Field - Numeric ------------------------------------------------------- */ -input[type=number] { - position: relative; - padding-right: 20%; -} - .spin-control { - width: 64px; - height: 30px; - display: inline-block; - margin-left: -64px; - margin-bottom: -11px; position: relative; + display: flex; } -[dir='rtl'] .spin-control{ - margin-left: 0; - margin-right: -64px; -} - -.spin-control button { - right: 1px; - position: relative; - float: left; - height: 100%; - width: 32px; - border-left: 1px solid #ccc; - border-radius: 0; - background: rgba(0, 0, 0, 0); -} -[dir='rtl'] .spin-control button{ - border-left: 0; - border-right: 1px solid #ccc; -} - -.spin-control button.decrement { - border-bottom-right-radius: 3px; -} -[dir='rtl'] .spin-control button.decrement { - border-bottom-right-radius: 0; -} -[dir='rtl'] .spin-control button.increment { - border-bottom-left-radius: 3px; - right: 0; -} - .spin-control button.decrement::after, .spin-control button.increment::after { content:""; @@ -1715,18 +1707,17 @@ input[type=number] { #preset-input-maxspeed_advisory, #preset-input-maxspeed { border-right: none; - border-radius: 0 0 0 4px; - width: 80%; + flex: 1; } [dir='rtl'] #preset-input-maxspeed_advisory, [dir='rtl'] #preset-input-maxspeed { border-right: 1px solid #ccc; - border-radius: 0 0 4px 0; } .form-field .maxspeed-unit { border-radius: 0 0 4px 0; - width: 20%; + flex: 0 1 20%; + min-width: 70px; } [dir='rtl'] .form-field .maxspeed-unit { border-right: 0; @@ -1738,55 +1729,32 @@ input[type=number] { ------------------------------------------------------- */ .form-field .wiki-lang { border-radius: 0; -} -.form-field .wiki-title { - padding-right: 20%; -} -[dir='rtl'] .form-field .wiki-title { - padding-left: 20%; - padding-right: 10px; -} - -.form-field .wiki-title ~ .combobox-caret { - right: 32px; -} -[dir='rtl'] .form-field .wiki-title ~ .combobox-caret { - right: auto; - left: 32px; + flex-basis: 100%; } /* Field - Localized Name ------------------------------------------------------- */ -.form-field .localized-main { - padding-right: 12%; -} -[dir='rtl'] .form-field .localized-main { - padding-left: 12%; - padding-right: 10px; -} - .form-field .button-input-action { position: relative; - right: 1px; - width: 32px; - margin-left: -32px; border: 1px solid #ccc; border-top-width: 0; - border-right-width: 0; + border-left-width: 0; border-radius: 0 0 4px 0; height: 30px; vertical-align: top; + width: 32px; + flex: 0 1 auto; } [dir='rtl'] .form-field .button-input-action { - margin-left: 0; - margin-right: -32px; - border-right-width: 1px; + border-left-width: 1px; + border-right-width: 0; border-radius: 0 0 0 4px; } .form-field .localized-wrap { padding: 0 10px; + flex-basis: 100%; } .form-field .localized-wrap .entry { position: relative; @@ -1809,13 +1777,12 @@ input[type=number] { .form-field .localized-wrap .entry .localized-lang { border-radius: 0; border-top-width: 0; + width: 100%; } .form-field .localized-wrap .entry .localized-value { border-top-width: 0; border-radius: 0 0 4px 4px; -} -.form-field .localized-wrap .form-label button { - border-top-right-radius: 3px; + width: 100%; } @@ -2167,6 +2134,7 @@ div.combobox { border-radius: 0; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; + width: 100%; } [dir='rtl'] .tag-row input { border-left: none; @@ -2175,7 +2143,7 @@ div.combobox { .tag-row .key-wrap, .tag-row .input-wrap-position { - flex: 1 0.5 100%; + flex: 1; height: 30px; } @@ -2206,7 +2174,7 @@ div.combobox { .tag-row button { height: 31px; - flex: 0 0 33px; + width: 32px; border: 1px solid #ccc; border-top-width: 0; border-left-width: 0; @@ -2356,6 +2324,7 @@ img.tag-reference-wiki-image { .member-row-new .member-entity-input { border-radius: 4px 4px 0 0; border: 1px solid #cfcfcf; + flex-basis: 100%; } .add-relation { diff --git a/modules/ui/field.js b/modules/ui/field.js index 585e38bb8..d1f09a286 100644 --- a/modules/ui/field.js +++ b/modules/ui/field.js @@ -107,7 +107,11 @@ export function uiField(context, presetField, entity, options) { var label = enter .append('label') .attr('class', 'form-label') - .attr('for', function(d) { return 'preset-input-' + d.safeid; }) + .attr('for', function(d) { return 'preset-input-' + d.safeid; }); + + label + .append('span') + .attr('class', 'label-text') .text(function(d) { return d.label(); }); var wrap = label @@ -228,4 +232,3 @@ export function uiField(context, presetField, entity, options) { return utilRebind(field, dispatch, 'on'); } - diff --git a/modules/ui/fields/access.js b/modules/ui/fields/access.js index 4df935d45..44c8c233d 100644 --- a/modules/ui/fields/access.js +++ b/modules/ui/fields/access.js @@ -21,7 +21,7 @@ export function uiFieldAccess(field, context) { wrap = wrap.enter() .append('div') - .attr('class', 'cf preset-input-wrap') + .attr('class', 'preset-input-wrap') .append('ul') .merge(wrap); @@ -39,17 +39,17 @@ export function uiFieldAccess(field, context) { // Enter var enter = items.enter() .append('li') - .attr('class', function(d) { return 'cf preset-access-' + d; }); + .attr('class', function(d) { return 'preset-access-' + d; }); enter .append('span') - .attr('class', 'col6 label preset-label-access') + .attr('class', 'label preset-label-access') .attr('for', function(d) { return 'preset-input-access-' + d; }) .text(function(d) { return field.t('types.' + d); }); enter .append('div') - .attr('class', 'col6 preset-input-access-wrap') + .attr('class', 'preset-input-access-wrap') .append('input') .attr('type', 'text') .attr('class', 'preset-input-access') diff --git a/modules/ui/fields/cycleway.js b/modules/ui/fields/cycleway.js index 4b58f0510..0816795e5 100644 --- a/modules/ui/fields/cycleway.js +++ b/modules/ui/fields/cycleway.js @@ -28,7 +28,7 @@ export function uiFieldCycleway(field, context) { wrap = wrap.enter() .append('div') - .attr('class', 'cf preset-input-wrap') + .attr('class', 'preset-input-wrap') .merge(wrap); @@ -45,17 +45,17 @@ export function uiFieldCycleway(field, context) { var enter = items.enter() .append('li') - .attr('class', function(d) { return 'cf preset-cycleway-' + stripcolon(d); }); + .attr('class', function(d) { return 'preset-cycleway-' + stripcolon(d); }); enter .append('span') - .attr('class', 'col6 label preset-label-cycleway') + .attr('class', 'label preset-label-cycleway') .attr('for', function(d) { return 'preset-input-cycleway-' + stripcolon(d); }) .text(function(d) { return field.t('types.' + d); }); enter .append('div') - .attr('class', 'col6 preset-input-cycleway-wrap') + .attr('class', 'preset-input-cycleway-wrap') .append('input') .attr('type', 'text') .attr('class', function(d) { return 'preset-input-cycleway preset-input-' + stripcolon(d); }) diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index b8c98df56..91805ffef 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -37,6 +37,7 @@ export function uiFieldText(field, context) { .attr('type', field.type) .attr('id', fieldId) .attr('placeholder', field.placeholder() || t('inspector.unknown')) + .classed(field.type, true) .call(utilNoAuto) .merge(input); @@ -68,13 +69,15 @@ export function uiFieldText(field, context) { enter .append('button') .datum(rtl ? 1 : -1) - .attr('class', rtl ? 'increment' : 'decrement') + .attr('class', 'button-input-action minor') + .classed(rtl ? 'increment' : 'decrement', true) .attr('tabindex', -1); enter .append('button') .datum(rtl ? -1 : 1) - .attr('class', rtl ? 'decrement' : 'increment') + .attr('class', 'button-input-action minor') + .classed(rtl ? 'decrement' : 'increment', true) .attr('tabindex', -1); spinControl = spinControl diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index fdc57b5a7..1f66b36ae 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -189,18 +189,24 @@ export function uiFieldLocalized(field, context) { var label = wrap .append('label') .attr('class','form-label') - .text(t('translate.localized_translation_label')) .attr('for','localized-lang'); label + .append('span') + .attr('class', 'label-text') + .text(t('translate.localized_translation_label')); + + label + .append('div') + .attr('class', 'form-label-button-wrap') .append('button') - .attr('class', 'minor remove') + .attr('class', 'minor remove-icon') .on('click', function(d){ d3_event.preventDefault(); var t = {}; t[key(d.lang)] = undefined; dispatch.call('change', this, t); - d3_select(this.parentNode.parentNode) + d3_select(this.parentNode.parentNode.parentNode) .style('top','0') .style('max-height','240px') .transition() diff --git a/modules/ui/fields/radio.js b/modules/ui/fields/radio.js index 27c8175b3..7e8fbe3c4 100644 --- a/modules/ui/fields/radio.js +++ b/modules/ui/fields/radio.js @@ -125,17 +125,17 @@ export function uiFieldRadio(field, context) { // Enter var typeEnter = typeItem.enter() .insert('li', ':first-child') - .attr('class', 'cf structure-type-item'); + .attr('class', 'structure-type-item'); typeEnter .append('span') - .attr('class', 'col6 label structure-label-type') + .attr('class', 'label structure-label-type') .attr('for', 'preset-input-' + selected) .text(t('inspector.radio.structure.type')); typeEnter .append('div') - .attr('class', 'col6 structure-input-type-wrap'); + .attr('class', 'structure-input-type-wrap'); // Update typeItem = typeItem @@ -170,17 +170,17 @@ export function uiFieldRadio(field, context) { // Enter var layerEnter = layerItem.enter() .append('li') - .attr('class', 'cf structure-layer-item'); + .attr('class', 'structure-layer-item'); layerEnter .append('span') - .attr('class', 'col6 label structure-label-layer') + .attr('class', 'label structure-label-layer') .attr('for', 'preset-input-layer') .text(t('inspector.radio.structure.layer')); layerEnter .append('div') - .attr('class', 'col6 structure-input-layer-wrap'); + .attr('class', 'structure-input-layer-wrap'); // Update layerItem = layerItem diff --git a/modules/ui/raw_member_editor.js b/modules/ui/raw_member_editor.js index 0d1080dca..3188a9854 100644 --- a/modules/ui/raw_member_editor.js +++ b/modules/ui/raw_member_editor.js @@ -145,7 +145,10 @@ export function uiRawMemberEditor(context) { var label = d3_select(this).append('label') .attr('class', 'form-label'); - var labelLink = label.append('a') + var labelLink = label + .append('span') + .attr('class', 'label-text') + .append('a') .attr('href', '#') .on('click', selectMember); @@ -174,11 +177,15 @@ export function uiRawMemberEditor(context) { var incompleteLabel = d3_select(this).append('label') .attr('class', 'form-label'); - incompleteLabel.append('span') + var labelText = incompleteLabel + .append('span') + .attr('class', 'label-text'); + + labelText.append('span') .attr('class', 'member-entity-type') .text(t('inspector.'+d.type, { id: d.id })); - incompleteLabel.append('span') + labelText.append('span') .attr('class', 'member-entity-name') .text(t('inspector.incomplete', { id: d.id })); diff --git a/modules/ui/raw_membership_editor.js b/modules/ui/raw_membership_editor.js index f856cd7ab..90a09cf75 100644 --- a/modules/ui/raw_membership_editor.js +++ b/modules/ui/raw_membership_editor.js @@ -186,6 +186,8 @@ export function uiRawMembershipEditor(context) { var label = enter .append('label') .attr('class', 'form-label') + .append('span') + .attr('class', 'label-text') .append('a') .attr('href', '#') .on('click', selectRelation); diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index 5e67edad4..63e3b4317 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -103,7 +103,7 @@ export function uiRawTagEditor(context) { var enter = items.enter() .append('li') - .attr('class', 'tag-row cf') + .attr('class', 'tag-row') .classed('readonly', isReadOnly); var innerWrap = enter.append('div') diff --git a/modules/ui/tag_reference.js b/modules/ui/tag_reference.js index 390f2d7d9..03f625019 100644 --- a/modules/ui/tag_reference.js +++ b/modules/ui/tag_reference.js @@ -187,7 +187,7 @@ export function uiTagReference(tag) { _body = _body.enter() .append('div') - .attr('class', 'tag-reference-body cf') + .attr('class', 'tag-reference-body') .style('max-height', '0') .style('opacity', '0') .merge(_body);