Put link next to input and make it non-navigable

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 62572cf695a0f626caf7a12fb866fcc0b1b78d0f..15e4a722989f029065d5b1053c8285f49e979780 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -67,14 +67,15 @@ L.OSM.share = function (options) {
       .append($('<label>')
         .attr('for', 'long_input')
         .text(I18n.t('javascripts.share.long_link')))
-      .append($('<a>')
-        .attr('id', 'long_link')
-        .append($('<span>')
-          .attr('class', 'icon link')))
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')
-        .on('click', select));
+        .on('click', select))
+      .append($('<a>')
+        .attr('id', 'long_link')
+        .on('click', function() { return false; })
+        .append($('<span>')
+          .attr('class', 'icon link')));
 
     $('<div>')
       .attr('class', 'form-row')
@@ -82,14 +83,15 @@ L.OSM.share = function (options) {
       .append($('<label>')
         .attr('for', 'short_input')
         .text(I18n.t('javascripts.share.short_link')))
-      .append($('<a>')
-        .attr('id', 'short_link')
-        .append($('<span>')
-          .attr('class', 'icon link')))
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')
-        .on('click', select));
+        .on('click', select))
+      .append($('<a>')
+        .attr('id', 'short_link')
+        .on('click', function() { return false; })
+        .append($('<span>')
+          .attr('class', 'icon link')));
 
     // Embed
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 7c6e8095a6c9c07774405a037b88145e175ea1ab..bd313fe334d8c0a6110eeecfe9eea5c523cae69a 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -638,6 +638,11 @@ a.donate {
 
 .share-ui {
   .share-link {
+    #long_input,
+    #short_input {
+      width: 190px;
+    }
+
     a {
       margin-left: 5px;
     }