From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 9 Jul 2013 18:33:32 +0000 (-0700)
Subject: Match the other sidebar better
X-Git-Tag: live~4854^2~12
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/5c0aeb1558a778cd5790be5e062c2df7d9b51da6?ds=sidebyside

Match the other sidebar better
---

diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index 5aae3d1c2..d12187bc2 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -14,19 +14,20 @@ L.OSM.key = function (options) {
       .appendTo($container);
 
     var $ui = $('<div>')
-      .attr('class', 'layers-ui');
+      .attr('class', 'key-ui');
 
-    $('<section>')
+    $('<header>')
+      .attr('class', 'sidebar_heading')
       .appendTo($ui)
       .append(
-          $('<a>')
-            .html('&raquo;')
-            .attr('class', 'close-button')
-            .attr('href', '#')
-            .bind('click', toggle))
+        $('<a>')
+          .text(I18n.t('javascripts.close'))
+          .attr('class', 'sidebar_close')
+          .attr('href', '#')
+          .bind('click', toggle))
       .append(
-      $('<h2>')
-        .text(I18n.t('javascripts.key.title')));
+        $('<h4>')
+          .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 2f06ab9c5..8bcbb701c 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -18,16 +18,17 @@ L.OSM.layers = function(options) {
     var $ui = $('<div>')
       .attr('class', 'layers-ui');
 
-    $('<section>')
-       .appendTo($ui)
-       .append(
-          $('<a>')
-            .html('&raquo;')
-            .attr('class', 'close-button')
-            .attr('href', '#')
-            .bind('click', toggle))
-       .append(
-        $('<h2>')
+    $('<header>')
+      .attr('class', 'sidebar_heading')
+      .appendTo($ui)
+      .append(
+        $('<a>')
+          .text(I18n.t('javascripts.close'))
+          .attr('class', 'sidebar_close')
+          .attr('href', '#')
+          .bind('click', toggle))
+      .append(
+        $('<h4>')
           .text(I18n.t('javascripts.map.layers.header')));
 
     var baseSection = $('<section>')
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 664aebaa5..a5e93a139 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -16,22 +16,23 @@ L.OSM.share = function (options) {
     var $ui = $('<div>')
       .attr('class', 'share-ui');
 
-    $('<section>')
+    $('<header>')
+      .attr('class', 'sidebar_heading')
       .appendTo($ui)
       .append(
-          $('<a>')
-            .html('&raquo;')
-            .attr('class', 'close-button')
-            .attr('href', '#')
-            .bind('click', toggle))
+        $('<a>')
+          .text(I18n.t('javascripts.close'))
+          .attr('class', 'sidebar_close')
+          .attr('href', '#')
+          .bind('click', toggle))
       .append(
-      $('<h2>')
-        .text(I18n.t('javascripts.share.title')));
+        $('<h4>')
+          .text(I18n.t('javascripts.share.title')));
 
-    var $share_link = $('<section></section>')
+    var $share_link = $('<section>')
       .appendTo($ui);
 
-    var $title = $('<h3></h3>')
+    var $title = $('<h4>')
       .text(I18n.t('javascripts.share.link'))
       .appendTo($share_link);
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index a14dec2d7..4afc71533 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -575,28 +575,21 @@ a.donate {
   width: 250px;
   height: 100%;
   background: white;
+  border-left: 1px solid #CCC;
   overflow: auto;
 }
 
 #map-ui {
   section {
-    border-top: 1px solid #868e85;
+    border-bottom: 1px solid #DDD;
     padding: 15px;
   }
 
-  section:first-child {
-    border-top:0;
-  }
-
-  h2 {
-    margin:0;
-  }
-
   a.close-button {
     float: right;
     padding:5px;
     font-size:20px;
-    line-height:15px;
+    line-height:10px;
     color:#222;
     border:1px solid #ddd;
   }
@@ -704,16 +697,6 @@ a.donate {
   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 {
@@ -728,7 +711,18 @@ a.donate {
   }
 }
 
-#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;
diff --git a/app/views/site/_sidebar.html.erb b/app/views/site/_sidebar.html.erb
index 60d057512..db5f44356 100644
--- a/app/views/site/_sidebar.html.erb
+++ b/app/views/site/_sidebar.html.erb
@@ -1,7 +1,7 @@
 <div id="sidebar">
   <div class="sidebar_heading">
     <h4 id="sidebar_title"><% t 'site.sidebar.search_results' %></h4>
-    <div id="sidebar_close"><a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a></div>
+    <a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a>
   </div>
   <div id="sidebar_content">
   </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ad7dc3a51..3daf2504d 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2037,6 +2037,7 @@ en:
       last_changed: "Last changed"
       ago_html: "%{when} ago"
   javascripts:
+    close: Close
     share:
       title: "Share"
       cancel: "Cancel"
@@ -2044,7 +2045,7 @@ en:
       short_url: "Short URL"
     key:
       title: "Map Key"
-      tooltip: "Key for the map"
+      tooltip: "Map Key"
     map:
       zoom:
         in: Zoom In