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

Use Bootstrap button group for share tabs

diff --combined app/assets/javascripts/leaflet.share.js
index e941a70f41ae2a492e522b7c689dbfa4557244bf,e9c893115b0831b728fdead37e1d8fe67f465f22..b9c48f15a8a3227208da6466fb247a54cf19b547
--- 1/app/assets/javascripts/leaflet.share.js
--- 2/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")));
  
-     $("<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")
@@@ -92,7 -91,8 +91,7 @@@
        .append(
          $("<p>")
            .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 312f7ca24166e3da48ffa2c3ae017102d6954097,2c89894ef72c04af4a5b951e9432b474f882b7ef..27458c6efb428093bc69f58d9e02cf31ed5835e3
--- 1/app/assets/stylesheets/common.scss
--- 2/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 {