From 44fdf7040909609427e690928038903749923e64 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 26 Mar 2013 14:04:18 -0400
Subject: [PATCH] better styles for ref links on grid view.

---
 css/app.css             | 36 +++++++++++++-----------------------
 js/id/ui/preset_grid.js |  8 ++++----
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/css/app.css b/css/app.css
index b469ee8e3..b92a39426 100644
--- a/css/app.css
+++ b/css/app.css
@@ -724,19 +724,28 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .grid-entry .label {
-    font-weight: bold;
     background: #f6f6f6;
-    text-align: center;
-    display: block;
+    text-align: left;
     position: absolute;
     padding: 5px;
     bottom: 0;
     left: 0; right: 0;
-    margin: auto;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     border-top: 1px solid rgba(0, 0, 0, .1);
+    padding-right: 20px;
+    }
+
+.grid-entry .tag-reference-button {
+    opacity: .5;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 29px;
+    border-left: 1px solid #CCC;
+    border-radius: 0 0 3px 0;
 }
 
 .current .grid-entry,
@@ -839,25 +848,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     color: #222;
 }
 
-.grid-entry:hover .tag-reference-button {
-    opacity: 1;
-    border-radius: 0;
-}
-
-.grid-entry .tag-reference-button {
-    opacity: 0;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 20px;
-    height: 30px;
-    background: rgba(0,0,0,.5);
-}
-
-.grid-entry .tag-reference-button:hover {
-    background: rgba(0,0,0,.9);
-}
-
 /* Preset icon colors */
 
 .inspector-body-line .icon.feature-marker-stroked {
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 41e8330fb..bc057d8bc 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -258,17 +258,17 @@ iD.ui.PresetGrid = function(context, entity) {
                     return 'feature-' + (d.icon || fallbackIcon) + ' icon';
                 });
 
-            entered.append('span')
+            var label = entered.append('div')
                 .attr('class','label')
                 .text(name);
 
-            entered.filter(function(d) { return !d.members; })
+            label.filter(function(d) { return !d.members; })
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', 'tag-reference-button')
+                .attr('class', 'tag-reference-button fr')
                 .on('click', helpClick, selection)
                 .append('span')
-                    .attr('class', 'icon inspect light');
+                    .attr('class', 'icon inspect');
 
             entries.order();
         }