Use button group for share tabs

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index f6ab47cf2fb507467d5b0a06ba44f06a68d3092c..2f422e1f93cf0b4f4e84a6dde912fee5dd3fd8bb 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -35,19 +35,18 @@ L.OSM.share = function (options) {
               .bind("change", toggleMarker))
           .append(I18n.t("javascripts.share.include_marker")));
 
-    $("<div>")
-      .attr("class", "share-tabs")
+    $("<div class='share-tabs btn-group btn-group-sm mb-2'>")
       .appendTo($form)
-      .append($("<a>")
-        .attr("class", "active")
+      .append($("<a class='btn btn-primary'>")
+        .addClass("active")
         .attr("for", "long_input")
         .attr("id", "long_link")
         .text(I18n.t("javascripts.share.long_link")))
-      .append($("<a>")
+      .append($("<a class='btn btn-primary'>")
         .attr("for", "short_input")
         .attr("id", "short_link")
         .text(I18n.t("javascripts.share.short_link")))
-      .append($("<a>")
+      .append($("<a class='btn btn-primary'>")
         .attr("for", "embed_html")
         .attr("href", "#")
         .text(I18n.t("javascripts.share.embed")))

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 53b561b63638bc5e96e35b6bada8b718b3522e90..2c89894ef72c04af4a5b951e9432b474f882b7ef 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -618,31 +618,6 @@ body.small-nav {
 }
 
 .share-ui {
-  .share-tabs {
-    margin-bottom: 10px;
-
-    a {
-      color: #fff;
-      text-decoration: none;
-      background-color: $lightblue;
-      padding: 5px 10px;
-      border-right: 1px solid #fff;
-    }
-
-    a:first-child {
-      border-right: 1px solid #fff;
-      border-radius: 4px 0 0 4px;
-    }
-
-    a:last-child {
-      border-radius: 0 4px 4px 0;
-    }
-
-    a.active {
-      background-color: $blue;
-    }
-  }
-
   .share-tab {
     display: none;
   }