Merge remote-tracking branch 'osmlab/map-ui'

diff --combined app/assets/stylesheets/common.css.scss
index 0ab8069e94fb5820443cd15a688c4690eff77643,db382bcd1bc29d10168adc0fcdbce3db11f15d29..18983242f30e4f5ce85440eb76e639b090879f7b
--- 1/app/assets/stylesheets/common.css.scss
--- 2/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@@ -141,6 -141,37 +141,37 @@@ h6:first-child 
    margin-right: $lineheight/4;
  }
  
+ /* Rules for icons */
+ 
+ .icon {
+   display:inline-block;
+   vertical-align:top;
+   width:20px;
+   height:20px;
+   background:transparent image-url("sprite.png") no-repeat 0 0;
+   text-indent:-9999px;
+   overflow:hidden;
+   }
+ 
+ .icon-pre-text {
+     margin-right: 5px;
+ }
+ 
+ .icon.search      { background-position: 0 0; }
+ .icon.donate      { background-position: -20px 0; }
+ .icon.zoomin      { background-position: -40px 0; }
+ .icon.zoomout     { background-position: -60px 0; }
+ .icon.geolocate   { background-position: -80px 0; }
+ .active .icon.geolocate   { background-position: -80px -20px; }
+ .icon.layers      { background-position: -100px 0; }
+ .icon.key         { background-position: -120px 0; }
+ .icon.share       { background-position: -140px 0; }
+ .icon.clipboard   { background-position: -160px 0; }
+ .icon.link        { background-position: -180px 0; }
+ .icon.close       { background-position: -200px 0; }
+ .icon.check       { background-position: -220px 0; }
+ .icon.note        { background-position: -240px 0; }
+ 
  /* Rules for links */
  
  a {
@@@ -307,19 -338,6 +338,6 @@@ table 
    }
  }
  
- /* Rules for SOTM advert */
- 
- #sotm {
-   width: 165px;
-   margin: $lineheight/2;
-   padding: 0px;
-   border: 0px;
-   background: #fff;
-   img {
-     width: 165px;
-   }
- }
- 
  /*
   * Rules for "optional boxes" which appear in the left sidebar on
   * certain pages. Current users are the seach box on the main page
@@@ -389,7 -407,7 +407,7 @@@
  
  /* Rules for donation request box */
  
- .donate {
+ a.donate {
    display: block;
    width: 163px;
    padding: $lineheight/4;
@@@ -406,11 -424,6 +424,6 @@@
      background: #9ed485;
      text-decoration: none;
    }
-   span {
-     margin: 0;
-     padding-left: 18px;
-     background: image-url("sprite.png") 0 -29px no-repeat;
-   }
  }
  
  /* Rules for Creative Commons logo button */
@@@ -518,27 -531,114 +531,114 @@@
  }
  
  /* Rules for Leaflet maps */
