Reformat success page. Fixes #532

css/app.css

@@ -994,6 +994,14 @@ div.typeahead a:first-child {
     text-align: center;
 }
 
+/* Success
+------------------------------------------------------- */
+a.success-action {
+  display:inline-block;
+  padding:10px;
+  margin:10px;
+}
+
 /* Notices
 ------------------------------------------------------- */
 
@@ -1056,17 +1064,17 @@ div.typeahead a:first-child {
 }
 
 .tooltip-inner {
-    text-align: left;
-    width: 200px;
-    font-size: 11px;
-    font-weight: bold;
-    line-height: 20px;
-    padding: 5px 10px;
-    color: #333;
-    background-color: white;
-    -webkit-border-radius: 4px;
-       -moz-border-radius: 4px;
-            border-radius: 4px;
+  text-align: left;
+  width: 200px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 20px;
+  padding: 5px 10px;
+  color: #333;
+  background-color: white;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
 }
 
 .tooltip-arrow {

js/id/connection.js

@@ -10,6 +10,10 @@ iD.Connection = function() {
         loadedTiles = {},
         oauth = iD.OAuth().url(url);
 
+    function changesetUrl(changesetId) {
+        return url + '/browse/changeset/' + changesetId;
+    }
+
     function bboxUrl(b) {
         return url + '/api/0.6/map?bbox=' + [b[0][0],b[1][1],b[1][0],b[0][1]];
     }
@@ -325,6 +329,7 @@ iD.Connection = function() {
     };
 
     connection.bboxFromAPI = bboxFromAPI;
+    connection.changesetUrl = changesetUrl;
     connection.loadFromURL = loadFromURL;
     connection.loadTiles = _.debounce(loadTiles, 100);
     connection.userDetails = userDetails;

js/id/ui/save.js

@@ -37,7 +37,7 @@ iD.ui.save = function() {
                                 id: changeset_id,
                                 comment: e.comment
                             })
-                            .call(iD.ui.success()
+                            .call(iD.ui.success(connection)
                                 .on('cancel', function() {
                                     modal.remove();
                                 }));

js/id/ui/success.js

@@ -1,4 +1,4 @@
-iD.ui.success = function() {
+iD.ui.success = function(connection) {
     var event = d3.dispatch('cancel', 'save');
 
     function success(selection) {
@@ -9,22 +9,31 @@ iD.ui.success = function() {
         var section = body.append('div').attr('class','modal-section fillD');
 
         header.append('h2').text('You Just Edited OpenStreetMap!');
-        header.append('p').text('You just improved the world\'s best free map');
 
         var m = '';
         if (changeset.comment) {
             m = '"' + changeset.comment.substring(0, 20) + '" ';
         }
 
-        var message = 'Edited OpenStreetMap! ' + m +
-            'http://osm.org/browse/changeset/' + changeset.id;
+        var message = (m || 'Edited OSM!') +
+            connection.changesetUrl(changeset.id);
 
-        section.append('a')
+        header.append('a')
+            .attr('href', function(d) {
+                return connection.changesetUrl(changeset.id);
+            })
+            .attr('target', '_blank')
+            .attr('class', 'success-action')
+            .text('View on OSM');
+
+        header.append('a')
+            .attr('target', '_blank')
             .attr('href', function(d) {
                 return 'https://twitter.com/intent/tweet?source=webclient&text=' +
                     encodeURIComponent(message);
             })
-            .text('Tweet: ' + message);
+            .attr('class', 'success-action')
+            .text('Tweet');
 
         var buttonwrap = section.append('div')
             .attr('class', 'buttons cf');