From: Andy Allan Date: Wed, 19 Oct 2022 15:24:08 +0000 (+0100) Subject: Merge pull request #3694 from AntonKhorev/share-button-group X-Git-Tag: live~1971 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/aa78da82fe9a30dfa77e2d503701787aafc6cf55?ds=inline;hp=-c Merge pull request #3694 from AntonKhorev/share-button-group Use Bootstrap button group for share tabs --- aa78da82fe9a30dfa77e2d503701787aafc6cf55 diff --combined app/assets/javascripts/leaflet.share.js index e941a70f4,e9c893115..b9c48f15a --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@@ -35,26 -35,25 +35,25 @@@ L.OSM.share = function (options) .bind("change", toggleMarker)) .append(I18n.t("javascripts.share.include_marker"))); - $("
") - .attr("class", "share-tabs") + $("
") .appendTo($form) - .append($("") - .attr("class", "active") + .append($("") + .addClass("active") .attr("for", "long_input") .attr("id", "long_link") .text(I18n.t("javascripts.share.long_link"))) - .append($("") + .append($("") .attr("for", "short_input") .attr("id", "short_link") .text(I18n.t("javascripts.share.short_link"))) - .append($("") + .append($("") .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") @@@ -92,7 -91,8 +91,7 @@@ .append( $("

") .attr("class", "text-muted") - .text(I18n.t("javascripts.share.paste_html")) - .appendTo($linkSection)); + .text(I18n.t("javascripts.share.paste_html"))); // Geo URI diff --combined app/assets/stylesheets/common.scss index 312f7ca24,2c89894ef..27458c6ef --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@@ -358,6 -358,8 +358,6 @@@ body.small-nav width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); - border-radius: 4px 0 0 4px; - margin-bottom: 10px; outline: none; &:hover, @@@ -376,18 -378,26 +376,18 @@@ background-color: $vibrant-green; } - .icon { - margin: 10px; + &-first { + border-start-start-radius: 4px; } -} -.leaflet-control .zoomin, -.control-layers .control-button { - margin-bottom: 0px; - border-radius: 4px 0 0 0; -} - -.leaflet-control .zoomout, -.control-key .control-button { - margin-bottom: 0; - border-radius: 0; -} + &-last { + border-end-start-radius: 4px; + margin-bottom: 10px; + } -.control-locate .control-button, -.control-share .control-button { - border-radius: 0 0 0 4px; + .icon { + margin: 10px; + } } /* Rules for the sidebar and main map area */ @@@ -500,6 -510,23 +500,6 @@@ border-bottom: 1px solid $grey; padding: 10px 20px; } - - a.close-button { - float: right; - padding:5px; - font-size:20px; - line-height:10px; - color:#222; - border:1px solid $grey; - } - - .tooltip { - opacity: 1; - border: 1px solid $grey; - .tooltip-arrow { - border-top-color: $grey; - } - } } } @@@ -512,13 -539,6 +512,13 @@@ height: 50%; } + #map-ui { + z-index: 9999; + width: 100%; + height: 50%; + overflow-y: scroll; + } + .overlay-sidebar { #sidebar { position: absolute; @@@ -527,10 -547,16 +527,10 @@@ overflow: hidden; } - #map { + #map, #map-ui { height: 100%; } } - - #map-ui { - z-index: 9999; - width: 100%; - overflow-y: scroll; - } } } @@@ -592,31 -618,6 +592,6 @@@ } .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; } @@@ -1081,10 -1082,6 +1056,10 @@@ tr.turn:hover [dir=rtl] .header-illustration { transform: scaleX(-1); + + h1 { + transform: scaleX(-1); + } } #content.maximised { @@@ -1122,7 -1119,7 +1097,7 @@@ min-width: 200px; p { padding: 0 0 5px 0; - margin-top: 0 0 0 60px; + margin: 0 0 0 60px; font-size: 12px; } } @@@ -1235,6 -1232,16 +1210,6 @@@ display: inline !important; } -/* Rules for the oauth settings page */ - -.oauth_clients .buttons .oauth-edit { - border-radius: 2px 0 0 2px; -} - -.oauth_clients .buttons .oauth-delete { - border-radius: 0 2px 2px 0; -} - /* Rules for the oauth authorization page */ .oauth-authorize ul { @@@ -1396,7 -1403,7 +1371,7 @@@ abbr.geo border-bottom: none; } -/* General styles for action lists / subnavs / pager navs */ +/* General styles for action lists / subnavs */ nav.secondary-actions { @@@ -1409,6 -1416,10 +1384,6 @@@ margin-bottom: 0; margin-left: -1px; padding: 0; - &.pager { - display: inline-block; - margin-right: 60px; - } > li { flex-basis: auto; list-style: none; @@@ -1425,6 -1436,60 +1400,6 @@@ div.secondary-actions text-align: center; } -.buttons { - min-width: 200px; - input[type="submit"], - input[type="button"], - input[type="reset"], - .button, - .button_to { - box-sizing: border-box; - float: left; - border-radius: 0; - margin:0; - min-width: 75px; - max-width: 180px; - border-right:1px solid white; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - input:first-child, - .button:first-child, - .button_to:first-child { - border-radius:2px 0 0 2px; - } - input:last-child, - .button:last-child, - .button_to:last-child { - border-radius:0 2px 2px 0; - border-right-width: 0; - } - input:only-child, - .button:only-child, - .button_to:only-child, - *[value="Hide"] + input:last-child, - *[value="Hide"] + .button:last-child, - *[value="Hide"] + .button_to:last-child { - border-radius:2px; - border-right-width: 0; - } - /* if a 3-button set has a hidden middle button */ - *[value="Hide"] + input:nth-child(3), - *[value="Hide"] + .button:nth-child(3), - *[value="Hide"] + .button_to:nth-child(3) { - border-radius:0 2px 2px 0; - border-right-width: 0; - } - /* if a 3-button set starts with a hidden button */ - *[value="Hide"] + input:nth-child(2):not(:last-child), - *[value="Hide"] + .button:nth-child(2):not(:last-child), - *[value="Hide"] + .button_to:nth-child(2):not(:last-child) { - border-radius:2px 0 0 2px; - border-right-width: 1px; - } -} - /* Create a single-line dl */ dl.dl-inline { @@@ -1501,6 -1566,15 +1476,6 @@@ display: block; } - .icon-list { - padding-bottom: 20px; - div { - margin-bottom: 10px; - p { - padding-top: 10px; - } - } - } .sprite.small { width: 50px; height: 50px; @@@ -1547,6 -1621,10 +1522,6 @@@ .site-about #content { background-color: $lightgrey; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; .content-inner { max-width: 760px; @@@ -1584,6 -1662,8 +1559,6 @@@ .icon { width: 30px; height: 30px; - margin-right: 10px; - vertical-align: middle; background: 40px 40px image-url('about/sprite.png') no-repeat; &.local {