- .leaflet-control-layers-expanded {
-   padding: 10px !important;
+ 
+ .leaflet-control .control-button {
+   display: block;
+   height: 40px;
+   width: 40px;
+   background-color: white;
+   background-color: rgba(255,255,255,.8);
+   border-radius: 4px;
+   margin-bottom: 10px;
+   outline: none;
  }
  
- .leaflet-control-layers-separator {
-   margin: 5px -10px !important;
+ .leaflet-control .zoomin,
+ .control-layers .control-button {
+   margin-bottom: 0px;
+   border-radius: 4px 4px 0px 0px;
  }
  
- .leaflet-control-attribution {
-   a.disabled {
-     color: #99c9dc;
-     cursor: default;
-     text-decoration: none;
+ .site .leaflet-control .zoomout,
+ .control-key .control-button {
+   margin-bottom: 0px;
+   border-radius: 0px;
+ }
+ 
+ .leaflet-control .zoomout,
+ .control-locate .control-button,
+ .control-share .control-button {
+   border-radius: 0px 0px 4px 4px;
+ }
+ 
+ .leaflet-control .control-button:hover {
+   background-color: white;
+ }
+ 
+ .leaflet-control .control-button .icon {
+   margin: 10px;
+ }
+ 
+ /* Rules for the home page */
+ 
+ .site-export #map,
+ .site-index #map,
+ .site-edit #map {
+   height: 100%;
+   overflow: hidden;
+ }
+ 
+ #map-ui {
+   display: none;
+   position: relative;
+   float: right;
+   width: 250px;
+   height: 100%;
+   background: white;
+   border-left: 1px solid #CCC;
+   overflow: auto;
+ 
+   .section {
+     border-bottom: 1px solid #DDD;
+     padding: 15px;
    }
  
-   ul.secondary-actions {
-     float: left;
-     margin-right: $lineheight/4;
+   a.close-button {
+     float: right;
+     padding:5px;
+     font-size:20px;
+     line-height:10px;
+     color:#222;
+     border:1px solid #ddd;
+   }
+ }
  
-     &:only-child {
-       margin-right: 0px;
+ .layers-ui {
+   ul, li:last-child {
+     margin-bottom: 0;
+   }
+ 
+   li {
+     border-radius: 4px;
+     overflow: hidden;
+     margin-bottom: 10px;
+   }
+ 
+   label {
+     display: block;
+     padding: 5px 5px 5px 7px;
+     background-color: #eee;
+     cursor: pointer;
+   }
+ 
+   li.active label {
+     background-color: #ccc;
+   }
+ 
+   .base-layers {
+     .leaflet-container {
+       width: 100%;
+       height: 50px;
+       cursor: pointer;
+     }
+   }
+ }
+ 
+ .share-ui {
+   .share-link {
+     li {
+       display: inline-block;
+       width: 50%;
      }
    }
  }
@@@ -551,11 -651,6 +651,6 @@@
    }
  }
  
- .site-index #map .olControlScaleLine,
- .site-export #map .olControlScaleLine {
-   left: $lineheight/2 !important;
- }
- 
  .leaflet-popup-scrolled {
    padding-right: $lineheight;
    border-bottom: 0px !important;
@@@ -614,23 -709,11 +709,11 @@@
  
  #sidebar {
    display: none;
-   position: absolute;
+   position: relative;
+   float: left;
    overflow: auto;
-   top: 0px;
-   bottom: 0px;
-   left: 0px;
    border-right: 1px solid $keyline;
    width: 33.3333%;
-   .sidebar_heading {
-     position: relative;
-     padding: $lineheight/2 $lineheight;
-     z-index: 9999;
-     background: $offwhite;
-     border-bottom: 1px solid #ccc;
-   }
-   h4 {
-     margin: 0;
-   }
    ul {
      margin-bottom: 0;
      &:last-child {
@@@ -645,7 -728,18 +728,18 @@@
    }
  }
  
- #sidebar_close {
+ .sidebar_heading {
+   position: relative;
+   padding: $lineheight/2 $lineheight;
+   z-index: 9999;
+   background: $offwhite;
+   border-bottom: 1px solid #ccc;
+   h4 {
+     margin: 0;
+   }
+ }
+ 
+ .sidebar_close {
    position: absolute;
    height: $lineheight;
    top: 0px;
@@@ -669,7 -763,6 +763,6 @@@
  /* Rules for the map key which appears in the popout sidebar */
  
  #mapkey {
-   padding: $lineheight $lineheight 0 $lineheight;
   .mapkey-table-key img {
      display: block;
      margin-left: auto;
@@@ -876,28 -969,6 +969,6 @@@ ul.results-list li { border-bottom: 1p
    margin-bottom: $lineheight;
  }
  
- /* Rules for the home page */
- 
- .site-export #map,
- .site-index #map {
-   position: absolute;
-   top: 0px;
-   bottom: 0px;
-   left: 0px;
-   right: 0px;
- }
- 
- /* Rules for the edit page */
- 
- .site-edit #map {
-   position: absolute;
-   top: 0px;
-   bottom: 0px;
-   left: 0px;
-   right: 0px;
-   overflow: hidden;
- }
- 
  /* Rules for the changeset list shown by the history tab etc */
  
  #changeset_list {
@@@ -964,7 -1035,7 +1035,7 @@@
    h4, p {
      margin-bottom: $lineheight/4;
    }
 -  p, ul, .bbox, .geo {
 +  ul, .bbox, .geo {
      display: inline-block;
      vertical-align: top;
      max-width: 65%;
@@@ -974,7 -1045,6 +1045,7 @@@
      margin-bottom: 0;
    }
    h4 {
 +    float: left;
      width: 33.3333%;
      display: inline-block;
      vertical-align: top;
@@@ -1162,7 -1232,7 +1233,7 @@@
    }
    h1, h2 {
      font-size: 21px;
-     line-height: 1;
+     line-height: 1em;
    }
    small.deemphasize {
      float: left;
@@@ -1883,11 -1953,11 +1954,11 @@@ a.button 
  
  /* Rules for the notes interface */
  
- .note {
+ .leaflet-popup-content .note {
    padding-top: $lineheight/2;
  }
  
- .note {
+ .leaflet-popup-content .note {
    h2 {
      margin-bottom: $lineheight/2;
    }