basic pass on grid styles.

css/app.css

@@ -30,9 +30,7 @@ div, textarea, input, form, span, ul, li, ol, a, button {
     box-sizing: border-box;
 }
 
-/* Mobile Tweaks
-------------------------------------------------------- */
-a, button, input, textarea {
+a, button, input, textarea, .preset-grid .grid-inner {
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     -webkit-touch-callout:none;
     cursor:url(../img/cursor-pointer.png) 6 1, auto;
@@ -95,6 +93,33 @@ a:hover {
     color:#597be7;
 }
 
+/* Forms
+------------------------------------------------------- */
+
+input[type=text] {
+    padding:5px 10px;
+    height:30px;
+    resize: none;
+}
+
+.fillD textarea,
+.fillD input[type=text] {
+    background-color: black;
+    border:1px solid rgba(255, 255, 255, .25);
+    color: white;
+}
+
+.fillD textarea:focus,
+.fillD input[type=text]:focus {
+    background-color: black;
+    border:1px solid rgba(255, 255, 255, .5);
+}
+
+.fillL textarea,
+.fillL input[type=text],
+.fillL input[type=url],
+.fillL input[type=tel],
+.fillL input[type=email],
 textarea,
 input[type=text],
 input[type=url],
@@ -106,30 +131,13 @@ input[type=email] {
     resize: vertical;
 }
 
-.fillD textarea,
-.fillD input[type=text] {
-    background-color: black;
-    border:1px solid rgba(255, 255, 255, .25);
-    color: white;
-}
-
+.fillL textarea:focus,
+.fillL input[type=text]:focus,
 textarea:focus,
 input[type=text]:focus {
     background-color: #ececec;
 }
 
-.fillD textarea:focus,
-.fillD input[type=text]:focus {
-    background-color: black;
-    border:1px solid rgba(255, 255, 255, .5);
-}
-
-input[type=text] {
-    padding:5px 10px;
-    height:30px;
-    resize: none;
-}
-
 /* tables */
 
 table {
@@ -513,6 +521,8 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     opacity:0;
     display:none;
     max-width: 500px;
+    height: 100%;
+    position: relative;
 }
 
 .inspector {
@@ -526,10 +536,12 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .inspector-inner.message {
-    padding: 20px;
     height: 60px;
+    border-bottom: 1px solid #ccc;
 }
 
+.inspector-inner.message h3 { line-height: 40px;}
+
 .inspector-inner.type {
     border: 1px solid #eee;
     z-index:1;
@@ -577,9 +589,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .inspector-body {
-    position:relative;
-    max-height: 400px;
-    overflow: auto;
 }
 
 .tag-row {
@@ -624,17 +633,17 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .tag-row button.tag-help {
     right: -30px;
 }
-.inspector-buttons {
-    border-radius: 0 0 0 10px;
+
+.inspector-actions {
     height: 60px;
 }
 
-.inspector-buttons button {
+.inspector-actions button {
     width: 20%;
     float: left;
 }
 
-.inspector-buttons .minor-buttons {
+.inspector-actions .minor-buttons {
     padding-left: 10px;
     line-height: 40px;
     width: 60%;
@@ -660,26 +669,45 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 /* temp */
 
 .preset-grid {
-  max-height:  360px;
+    overflow: auto;
 }
 
 .preset-grid .grid-entry {
-  float: left;
-  width: 100px;
-  height: 100px;
-  color: black;
-  margin: 10px;
-  text-align: center;
+    padding-bottom: 25%;
+    position: relative;
+    margin-bottom: 20px;
 }
-.preset-grid .grid-entry div {
-  width: 24px;
-  height: 24px;
-  margin-left: 20px;
-  display: block;
-  overflow: hidden;
+
+.preset-grid .grid-entry .grid-inner:hover {
+    background: #ececec;
+}
+
+.grid-entry .grid-inner {
+    position: absolute;
+    border: 1px solid #ccc;
+    left: 10px; right: 10px; top: 10px; bottom: 10px;
+    border-radius: 4px;
+}
+.preset-grid .grid-entry .icon {
+    left: 0; right: 0; top: 0; bottom: 0;
+    position: absolute;
+    display: block;
+    margin: auto;
+}
+
+.preset-grid .grid-entry .label {
+    text-align: center;
+    display: block;
+    position: absolute;
+    bottom: -15px;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .preset-grid-search-wrap {
+    border-top: 1px solid #ccc;
   padding: 20px;
 }
 

js/id/ui.js

@@ -58,7 +58,7 @@ iD.ui = function(context) {
 
         container.append('div')
             .style('display', 'none')
-            .attr('class', 'inspector-wrap fr col5');
+            .attr('class', 'inspector-wrap fr fillD col5');
 
         var about = container.append('div')
             .attr('class','col12 about-block fillD pad1');

js/id/ui/inspector.js

@@ -16,16 +16,15 @@ iD.ui.Inspector = function() {
 
         entity = selection.datum();
 
-        var iwrap = selection.append('div')
-                .attr('class','inspector content hide'),
+        var iwrap = selection
             messagewrap = iwrap.append('div')
-                .attr('class', 'message inspector-inner fillL2'),
-            message = messagewrap.append('h4');
+                .attr('class', 'message inspector-inner fillL'),
+            message = messagewrap.append('h3');
 
         inspectorbody = iwrap.append('div')
-            .attr('class', 'inspector-body'),
+            .attr('class', 'inspector-body fillL'),
         iwrap.append('div')
-            .attr('class', 'inspector-buttons pad1 fillD')
+            .attr('class', 'inspector-actions pad1 col12')
             .call(drawButtons);
 
         presetGrid = iD.ui.PresetGrid()

js/id/ui/presetgrid.js

@@ -8,13 +8,13 @@ iD.ui.PresetGrid = function() {
 
         selection.html('');
         var wrap = selection.append('div')
-            .attr('class', 'fillL');
+            .attr('class', '');
 
         var viable = presetData.match(entity);
         event.message('What kind of ' + entity.geometry(context.graph()) + ' are you adding?');
 
         var grid = wrap.append('div')
-            .attr('class', 'preset-grid')
+            .attr('class', 'preset-grid pad1')
             .call(drawGrid, filter(''));
 
         var searchwrap = wrap.append('div')
@@ -50,14 +50,16 @@ iD.ui.PresetGrid = function() {
 
         var entered = entries.enter()
             .append('div')
-            .attr('class', 'grid-entry')
+            .attr('class', 'grid-entry col3')
             .on('click', function(d) {
                 event.choose(d);
             });
 
         entered.append('div')
-            .attr('class', function(d) { return 'maki-' + d.icon + '-24'; });
-        entered.append('span').text(name);
+            .attr('class','grid-inner fillL')
+            .append('div')
+                .attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; });
+        entered.append('span').attr('class','label').text(name);
 
         entries.exit().remove();
     }

js/id/ui/tageditor.js

@@ -25,7 +25,7 @@ iD.ui.TagEditor = function() {
         selection.html('');
 
         var editorwrap = selection.append('div')
-            .attr('class', 'inspector-inner tag-wrap fillL2');
+            .attr('class', 'inspector-inner tag-wrap');
 
         var typewrap = editorwrap.append('div')
             .attr('class', 'type inspector-inner fillL')