Use bootstrap form controls for the link and html controls

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index c72760c972e5b8733af2e81b1e3e24d5edcafdf1..5fb189a7684765655115c54fe1d31f9b548f6522 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -68,6 +68,7 @@ L.OSM.share = function (options) {
       .append($("<input>")
         .attr("id", "long_input")
         .attr("type", "text")
+        .attr("class", "form-control form-control-sm font-monospace")
         .on("click", select));
 
     $("<div>")
@@ -77,6 +78,7 @@ L.OSM.share = function (options) {
       .append($("<input>")
         .attr("id", "short_input")
         .attr("type", "text")
+        .attr("class", "form-control form-control-sm font-monospace")
         .on("click", select));
 
     $("<div>")
@@ -86,6 +88,7 @@ L.OSM.share = function (options) {
       .append(
         $("<textarea>")
           .attr("id", "embed_html")
+          .attr("class", "form-control form-control-sm font-monospace")
           .on("click", select))
       .append(
         $("<p>")

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f2c06052a6844507cb36b8fcec654da285462027..5fcbd83ab5e081d23271080659e7468a12dc4914 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -573,16 +573,6 @@ body.small-nav {
 }
 
 .share-ui {
-  .share-link {
-    input[type=text],
-    textarea {
-      width: 100%;
-      font-family: monospace;
-      font-size: small;
-      line-height: 1.3;
-    }
-  }
-
   #mapnik_scale {
     width: 100px;
   }