Merge pull request #3694 from AntonKhorev/share-button-group

Use Bootstrap button group for share tabs

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index e941a70f41ae2a492e522b7c689dbfa4557244bf..b9c48f15a8a3227208da6466fb247a54cf19b547 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -35,26 +35,25 @@ L.OSM.share = function (options) {
               .bind("change", toggleMarker))
           .append(I18n.t("javascripts.share.include_marker")));
 
-    $("<div>")
-      .attr("class", "share-tabs")
+    $("<div class='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")))
       .on("click", "a", function (e) {
         e.preventDefault();
         var id = "#" + $(this).attr("for");
-        $linkSection.find(".share-tabs a")
+        $(this).siblings("a")
           .removeClass("active");
         $(this).addClass("active");
         $linkSection.find(".share-tab")

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 312f7ca24166e3da48ffa2c3ae017102d6954097..27458c6efb428093bc69f58d9e02cf31ed5835e3 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -592,31 +592,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;
   }