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

Use Bootstrap button group for share tabs
This commit is contained in:
Andy Allan 2022-10-19 16:24:08 +01:00 committed by GitHub
commit aa78da82fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 32 deletions

View file

@ -35,26 +35,25 @@ L.OSM.share = function (options) {
.bind("change", toggleMarker)) .bind("change", toggleMarker))
.append(I18n.t("javascripts.share.include_marker"))); .append(I18n.t("javascripts.share.include_marker")));
$("<div>") $("<div class='btn-group btn-group-sm mb-2'>")
.attr("class", "share-tabs")
.appendTo($form) .appendTo($form)
.append($("<a>") .append($("<a class='btn btn-primary'>")
.attr("class", "active") .addClass("active")
.attr("for", "long_input") .attr("for", "long_input")
.attr("id", "long_link") .attr("id", "long_link")
.text(I18n.t("javascripts.share.long_link"))) .text(I18n.t("javascripts.share.long_link")))
.append($("<a>") .append($("<a class='btn btn-primary'>")
.attr("for", "short_input") .attr("for", "short_input")
.attr("id", "short_link") .attr("id", "short_link")
.text(I18n.t("javascripts.share.short_link"))) .text(I18n.t("javascripts.share.short_link")))
.append($("<a>") .append($("<a class='btn btn-primary'>")
.attr("for", "embed_html") .attr("for", "embed_html")
.attr("href", "#") .attr("href", "#")
.text(I18n.t("javascripts.share.embed"))) .text(I18n.t("javascripts.share.embed")))
.on("click", "a", function (e) { .on("click", "a", function (e) {
e.preventDefault(); e.preventDefault();
var id = "#" + $(this).attr("for"); var id = "#" + $(this).attr("for");
$linkSection.find(".share-tabs a") $(this).siblings("a")
.removeClass("active"); .removeClass("active");
$(this).addClass("active"); $(this).addClass("active");
$linkSection.find(".share-tab") $linkSection.find(".share-tab")

View file

@ -592,31 +592,6 @@ body.small-nav {
} }
.share-ui { .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 { .share-tab {
display: none; display: none;
} }