Focus share link by default

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index e97e29bb58ce8536d9ced0337b6a82624d4daee0..773145bedfcb7257b7f14aefd6b14c08c90c4ce5 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -29,23 +29,31 @@ L.OSM.share = function (options) {
       .text(I18n.t('javascripts.share.link'))
       .appendTo($share_link);
 
+    var $input = $('<input />')
+      .attr('type', 'text')
+      .appendTo($share_link);
+
+    var $list = $('<ul>')
+      .appendTo($share_link);
+
+    var $short_option = $('<li>')
+      .appendTo($list);
+
+    var $short_url_label = $('<label></label>')
+      .attr('for', 'short_url')
+      .appendTo($short_option);
+
     var $short_url_input = $('<input />')
       .attr('id', 'short_url')
       .attr('type', 'checkbox')
       .prop('checked', 'checked')
-      .appendTo($share_link)
+      .appendTo($short_url_label)
       .bind('change', function() {
           options.short = $(this).prop('checked');
           update();
       });
 
-    var $short_url_label = $('<label></label>')
-      .text(I18n.t('javascripts.share.short_url'))
-      .attr('for', 'short_url')
-      .appendTo($share_link);
-
-    var $input = $('<input />')
-      .appendTo($share_link);
+    $short_url_label.append(I18n.t('javascripts.share.short_url'));
 
     map.on('moveend layeradd layerremove', update);
 
@@ -55,6 +63,7 @@ L.OSM.share = function (options) {
       e.stopPropagation();
       e.preventDefault();
       options.sidebar.togglePane($ui);
+      $input.select();
     }
 
     function update() {

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 1e3bcc46873cf8d6c663ef900ff43a75ff1efb39..4ce15ec451246e52810eb92a0c9ecc980de14c45 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -613,12 +613,16 @@ a.donate {
   label {
     display: block;
     padding: 5px;
-    background-color: #868e85;
+    background-color: #eee;
     cursor: pointer;
   }
 
   li.active label {
-    background-color: #68c879;
+    background-color: #ccc;
+  }
+
+  input[type=text] {
+    width:220px;
   }
 
   .base-layers {