From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 19 Oct 2022 15:24:08 +0000 (+0100)
Subject: Merge pull request #3694 from AntonKhorev/share-button-group
X-Git-Tag: live~2007
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/aa78da82fe9a30dfa77e2d503701787aafc6cf55?hp=2e34b62fac7d0a9a7b03e92bdf26f691736e2954

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 e941a70f4..b9c48f15a 100644
--- 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 312f7ca24..27458c6ef 100644
--- 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;
   }