From 7da3ef791f479721bb33f022194548aaa7c4f63b Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 12 Feb 2013 19:17:00 -0500
Subject: [PATCH] style and layout refinements to layer switcher.

---
 css/app.css               | 23 +++++++++--------------
 js/id/ui/layerswitcher.js | 13 +++++++------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/css/app.css b/css/app.css
index 29f5b82b5..3593628d7 100644
--- a/css/app.css
+++ b/css/app.css
@@ -225,7 +225,7 @@ ul.link-list li:last-child {
 
 .fillD {
     background:rgba(0,0,0,.8);
-    color: #a9a9a9;
+    color: #6C6C6C;
 }
 
 
@@ -660,10 +660,11 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .map-overlay {
-    width: 150px;
-    position:absolute;
-    left:40px;
-    top:0;
+    right: 75%;
+    max-width: 260px;
+    min-width: 210px;
+    position: fixed;
+    left: 40px;
     display: block;
     border-radius: 4px;
 }
@@ -689,10 +690,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     top:190px;
 }
 
-.layerswitcher-control .map-overlay {
-    width:250px;
-}
-
 .nudge-container {
     margin-top: 10px;
 }
@@ -702,10 +699,8 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     font-size:10px;
     padding:0 5px 3px 5px;
     background: white;
-    border:0;
     text-transform: uppercase;
     font-weight: bold;
-
 }
 
 .layerswitcher-control .adjustments button:hover {
@@ -742,9 +737,9 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .layerswitcher-control .nudge {
     text-indent: -9999px;
     overflow: hidden;
-    width:20px;
+    width:16.6666%;
     border-radius: 0;
-    margin-right:1px;
+    border-right: 1px solid rgba(0, 0, 0, .5);
     position: relative;
 }
 
@@ -787,7 +782,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .layerswitcher-control .reset {
-    width: 45px;
+    width: 33.3333%;
     border-radius: 0 4px 4px 0;
 }
 
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 9ae4f3fbe..312605f54 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -133,7 +133,7 @@ iD.ui.layerswitcher = function(context) {
                     return d.data.name;
                 });
             layerLinks.exit().remove();
-            layerLinks.enter()
+            var LayerInner = layerLinks.enter()
                 .append('li')
                 .append('a')
                     .attr('data-original-title', function(d) {
@@ -141,18 +141,19 @@ iD.ui.layerswitcher = function(context) {
                     })
                     .attr('href', '#')
                     .attr('class', 'layer')
-                    .text(function(d) {
-                        return d.data.name;
-                    })
                     .each(function(d) {
                         // only set tooltips for layers with tooltips
                         if (d.data.description) {
                             d3.select(this).call(bootstrap.tooltip().placement('right'));
                         }
                     })
-                    .on('click.set-source', clickSetSource)
-                    .insert('span')
+                    .on('click.set-source', clickSetSource);
+                    LayerInner.insert('span')
                     .attr('class','icon toggle');
+                    LayerInner.insert('span').text(function(d) {
+                        return d.data.name;
+                    });
+
             selectLayer(context.background().source());
         }