diff --git a/css/app.css b/css/app.css index 188328736..45a5bc4da 100644 --- a/css/app.css +++ b/css/app.css @@ -29,6 +29,10 @@ h2 { margin-bottom: 10px; } +h3:last-child, +h2:last-child, +h4:last-child { margin-bottom: 0;} + h3 { font-size: 18px; line-height: 1.3333; @@ -409,9 +413,11 @@ button[disabled] .icon.layers { background-position: -300px -40px;} button[disabled] .icon.avatar { background-position: -320px -40px;} button[disabled] .icon.nearby { background-position: -340px -40px;} -.icon.big-line { background-position: 0px -80px;} -.icon.big-point { background-position: -40px -80px;} -.icon.big-area { background-position: -80px -80px;} +.icon.big-line { background-position: 0px -80px;} +.icon.big-point { background-position: -40px -80px;} +.icon.big-area { background-position: -80px -80px;} +.icon.big-inspect { background-position: -120px -80px;} + /* Toggle Icon is special */ .toggle.icon { background-position: 0px -180px;} @@ -765,7 +771,6 @@ div.typeahead a:first-child { .modal .loader { margin-bottom: 10px;} .modal .content { - padding: 10px; margin-bottom: 40px; } @@ -773,7 +778,8 @@ div.typeahead a:first-child { text-align: center; } -.modal button { margin-top: 0;} +.modal button { margin-bottom: 0;} +.modal button:first-child { margin-left: 0;} .shaded { z-index: 2; @@ -806,6 +812,12 @@ div.typeahead a:first-child { max-height: 160px; } +.modal-section { + padding: 20px; + border-bottom: 1px solid #ccc; +} +.modal-section:last-child { border-bottom: 0;} + .changeset-list li { border-top:1px solid #ccc; padding:5px 10px; @@ -820,12 +832,6 @@ div.typeahead a:first-child { font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif; } -.commit-modal .buttons { - padding-bottom: 10px; - margin-bottom: 10px; - border-bottom: 1px solid #ccc; -} - .loading-modal { text-align: center; } diff --git a/img/source/design.svg b/img/source/design.svg index af72a509c..b3b801c0b 100644 --- a/img/source/design.svg +++ b/img/source/design.svg @@ -481,12 +481,12 @@ borderopacity="1.0" inkscape:pageopacity="1" inkscape:pageshadow="2" - inkscape:zoom="16" - inkscape:cx="1555.3951" - inkscape:cy="1076.4548" + inkscape:zoom="1" + inkscape:cx="413.87213" + inkscape:cy="499.14559" inkscape:document-units="px" inkscape:current-layer="layer1" - showgrid="true" + showgrid="false" inkscape:window-width="1543" inkscape:window-height="834" inkscape:window-x="246" @@ -2868,7 +2868,8 @@ transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" /> + id="g8385" + transform="translate(-10,0)"> + id="g8396" + transform="translate(-10,0)"> + + + + + + + + + + + @@ -165,7 +165,7 @@ image/svg+xml - + @@ -1386,5 +1386,10 @@ height="19.999998" x="-135" y="39.999996" /> + diff --git a/img/sprite.png b/img/sprite.png index 8138e5980..8d95470f5 100644 Binary files a/img/sprite.png and b/img/sprite.png differ diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js index cd5a74324..fa3ba810b 100644 --- a/js/id/ui/commit.js +++ b/js/id/ui/commit.js @@ -3,43 +3,43 @@ iD.commit = function() { function commit(selection) { var changes = selection.datum(), - header = selection.append('div').attr('class', 'header pad1'), + header = selection.append('div').attr('class', 'header modal-section'), body = selection.append('div').attr('class', 'body'); header.append('h2').text('Upload Changes to OpenStreetMap'); header.append('p').text('The changes you upload will be visible on all maps that use OpenStreetMap data.'); - body.append('div').attr('class','pad1') - .append('textarea') - .attr('class', 'changeset-comment pad1') - .attr('placeholder', 'Brief Description of your contributions'); + var commit = body.append('div').attr('class','modal-section'); + commit.append('textarea') + .attr('class', 'changeset-comment') + .attr('placeholder', 'Brief Description of your contributions'); - var buttonwrap = body.append('div') - .attr('class', 'buttons'); + var buttonwrap = commit.append('div') + .attr('class', 'buttons'); - var savebutton = buttonwrap.append('button') - .attr('class', 'action wide') - .on('click.save', function() { - event.save({ - comment: d3.select('textarea.changeset-comment').node().value - }); - }); - savebutton.append('span').attr('class','icon save icon-pre-text') - savebutton.append('span').attr('class','label').text('Save') - var cancelbutton = buttonwrap.append('button') - .attr('class', 'cancel wide') - .on('click.cancel', function() { - event.cancel(); - }); - cancelbutton.append('span').attr('class','icon close icon-pre-text') - cancelbutton.append('span').attr('class','label').text('Cancel') + var savebutton = buttonwrap.append('button') + .attr('class', 'action wide') + .on('click.save', function() { + event.save({ + comment: d3.select('textarea.changeset-comment').node().value + }); + }); + savebutton.append('span').attr('class','icon save icon-pre-text') + savebutton.append('span').attr('class','label').text('Save') + var cancelbutton = buttonwrap.append('button') + .attr('class', 'cancel wide') + .on('click.cancel', function() { + event.cancel(); + }); + cancelbutton.append('span').attr('class','icon close icon-pre-text') + cancelbutton.append('span').attr('class','label').text('Cancel') var section = body.selectAll('div.commit-section') .data(['modified', 'deleted', 'created'].filter(function(d) { return changes[d].length; })) .enter() - .append('div').attr('class', 'commit-section pad1'); + .append('div').attr('class', 'commit-section modal-section'); section.append('h3').text(String) .append('small') diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js index b8eeab955..40558804d 100644 --- a/js/id/ui/confirm.js +++ b/js/id/ui/confirm.js @@ -2,8 +2,8 @@ iD.confirm = function(message) { var modal = iD.modal(); modal.select('.modal').classed('modal-alert', true); modal.select('.content') - .classed('pad1', true) - .append('div').attr('class', 'description pad1'); + .classed('modal-section', true) + .append('div').attr('class', 'description'); var nochanges = modal.select('.content') .append('button') .attr('class','wide action centered') diff --git a/js/id/ui/loading.js b/js/id/ui/loading.js index 19bbb0140..303d650b6 100644 --- a/js/id/ui/loading.js +++ b/js/id/ui/loading.js @@ -3,7 +3,7 @@ iD.loading = function(message) { var loadertext = modal.select('.content') .classed('loading-modal', true) - .append('div').classed('pad1',true); + .append('div').classed('modal-section',true); loadertext.append('img').attr('class','loader').attr('src', '../img/loader.gif'); loadertext.append('h3').text(message || ''); diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js index 58cb96f04..4c2997a14 100644 --- a/js/id/ui/tag_reference.js +++ b/js/id/ui/tag_reference.js @@ -2,11 +2,12 @@ iD.tagReference = function(selection) { selection.each(function() { function g(x) { return function(d) { return d[x]; }; } var selection = d3.select(this); - selection - .append('div') - .attr('class','header') - .append('h2') - .text(g('title')); + var header = selection.append('div') + .attr('class','modal-section') + .append('h2'); + header.append('span').attr('class','icon big icon-pre-text big-inspect'); + header.append('span').text(g('title')); + var icon_row = selection.append('div'); var icons = icon_row.selectAll('span.icon') .data(g('types')) @@ -30,4 +31,4 @@ iD.tagReference = function(selection) { .append('p') .text(g('description')); }); -}; +}; \ No newline at end of file