From aa12a2c312b638581b7d11e3341c49b439f78307 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Thu, 14 Mar 2013 19:34:38 -0400
Subject: [PATCH] better grid styles to set myself up for better line icons.

---
 css/app.css             | 30 +++++++++++++++++++++++-------
 js/id/ui/preset_grid.js | 14 ++++++++------
 js/id/ui/tag_editor.js  | 11 +++++------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/css/app.css b/css/app.css
index b4d8e4c88..b89141da9 100644
--- a/css/app.css
+++ b/css/app.css
@@ -683,6 +683,15 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     padding-bottom: 0;
 }
 
+.tag-wrap .grid-button-wrap {
+    padding: 0;
+    height: 110px;
+}
+
+.tag-wrap .grid-button-wrap .grid-entry {
+    border-top: 0;
+}
+
 .preset-section.inspector-inner:last-of-type {
     padding-bottom: 20px;
 }
@@ -1005,7 +1014,6 @@ div.combobox {
     border-bottom-right-radius: 4px;
 }
 
-
 .tag-row input.key {
     border-left: 1px solid #ccc;
 }
@@ -1053,12 +1061,19 @@ div.combobox {
 
 /* Preset grid */
 
+.preset-grid  {
+    padding: 20px 10px 20px 20px;
+}
+.grid-button-wrap {
+    padding: 0 10px 10px 0;
+    height: 120px;
+}
+
 .grid-entry {
-    height: 110px;
+    width: 100%;
+    height: 100%;
     position: relative;
-    border-right: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    border-radius: 0;
+    border: 1px solid #ccc;
     overflow: hidden;
 }
 
@@ -1066,7 +1081,7 @@ div.combobox {
     margin-bottom: 20px;
 }
 
-.preset-grid.filtered .grid-entry:first-child {
+.preset-grid.filtered .grid-button-wrap:first-child .grid-entry {
     background: #ececec;
 }
 
@@ -1092,7 +1107,7 @@ div.combobox {
 .preset-inspect {
   position: relative;
   background: white;
-  border-bottom: 1px solid #ccc;
+  padding-bottom: 20px;
 }
 
 .grid-entry .preset-icon-fill.area {
@@ -1114,6 +1129,7 @@ div.combobox {
 
 .grid-entry .label {
     font-weight: bold;
+    background: #f6f6f6;
     text-align: center;
     display: block;
     position: absolute;
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 0d86c4620..a10a6e2ab 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -20,7 +20,7 @@ iD.ui.PresetGrid = function(context) {
             .attr('class', 'preset-grid-search-wrap inspector-inner');
 
         var grid = selection.append('div')
-            .attr('class', 'preset-grid inspector-body fillL2 inspector-body-' + entity.geometry(context.graph()))
+            .attr('class', 'preset-grid inspector-body fillL inspector-body-' + entity.geometry(context.graph()))
             .call(drawGrid, context.presets().defaults(entity, 12));
 
         searchwrap.append('span').attr('class', 'icon search');
@@ -94,9 +94,11 @@ iD.ui.PresetGrid = function(context) {
                 .data(presets.collection.slice(0, 12), name);
 
             var entered = entries.enter()
-                .append('button')
-                .attr('class', 'grid-entry col3')
-                .on('click', choose);
+                .append('div')
+                .attr('class','grid-button-wrap col3')
+                    .append('button')
+                    .attr('class', 'grid-entry')
+                    .on('click', choose);
 
             entered.append('div')
                 .attr('class', function(d) {
@@ -140,10 +142,10 @@ iD.ui.PresetGrid = function(context) {
                         if (this === entry) index = i;
                     });
 
-                    var selector = '.grid-entry:nth-child(' + (Math.floor(index/4) * 4 + 5 ) + ')';
+                    var selector = '.grid-button-wrap:nth-child(' + (Math.floor(index/4) * 4 + 5 ) + ')';
 
                     presetinspect = selection.insert('div', selector)
-                        .attr('class', 'inspector-inner preset-inspect col12')
+                        .attr('class', 'preset-inspect col12')
                         .datum(d);
 
                     presetinspect.append('h2').text(d.title || d.name);
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index 5bd6dcb6d..1fe3bc665 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -53,14 +53,13 @@ iD.ui.TagEditor = function(context) {
 
         var headerwrap = editorwrap.append('div').attr('class','col12 head');
 
-        var typewrap = headerwrap.append('div')
-            .attr('class','col3 type');
-
-        var typebutton = typewrap.append('div')
-            .attr('class','col12 grid-entry fillL');
+        var typebutton = headerwrap.append('div')
+            .attr('class','grid-button-wrap col3')
+                .append('div')
+                .attr('class','col12 grid-entry fillL');
 
         typebutton.append('div')
-            .attr('class', 'icon icon-pre-text' + (preset ?  ' preset-' + (preset.icon || 'marker-stroked') : ''));
+            .attr('class', 'icon' + (preset ?  ' preset-' + (preset.icon || 'marker-stroked') : ''));
 
         typebutton.node().focus();