From: Tom MacWright <tom@macwright.org>
Date: Thu, 13 Jun 2013 16:15:43 +0000 (-0400)
Subject: Reuse styles for map-ui panel
X-Git-Tag: live~4890^2~25
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/e96a64ca9c2ea068dd9167e074ee26c8d28744b4

Reuse styles for map-ui panel
---

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 84305a961..e91a9036f 100644
--- 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 9fe457851..cf54b2ded 100644
--- 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 9841b0651..80613a5d9 100644
--- 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 1434743d0..7efe12e0c 100644
--- 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 a6529ad00..f75cc29fe 100644
--- 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 3b017138f..1e3bcc468 100644
--- 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;