From 2355dc228df1b77f355e187ba74ea2233b278ad4 Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Fri, 26 Apr 2013 12:17:16 -0400
Subject: [PATCH] switch from preset grid to preset list

issue #1225
---
 css/app.css             | 60 +++++++++++++++++------------------------
 js/id/ui/preset_grid.js |  9 +++----
 2 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/css/app.css b/css/app.css
index 02b0431f8..5e5c6bf96 100644
--- a/css/app.css
+++ b/css/app.css
@@ -685,7 +685,7 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 
 .grid-button-wrap {
     padding: 0 10px 10px 0;
-    height: 120px;
+    height: 70px;
 }
 
 .grid-entry {
@@ -693,7 +693,6 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     height: 100%;
     position: relative;
     border: 1px solid #ccc;
-    overflow: hidden;
     float: left;
 }
 
@@ -707,16 +706,13 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 
 .preset-icon {
     position: absolute;
-    top: 30px;
-    left: 0;
-    right: 0;
+    top: 18px;
+    left: 18px;
     margin: auto;
 }
 
 .preset-icon-line {
-    top: 15px;
-    left: -10px;
-    right: -10px;
+    top: 0; left: 0;
 }
 
 .grid-entry .label {
@@ -724,23 +720,28 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     text-align: left;
     position: absolute;
     padding: 5px 10px;
-    height: 30px;
+    height: 100%;
     bottom: 0;
-    left: 0; right: 0;
+    left: 60px;
+    right: 0;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    border-top: 1px solid rgba(0, 0, 0, .1);
+    border-left: 1px solid rgba(0, 0, 0, .1);
+    line-height: 50px;
     }
 
+.grid-entry:hover .label {
+    background: none;
+}
+
 .grid-button-wrap button.tag-reference-button {
     float: right;
     position: static;
-    margin-top: -30px;
-    margin-right: 1px;
-    height: 29px;
-    border-left: 1px solid #CCC;
-    border-radius: 0 0 3px 0;
+    margin-top: -60px;
+    height: 100%;
+    border: 1px solid #CCC;
+    border-radius: 0 3px 3px 0;
 }
 
 .current .grid-entry,
@@ -752,15 +753,16 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 .category .grid-entry:before {
     content: "";
     position: absolute;
-    top: 7px;
-    left: 0; right: 0;
-    border-top: 1px solid #ccc;
-    border-radius: 6px;
+    top: -5px;
+    left: -1px; right: -1px;
+    border: 1px solid #ccc;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
     height: 6px;
 }
 
 .category .grid-entry:before {
-    top: 3px;
+    top: -3px;
 }
 
 .preset-grid-search-wrap .icon {
@@ -807,21 +809,9 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     border-bottom-color: #CCC;
     width: 0;
     height: 0;
-    margin-left: 33.3333%;
-    margin-left: -webkit-calc(16.6666% - 10px);
-    margin-left: calc(16.6666% - 10px);
-    margin-top: -10px;
-}
-.subgrid.arrow-1 .arrow {
     margin-left: 50%;
     margin-left: -webkit-calc(50% - 10px);
-    margin-left: calc(50% - 10px);
-}
-
-.subgrid.arrow-2 .arrow {
-    margin-left: 280px;
-    margin-left: -webkit-calc(84.4444% - 10px);
-    margin-left: calc(84.4444% - 10px);
+    margin-top: -10px;
 }
 
 .show-more {
@@ -847,7 +837,7 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     width: 45px;
     margin: auto;
     position: absolute;
-    left: 0; right: 0; top: 19px;
+    left: 8px; top: 7px;
     background:transparent url(img/sprite.svg) no-repeat -240px -80px;
 }
 
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index ca6218bd5..5f186219d 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -164,14 +164,13 @@ iD.ui.PresetGrid = function(context, entity) {
                 if (d === entity) index = i;
             });
 
-            var insertIndex = index + 3 - index % 3;
-            if (insertIndex > shownIndex) insertIndex ++;
+            if (index > shownIndex) index++;
 
             var elem = document.createElement('div');
-            grid.node().insertBefore(elem, grid.node().childNodes[insertIndex]);
+            grid.node().insertBefore(elem, grid.node().childNodes[index + 1]);
 
             var newbox = d3.select(elem)
-                .attr('class', 'col12 box-insert ' + klass + ' arrow-' + (index % 3))
+                .attr('class', 'col12 box-insert ' + klass + ' arrow')
                 .datum(entity);
 
             return newbox;
@@ -214,7 +213,7 @@ iD.ui.PresetGrid = function(context, entity) {
 
             var entered = entries.enter()
                 .append('div')
-                .attr('class','grid-button-wrap col4 grid-entry-wrap')
+                .attr('class','grid-button-wrap col12 grid-entry-wrap')
                 .classed('category', function(d) { return !!d.members; })
                 .classed('current', function(d) { return d === preset; });