diff --git a/css/app.css b/css/app.css
index 06b897d74..18316769b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -70,12 +70,12 @@ h2:last-child,
h4:last-child { margin-bottom: 0;}
h3 {
- font-size: 18px;
+ font-size: 16px;
line-height: 1.3333;
font-weight: bold;
margin-bottom: 10px;
text-overflow: ellipsis;
- white-space: nowrap
+ white-space: nowrap;
}
h4 {
@@ -134,6 +134,7 @@ a:hover {
textarea {
resize: vertical;
+ font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
}
textarea,
@@ -271,7 +272,9 @@ ul.link-list li:last-child {
.fr { float: right;}
div.hide,
-form.hide {
+form.hide,
+button.hide,
+a.hide {
display: none;
}
@@ -285,9 +288,6 @@ form.hide {
}
.pad1 {padding: 10px;}
-.pad2 {padding: 20px;}
-.margin1 {margin: 10px;}
-.margin2 {margin: 20px;}
.loading {
background: url(../img/loader_bg.gif);
@@ -443,12 +443,6 @@ button.save.has-count .count::before {
border-right: 6px solid rgba(255,255,255,.5);
}
-button.close {
- position: absolute;
- top: 10px;
- right: 10px;
-}
-
button[disabled] {
cursor:auto;
background: rgba(255,255,255,.5);
@@ -580,6 +574,37 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
border-radius: 0;
}
+
+/* Header for modals / panes
+------------------------------------------------------- */
+
+.header {
+ border-bottom: 1px solid #ccc;
+ z-index: 2;
+ position: relative;
+}
+
+.header h3 {
+ margin-bottom: 0;
+}
+
+.modal > button,
+.header button {
+ height: 100%;
+ border-radius: 0;
+ border-left: 1px solid #CCC;
+ width: 40px;
+ text-align: center;
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+}
+
+.modal > button {
+ height: 61px;
+ z-index: 3;
+}
+
/* Inspector
------------------------------------------------------- */
@@ -616,24 +641,13 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
position: relative;
}
-.inspector-wrap .message {
- height: 60px;
- border-bottom: 1px solid #ccc;
- z-index: 100;
- position: relative;
-}
-
-.inspector-wrap .message button {
- height: 100%;
- border-radius: 0;
+.inspector-wrap .header button.preset-reset {
border-right: 1px solid #CCC;
- width: 60px;
- text-align: center;
- overflow: hidden;
position: relative;
+ width: 60px;
}
-.inspector-wrap .message button > div {
+.inspector-wrap .header button.preset-reset > div {
height: 100%;
padding: 20px 0;
-webkit-transition: opacity 200ms;
@@ -641,38 +655,26 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
transition: opacity 200ms;
}
-.inspector-wrap .message button .col12:last-child {
+.inspector-wrap .header button.preset-reset .col12:last-child {
position: absolute;
width: 100%;
padding: 20px 0;
opacity: 0;
}
-.inspector-wrap .message button:hover .col12:first-child {
+.inspector-wrap .header button:hover .col12:first-child {
opacity: 0;
}
-.inspector-wrap .message button:hover .col12:last-child {
+.inspector-wrap .header button:hover .col12:last-child {
opacity: 1;
}
-.inspector-wrap .message button.line > div {
+.inspector-wrap .header button.line > div {
padding: 0;
}
-.inspector-wrap .message button.fr {
- border-left: 1px solid #CCC;
- width: 40px;
-}
-
-.inspector-wrap .message h3 {
- display: block;
- font-size: 16px;
- line-height: 20px;
- overflow: hidden;
-}
-
-.pane:last-child .message h3 {
+.pane:last-child .header h3 {
position: absolute;
left: 60px;
right: 40px;
@@ -1637,12 +1639,10 @@ div.typeahead a:first-child {
.modal {
display: inline-block;
position:absolute;
- width: 50%;
left: 0;
right: 0;
margin: auto;
- max-width: 600px;
- top: 80px;
+ top: 30px;
z-index: 3;
}
@@ -1650,27 +1650,10 @@ div.typeahead a:first-child {
margin-bottom: 10px;
}
-.modal .content {
- margin-bottom: 40px;
-}
-
.modal .description {
text-align: center;
}
-.modal button.close-modal {
- float:right;
- position: absolute;
- right:5px;
- top:5px;
- opacity: .5;
-}
-
-.modal button.close-modal:hover {
- background-color: transparent;
- opacity: 1;
-}
-
.shaded {
z-index: 2;
position: absolute;
@@ -1678,6 +1661,7 @@ div.typeahead a:first-child {
width: 100%;
overflow: auto;
}
+
.shaded:before {
content:'';
background:rgba(0,0,0,0.5);
@@ -1687,29 +1671,11 @@ div.typeahead a:first-child {
.modal-section {
padding: 20px;
-}
-
-.modal-section:first-child {
- border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid #CCC;
}
.modal-section:last-child {
- border-radius: 0 0 4px 4px;
-}
-
-.modal-section:only-of-type {
- border-radius: 4px;
-}
-
-.modal-section .buttons {
- padding-top: 10px;
- width: 100%;
-}
-
-.modal-section img.wiki-image {
- max-width: 100%;
- max-height: 300px;
- display: block;
+ border-bottom: 0;
}
.modal-flash .content {
@@ -1750,6 +1716,7 @@ div.typeahead a:first-child {
.commit-modal .commit-info {
margin-top: 10px;
+ padding-bottom: 20px;
}
.commit-modal .user-info img {
@@ -1773,70 +1740,75 @@ div.typeahead a:first-child {
.commit-modal .changeset-list {
overflow: auto;
border:1px solid #ccc;
+ border-radius: 4px;
background:#fff;
max-height: 160px;
}
+.commit-modal .warning-section .changeset-list {
+ border-radius: 4px 0 0 4px;
+}
+
.commit-modal .warning-section .changeset-list button {
float: right;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-radius: 0;
+ height: 100%;
+ width: 30px;
}
-.commit-section.modal-section {
- padding-bottom: 0;
-}
-
-.commit-section.modal-section:last-child { padding-bottom: 20px;}
-
.commit-modal .changeset-list li {
position: relative;
border-top:1px solid #ccc;
padding:5px 10px;
}
-.modal-section {
- padding: 20px;
-}
-
-.modal-section img.wiki-image {
- max-width: 100%;
- max-height: 300px;
- display: block;
-}
-
-.modal-flash .content {
- box-shadow: none;
- border-radius: 4px;
- background: #111;
- color: #eee;
-}
-
-.modal-flash .close-modal {
- display:none;
-}
-
.changeset-list li span.count {
font-size:10px;
color:#555;
}
.changeset-list li span.count:before { content: '('; }
+
.changeset-list li span.count:after { content: ')'; }
.changeset-list li:first-child { border-top: 0;}
-.commit-modal .changeset-comment {
- height: 60px;
- width:100%;
- /* firefox uses monospace in textareas */
- font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
-}
-
/* Success
------------------------------------------------------- */
-a.success-action {
- display:inline-block;
- padding:10px;
- margin:10px;
+
+.modal a.success-action {
+ height: 180px;
+ border-bottom: 1px solid #CCC;
+ text-align: center;
+ -webkit-transition: all 200ms;
+ -moz-transition: all 200ms;
+ transition: all 200ms;
+}
+
+.modal a.success-action:hover {
+ background-color: #ececec;
+}
+
+a.success-action.osm {
+ border-right: 1px solid #CCC;
+}
+
+a.success-action:before {
+ display: block;
+ content: '';
+ height: 100px;
+ width: 100px;
+ margin: auto;
+ margin-bottom: 20px;
+ background:transparent url(../img/sprite.png) no-repeat 0px -220px;
+}
+
+a.success-action.twitter:before {
+ background-position: -100px -220px;
}
/* Notices
@@ -2096,10 +2068,10 @@ a.success-action {
------------------------------------------------------- */
@media only screen and (max-width: 840px) {
- span.label {display: none;}
+ #bar .label {display: none;}
+ #bar .icon.icon-pre-text { margin-right: 0px;}
/* override hide for save button */
- .icon.icon-pre-text { margin-right: 0px;}
- .save .label, .apply .label, .cancel .label { display: block;}
+ #bar .save .label { display: block;}
}
@media only screen and (max-height: 840px) {
diff --git a/data/core.yaml b/data/core.yaml
index bf65bff04..7953cd0e3 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -105,7 +105,7 @@ en:
annotation: Split a way.
nothing_to_undo: Nothing to undo.
nothing_to_redo: Nothing to redo.
- just_edited: "You Just Edited OpenStreetMap!"
+ just_edited: "You just edited OpenStreetMap!"
browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map."
view_on_osm: View on OSM
zoom_in_edit: zoom in to edit the map
@@ -114,6 +114,7 @@ en:
commit:
title: Save Changes
description_placeholder: Brief description of your contributions
+ message_label: Commit message
upload_explanation: "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data."
save: Save
cancel: Cancel
diff --git a/data/locales.js b/data/locales.js
index 8dba73d28..4be144f8e 100644
--- a/data/locales.js
+++ b/data/locales.js
@@ -137,7 +137,7 @@ locale.en = {
},
"nothing_to_undo": "Nothing to undo.",
"nothing_to_redo": "Nothing to redo.",
- "just_edited": "You Just Edited OpenStreetMap!",
+ "just_edited": "You just edited OpenStreetMap!",
"browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.",
"view_on_osm": "View on OSM",
"zoom_in_edit": "zoom in to edit the map",
@@ -146,6 +146,7 @@ locale.en = {
"commit": {
"title": "Save Changes",
"description_placeholder": "Brief description of your contributions",
+ "message_label": "Commit message",
"upload_explanation": "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data.",
"save": "Save",
"cancel": "Cancel",
diff --git a/img/source/sprite.svg b/img/source/sprite.svg
index d9bdf35df..c651771b8 100644
--- a/img/source/sprite.svg
+++ b/img/source/sprite.svg
@@ -10,7 +10,7 @@
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="460"
- height="220"
+ height="320"
id="svg12393"
version="1.1"
inkscape:version="0.48.2 r9819"
@@ -39,21 +39,21 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
- inkscape:cx="251.84767"
- inkscape:cy="109.87116"
+ inkscape:cx="105.09059"
+ inkscape:cy="203.92529"
inkscape:document-units="px"
inkscape:current-layer="layer12"
- showgrid="false"
+ showgrid="true"
inkscape:window-width="1280"
inkscape:window-height="700"
- inkscape:window-x="361"
- inkscape:window-y="86"
+ inkscape:window-x="131"
+ inkscape:window-y="17"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
- showguides="false"
+ showguides="true"
inkscape:guide-bbox="true"
inkscape:snap-bbox="true"
inkscape:snap-nodes="false">
@@ -66,131 +66,131 @@
snapvisiblegridlinesonly="true" />
+ width="460"
+ height="320"
+ x="-485"
+ y="-3.0624999e-06"
+ transform="scale(-1,1)" />
-
+
+
+
+
+
+
+
+
+
+
diff --git a/img/sprite.png b/img/sprite.png
index 0289cad00..746c18725 100644
Binary files a/img/sprite.png and b/img/sprite.png differ
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index b37e22e8b..15ef0cca3 100644
--- a/js/id/svg/surface.js
+++ b/js/id/svg/surface.js
@@ -93,7 +93,7 @@ iD.svg.Surface = function() {
.attr({
id: 'sprite',
width: 460,
- height: 220,
+ height: 320,
'xlink:href': 'img/sprite.png'
});
diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js
index efdc1c190..8bba39cb2 100644
--- a/js/id/ui/commit.js
+++ b/js/id/ui/commit.js
@@ -28,22 +28,30 @@ iD.ui.Commit = function(context) {
var changes = selection.datum(),
connection = changes.connection,
user = connection.user(),
- header = selection.append('div').attr('class', 'header modal-section fillL'),
+ header = selection.append('div').attr('class', 'header modal-section'),
body = selection.append('div').attr('class', 'body');
- header.append('h2')
+ header.append('h3')
.text(t('commit.title'));
+ // Comment Section
var commentSection = body.append('div')
- .attr('class', 'modal-section fillD');
+ .attr('class', 'modal-section preset-field');
- var commentField = commentSection.append('textarea')
- .attr('class', 'changeset-comment')
- .attr('placeholder', t('commit.description_placeholder'))
- .property('value', context.storage('comment') || '');
+ commentSection.append('h4')
+ .attr('for','input-commit-note')
+ .text(t('commit.message_label'));
+
+ var commentField = commentSection
+ .append('textarea')
+ .attr('placeholder', t('commit.description_placeholder'))
+ .property('value', context.storage('comment') || '');
commentField.node().select();
+ // Save Section
+ var saveSection = body.append('div').attr('class','modal-section cf');
+
var userLink = d3.select(document.createElement('div'));
if (user.image_url) {
@@ -58,18 +66,13 @@ iD.ui.Commit = function(context) {
.attr('href', connection.url() + '/user/' + user.display_name)
.attr('target', '_blank');
- commentSection.append('p')
+ saveSection.append('p')
.attr('class', 'commit-info')
.html(t('commit.upload_explanation', {user: userLink.html()}));
- // Confirm / Cancel Buttons
- var buttonWrap = commentSection.append('div')
- .attr('class', 'buttons cf')
- .append('div')
- .attr('class', 'button-wrap joined col4');
-
- var saveButton = buttonWrap.append('button')
- .attr('class', 'save action col6 button')
+ // Confirm Button
+ var saveButton = saveSection.append('button')
+ .attr('class', 'action col2 button')
.on('click.save', function() {
var comment = commentField.node().value;
localStorage.comment = comment;
@@ -82,21 +85,11 @@ iD.ui.Commit = function(context) {
.attr('class', 'label')
.text(t('commit.save'));
- var cancelButton = buttonWrap.append('button')
- .attr('class', 'cancel col6 button')
- .on('click.cancel', function() {
- event.cancel();
- });
-
- cancelButton.append('span')
- .attr('class', 'label')
- .text(t('commit.cancel'));
-
var warnings = body.selectAll('div.warning-section')
.data(iD.validate(changes, context.graph()))
.enter()
.append('div')
- .attr('class', 'modal-section warning-section fillL');
+ .attr('class', 'modal-section warning-section fillL2');
warnings.append('h3')
.text(t('commit.warnings'));
diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js
index 6851e739f..c82b4c1ab 100644
--- a/js/id/ui/confirm.js
+++ b/js/id/ui/confirm.js
@@ -4,26 +4,22 @@ iD.ui.confirm = function(selection) {
modal.select('.modal')
.classed('modal-alert', true);
- var section = modal.select('.content')
- .attr('class', 'modal-section fillD');
+ var section = modal.select('.content');
+
+ var modalHeader = section.append('div')
+ .attr('class', 'modal-section header');
var description = section.append('div')
- .attr('class', 'description');
+ .attr('class', 'modal-section message-text');
var buttonwrap = section.append('div')
- .attr('class', 'buttons cf');
+ .attr('class', 'modal-section buttons cf');
var okbutton = buttonwrap.append('button')
- .attr('class', 'col2 action centered')
+ .attr('class', 'col2 action')
.on('click.confirm', function() {
modal.remove();
- });
-
- okbutton.append('span')
- .attr('class', 'icon apply icon-pre-text');
-
- okbutton.append('span')
- .attr('class', 'label')
+ })
.text('Okay');
return modal;
diff --git a/js/id/ui/loading.js b/js/id/ui/loading.js
index c07426a0b..fe161acec 100644
--- a/js/id/ui/loading.js
+++ b/js/id/ui/loading.js
@@ -8,5 +8,7 @@ iD.ui.loading = function(selection, message, blocking) {
loadertext.append('img').attr('class','loader').attr('src', 'img/loader.gif');
loadertext.append('h3').text(message || '');
+ modal.select('button.close').attr('class','hide');
+
return modal;
};
diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js
index 539c89de8..5da396a2b 100644
--- a/js/id/ui/modal.js
+++ b/js/id/ui/modal.js
@@ -21,13 +21,15 @@ iD.ui.modal = function(selection, blocking) {
});
var modal = shaded.append('div')
- .attr('class', 'modal');
+ .attr('class', 'modal fillL col6');
modal.append('button')
- .attr('class', 'icon remove')
+ .attr('class', 'close')
.on('click', function() {
if (!blocking) shaded.remove();
- });
+ })
+ .append('div')
+ .attr('class','icon close');
modal.append('div')
.attr('class', 'content');
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 1ed641149..004de7510 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -12,7 +12,7 @@ iD.ui.PresetGrid = function(context, entity) {
presets = context.presets().matchGeometry(entity, context.graph());
var messagewrap = selection.append('div')
- .attr('class', 'message fillL');
+ .attr('class', 'header fillL cf');
var message = messagewrap.append('h3')
.attr('class', 'inspector-inner fl')
@@ -20,13 +20,13 @@ iD.ui.PresetGrid = function(context, entity) {
if (preset) {
messagewrap.append('button')
- .attr('class', 'tooltip-bottom preset-choose fr')
+ .attr('class', 'preset-choose')
.on('click', event.choose)
.append('span')
.attr('class', 'icon forward');
} else {
messagewrap.append('button')
- .attr('class', 'tooltip-bottom preset-close fr')
+ .attr('class', 'close')
.on('click', event.close)
.append('span')
.attr('class', 'icon close');
diff --git a/js/id/ui/restore.js b/js/id/ui/restore.js
index 0c3d0a617..72ffa76d8 100644
--- a/js/id/ui/restore.js
+++ b/js/id/ui/restore.js
@@ -11,12 +11,12 @@ iD.ui.Restore = function(context) {
var introModal = modal.select('.content');
introModal.append('div')
- .attr('class', 'modal-section fillL')
+ .attr('class', 'modal-section header')
.append('h3')
.text(t('restore.description'));
var buttonWrap = introModal.append('div')
- .attr('class', 'modal-section fillD cf col12');
+ .attr('class', 'modal-section cf col12');
var buttons = buttonWrap
.append('div')
diff --git a/js/id/ui/save.js b/js/id/ui/save.js
index 7fb733d06..26c6d22a7 100644
--- a/js/id/ui/save.js
+++ b/js/id/ui/save.js
@@ -39,11 +39,15 @@ iD.ui.Save = function(context) {
function(err, changeset_id) {
loading.remove();
if (err) {
- var desc = iD.ui.confirm(context.container())
- .select('.description');
- desc.append('h2')
+ var confirm = iD.ui.confirm(context.container());
+ confirm
+ .select('.modal-section.header')
+ .append('h3')
.text(t('save.error'));
- desc.append('p').text(err.responseText);
+ confirm
+ .select('.modal-section.message-text')
+ .append('p')
+ .text(err.responseText);
} else {
history.reset();
map.flush().redraw();
diff --git a/js/id/ui/success.js b/js/id/ui/success.js
index 4d4799ffd..67a75c62b 100644
--- a/js/id/ui/success.js
+++ b/js/id/ui/success.js
@@ -3,12 +3,10 @@ iD.ui.Success = function(connection) {
function success(selection) {
var changeset = selection.datum(),
- header = selection.append('div').attr('class', 'header fillL modal-section'),
+ header = selection.append('div').attr('class', 'header modal-section'),
body = selection.append('div').attr('class', 'body');
- var section = body.append('div').attr('class','modal-section fillD');
-
- header.append('h2').text(t('just_edited'));
+ header.append('h3').text(t('just_edited'));
var m = '';
if (changeset.comment) {
@@ -18,34 +16,33 @@ iD.ui.Success = function(connection) {
var message = (m || 'Edited OSM!') +
connection.changesetUrl(changeset.id);
- header.append('a')
+ var links = body.append('div').attr('class','cf');
+
+ links.append('a')
+ .attr('class','col6 success-action modal-section osm')
+ .attr('target', '_blank')
.attr('href', function() {
return connection.changesetUrl(changeset.id);
})
- .attr('target', '_blank')
- .attr('class', 'success-action')
.text(t('view_on_osm'));
- header.append('a')
+ links.append('a')
+ .attr('class','col6 success-action modal-section twitter')
.attr('target', '_blank')
.attr('href', function() {
return 'https://twitter.com/intent/tweet?source=webclient&text=' +
encodeURIComponent(message);
})
- .attr('class', 'success-action')
.text('Tweet');
- var buttonwrap = section.append('div')
- .attr('class', 'buttons cf');
+ var section = body.append('div').attr('class','modal-section cf');
- var okbutton = buttonwrap.append('button')
+ section.append('button')
.attr('class', 'action col2')
.on('click.save', function() {
event.cancel();
- });
-
- okbutton.append('span').attr('class','icon apply icon-pre-text');
- okbutton.append('span').attr('class','label').text('Okay');
+ })
+ .append('span').attr('class','label').text('Okay');
}
return d3.rebind(success, event, 'on');
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index b9881f682..69d29d057 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -24,7 +24,7 @@ iD.ui.TagEditor = function(context, entity) {
selection.html('');
var messagewrap = selection.append('div')
- .attr('class', 'message fillL');
+ .attr('class', 'header fillL cf');
var back = messagewrap.append('button')
.attr('class', 'preset-reset fl ' + geometry)
diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js
index 8a8ea2041..67ae91b84 100644
--- a/js/id/ui/tag_reference.js
+++ b/js/id/ui/tag_reference.js
@@ -4,7 +4,7 @@ iD.ui.tagReference = function(selection) {
var selection = d3.select(this);
var header = selection.append('div')
.attr('class','modal-section fillL header')
- .append('h2');
+ .append('h3');
header.selectAll('span.icon')
.data(g('types'))
@@ -23,7 +23,7 @@ iD.ui.tagReference = function(selection) {
.attr('class','modal-section fillL2');
referenceBody
- .append('h5')
+ .append('h4')
.text(t('tag_reference.description'));
if (selection.datum().image) {