starting to work on tag reference + transitions for preset forms.

css/app.css

@@ -94,9 +94,9 @@ h5 {
 }
 
 p {
-    font-size: 15px;
+    font-size: 12px;
     margin:0;
-    padding-bottom:20px;
+    padding:0;
 }
 
 p:last-child {
@@ -309,7 +309,6 @@ a.hide {
     right: 0;
 }
 
-
 /* Buttons */
 
 button {
@@ -569,7 +568,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     border-radius: 0;
 }
 
-
 /* Header for modals / panes
 ------------------------------------------------------- */
 
@@ -707,12 +705,12 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     background: #ececec;
 }
 
-.grid-entry:hover .preset-help {
+.grid-entry:hover .tag-reference-button {
     display: block;
     border-radius: 0;
 }
 
-.grid-entry .preset-help {
+.grid-entry .tag-reference-button {
     display: none;
     position: absolute;
     bottom: 0;
@@ -722,7 +720,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     background: rgba(0,0,0,.5);
 }
 
-.grid-entry .preset-help:hover {
+.grid-entry .tag-reference-button:hover {
     background: rgba(0,0,0,.9);
 }
 
@@ -817,7 +815,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     padding: 10px 0px 0px 10px;
     border: 1px solid #CCC;
     margin-top: 0px;
-    border-radius: 4px;
+    border-radius: 8px;
 }
 
 .subgrid .arrow {
@@ -934,8 +932,9 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     top: 15px;
 }
 
-.form-field.inspector-inner { 
-    padding-bottom: 0;
+.inspector-preset .form-field { 
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .form-field .modified-icon {
@@ -1298,6 +1297,16 @@ div.combobox {
     display: none;
 }
 
+/* Tag reference */
+
+img.wiki-image { 
+    float: left;
+    max-width: 33.3333%;
+    margin-right: 20px;
+    max-height: 200px;
+    border-radius: 4px;
+}
+
 /* Map Controls */
 
 .map-control {
@@ -1561,6 +1570,11 @@ div.combobox {
     overflow-y: scroll;
 }
 
+.help-wrap p {
+    font-size: 15px;
+    margin-bottom: 20px;
+}
+
 .help-wrap .left-content .body p code {
     padding:2px 4px;
     background:#eee;

js/id/ui/preset.js

@@ -68,7 +68,7 @@ iD.ui.preset = function(context, entity) {
             .append('div')
             .style('opacity', 0)
             .attr('class', function(field) {
-                return 'form-field form-field-' + field.id + ' fillL inspector-inner col12';
+                return 'form-field form-field-' + field.id + ' fillL col12';
             });
 
         var label = sections.append('label')
@@ -102,7 +102,14 @@ iD.ui.preset = function(context, entity) {
             });
 
         sections.transition()
-            .style('opacity', 1);
+            .style('max-height', '0px')
+            .style('padding-top', '0px')
+            .style('opacity', '0')
+            .transition()
+            .duration(200)
+            .style('padding-top', '20px')
+            .style('max-height', '200px')
+            .style('opacity', '1');
 
         sections.each(function(field) {
             var i = iD.ui.preset[field.type](field, context)

js/id/ui/preset_grid.js

@@ -270,7 +270,7 @@ iD.ui.PresetGrid = function(context, entity) {
                 })
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', 'preset-help')
+                .attr('class', 'tag-reference-button')
                 .on('click', helpClick, selection)
                 .append('span')
                     .attr('class', 'icon inspect');

js/id/ui/tag_reference.js

@@ -39,7 +39,7 @@ iD.ui.TagReference = function(entity, tag) {
             }
 
             var referenceBody = selection.append('div')
-                .attr('class','modal-section fillL2');
+                .attr('class','tag-reference-wrap');
 
             if (docs.image && docs.image.thumb_url_prefix) {
                 referenceBody