From 6b31e389ae0542d4c580afcbcbe5d8ff4375eee4 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 19 Mar 2013 13:48:17 -0400
Subject: [PATCH] smoother inspect animation.

---
 css/app.css             | 11 ++++-------
 js/id/ui/preset_grid.js | 11 ++++++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/css/app.css b/css/app.css
index 9d19274ef..d6ded1e0c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -734,10 +734,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .preset-inspect {
-  position: relative;
   background: white;
-  padding-top: 10px;
-  padding-bottom: 20px;
 }
 
 .grid-entry > .icon {
@@ -767,12 +764,12 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .current .grid-entry,
-.current .grid-entry .label { 
+.current .grid-entry .label {
     background-color: #eef0ff;
 }
 
 .category .grid-entry:after,
-.category .grid-entry:before { 
+.category .grid-entry:before {
     content: "";
     position: absolute;
     top: 7px;
@@ -782,7 +779,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     height: 6px;
 }
 
-.category .grid-entry:before { 
+.category .grid-entry:before {
     top: 3px;
 }
 
@@ -882,7 +879,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
 .tag-wrap .grid-button-wrap .grid-entry .label {
     background: #eef0ff;
-   } 
+   }
 
 .inspector-body .name {
     height: 110px;
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index b6e2e6d25..491d3cc74 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -182,9 +182,13 @@ iD.ui.PresetGrid = function(context, entity) {
 
                 presetinspect
                     .style('max-height', '0px')
+                    .style('padding-top', '0px')
+                    .style('padding-bottom', '0px')
                     .transition()
-                    .duration(200)
-                    .style('max-height', '400px');
+                    .duration(400)
+                    .style('padding-top', '10px')
+                    .style('padding-bottom', '20px')
+                    .style('max-height', '200px');
 
                 presetinspect.append('h2')
                     .text(d.name());
@@ -217,7 +221,8 @@ iD.ui.PresetGrid = function(context, entity) {
                 presetinspect.selectAll('*')
                     .style('opacity','0')
                     .transition()
-                    .duration(400)
+                    .delay(200)
+                    .duration(200)
                     .style('opacity','1');
             }