From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 17 Sep 2022 05:34:53 +0000 (+0300)
Subject: Use button group for share tabs
X-Git-Tag: live~1676^2~1
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/79c524832ef027a7d7e0ae62dc198e449aec150b

Use button group for share tabs
---

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index f6ab47cf2..2f422e1f9 100644
--- 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 53b561b63..2c89894ef 100644
--- 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;
   }