Flexbox preset field, member, and membership UI

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 {

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');
 }
-

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')

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); })

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

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()

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

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 }));
 

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);

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')

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);