diff --git a/css/80_app.css b/css/80_app.css index b074cefc5..6631db593 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3078,6 +3078,7 @@ div.full-screen > button:hover { background-color: #fff; color: #7092ff; position: relative; + display: flex; } .layer-list:empty { @@ -3108,9 +3109,8 @@ div.full-screen > button:hover { } .layer-list li.best > div.best { - display: inline-block; padding: 5px; - float: right; + flex: 0 0 auto; } [dir='rtl'] .list-item-data-browse svg { @@ -3124,9 +3124,9 @@ div.full-screen > button:hover { } .layer-list label { - display: block; padding: 5px 10px; cursor: pointer; + flex: 1 1 auto; } [dir='ltr'] .layer-list .indented label { @@ -3145,7 +3145,6 @@ div.full-screen > button:hover { .map-data-pane .layer-list button, .background-pane .layer-list button { - float: right; height: 100%; border-left: 1px solid #ccc; border-radius: 0; @@ -3154,7 +3153,6 @@ div.full-screen > button:hover { } [dir='rtl'] .map-data-pane .layer-list button, [dir='rtl'] .background-pane .layer-list button { - float: left; border-left: none; border-right: 1px solid #ccc; } @@ -3164,12 +3162,12 @@ div.full-screen > button:hover { opacity: 0.5; } -.map-data-pane .layer-list button:first-of-type, -.background-pane .layer-list button:first-of-type { +.map-data-pane .layer-list button:last-of-type, +.background-pane .layer-list button:last-of-type { border-radius: 0 3px 3px 0; } -[dir='rtl'] .map-data-pane .layer-list button:first-of-type, -[dir='rtl'] .background-pane .layer-list button:first-of-type { +[dir='rtl'] .map-data-pane .layer-list button:last-of-type, +[dir='rtl'] .background-pane .layer-list button:last-of-type { border-radius: 3px 0 0 3px; } diff --git a/modules/ui/background.js b/modules/ui/background.js index b7317e5fb..5c801db17 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -135,6 +135,19 @@ export function uiBackground(context) { .classed('layer-custom', function(d) { return d.id === 'custom'; }) .classed('best', function(d) { return d.best(); }); + var label = enter + .append('label'); + + label + .append('input') + .attr('type', type) + .attr('name', 'layers') + .on('change', change); + + label + .append('span') + .text(function(d) { return d.name(); }); + enter.filter(function(d) { return d.id === 'custom'; }) .append('button') .attr('class', 'layer-browse') @@ -155,23 +168,9 @@ export function uiBackground(context) { .append('span') .html('★'); - var label = enter - .append('label'); - - label - .append('input') - .attr('type', type) - .attr('name', 'layers') - .on('change', change); - - label - .append('span') - .text(function(d) { return d.name(); }); - layerList.selectAll('li') - .sort(sortSources) - .style('display', layerList.selectAll('li').data().length > 0 ? 'block' : 'none'); + .sort(sortSources); layerList .call(updateLayerSelections); diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 1d8aad3d1..7c82ff1d4 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -505,6 +505,22 @@ export function uiMapData(context) { .append('li') .attr('class', 'list-item-data'); + var labelEnter = liEnter + .append('label') + .call(tooltip() + .title(t('map_data.layers.custom.tooltip')) + .placement('top') + ); + + labelEnter + .append('input') + .attr('type', 'checkbox') + .on('change', function() { toggleLayer('data'); }); + + labelEnter + .append('span') + .text(t('map_data.layers.custom.title')); + liEnter .append('button') .call(tooltip() @@ -527,22 +543,6 @@ export function uiMapData(context) { }) .call(svgIcon('#iD-icon-search')); - var labelEnter = liEnter - .append('label') - .call(tooltip() - .title(t('map_data.layers.custom.tooltip')) - .placement('top') - ); - - labelEnter - .append('input') - .attr('type', 'checkbox') - .on('change', function() { toggleLayer('data'); }); - - labelEnter - .append('span') - .text(t('map_data.layers.custom.title')); - // Update ul = ul .merge(ulEnter);