Reuse styles for map-ui panel

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 84305a9618af358d6c69b06f9bd942637ff8c3ff..e91a9036fd6973ce3ccbb12563b4826bd640b5aa 100644 (file)
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -123,6 +123,7 @@ function getShortUrl(map) {
 function getUrl(map) {
   var center = map.getCenter(),
       zoom = map.getZoom();
+
   return (window.location.hostname.match(/^www\.openstreetmap\.org/i) ?
           'http://openstreetmap.org/?' : '/?') +
         querystring.stringify({

diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index 9fe457851f35dad9ed907a36a1fe65bb44875e19..cf54b2ded5aa7e361a405375765b2ac2102f3df7 100644 (file)
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -16,9 +16,11 @@ L.OSM.key = function (options) {
     var $ui = $('<div>')
       .attr('class', 'layers-ui');
 
-    $('<h2>')
-      .text(I18n.t('javascripts.key.title'))
-      .appendTo($ui);
+    $('<section>')
+      .appendTo($ui)
+      .append(
+      $('<h2>')
+        .text(I18n.t('javascripts.key.title')));
 
     var $section = $('<section>')
       .appendTo($ui);

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 9841b0651f0ef93f31ba7d1e83e3b3668d375218..80613a5d937730353636a29e3f1b9d709f7985ef 100644 (file)
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -18,9 +18,11 @@ L.OSM.layers = function(options) {
     var $ui = $('<div>')
       .attr('class', 'layers-ui');
 
-    $('<h2>')
-      .text(I18n.t('javascripts.map.layers.header'))
-      .appendTo($ui);
+    $('<section>')
+       .appendTo($ui)
+       .append(
+        $('<h2>')
+          .text(I18n.t('javascripts.map.layers.header')));
 
     if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
       var overlaySection = $('<section>')

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 1434743d0e719c82d492c2e34b750d7f67a23015..7efe12e0cb5feb4c785feed14626d0a89421a7c7 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -16,11 +16,13 @@ L.OSM.share = function (options) {
     var $ui = $('<div>')
       .attr('class', 'share-ui');
 
-    $('<h2>')
-      .text(I18n.t('javascripts.share.title'))
-      .appendTo($ui);
+    $('<section>')
+      .appendTo($ui)
+      .append(
+      $('<h2>')
+        .text(I18n.t('javascripts.share.title')));
 
-    var $share_link = $('<div></div>')
+    var $share_link = $('<section></section>')
       .appendTo($ui);
 
     var $title = $('<h3></h3>')

diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index a6529ad0087d35ded17371569444fb6cfa3c2dac..f75cc29fe33f262539b1a12e53726f66cf26f5b4 100644 (file)
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -22,7 +22,7 @@ L.OSM.sidebar = function(selector) {
       current = $();
     } else {
       $(sidebar).show();
-      controlContainer.css({paddingRight: '200px'});
+      controlContainer.css({paddingRight: '250px'});
       current = pane;
     }
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 3b017138f6712b524a9d104e795f12fdd4951bb5..1e3bcc46873cf8d6c663ef900ff43a75ff1efb39 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -584,17 +584,26 @@ a.donate {
   position: absolute;
   display: none;
   right: 0;
-  width: 200px;
+  width: 250px;
   height: 100%;
   background: white;
+  overflow: auto;
 }
 
-.layers-ui {
+#map-ui {
   section {
     border-top: 1px solid #868e85;
     padding: 15px;
   }
 
+  section:first-child {
+    border-top:0;
+  }
+
+  h2 {
+    margin:0;
+  }
+
   li {
     border-radius: 4px;
     overflow: hidden;
@@ -764,7 +773,6 @@ a.donate {
 /* 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;