revisions to the preset form layout.

css/app.css

@@ -593,6 +593,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     overflow: hidden;
     position: absolute;
     right: 0;
+    top: 0;
 }
 
 .modal > button {
@@ -641,16 +642,9 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     position: relative;
 }
 
-.inspector-wrap .header button.preset-reset {
-    width: 60px;
-}
-
 .inspector-wrap .header button.preset-reset > div {
     height: 100%;
     padding: 20px 0;
-    -webkit-transition: opacity 200ms;
-       -moz-transition: opacity 200ms;
-            transition: opacity 200ms;
 }
 
 .inspector-wrap .header button.preset-reset .col12:last-child {
@@ -672,12 +666,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     padding: 0;
 }
 
-.pane:last-child .header h3 {
-    position: absolute;
-    left: 60px;
-    right: 0px;
-}
-
 .inspector-toggle {
     color:#fff;
     width: 100%;
@@ -817,23 +805,24 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .subgrid {
-    width: -webkit-calc(100% - 10px);
+    width: -webkit-calc(100% + 10px);
     width: calc(100% - 10px);
+    width: 100%;
+    margin-left: -10px;
     overflow: hidden;
 }
 
 .subgrid .preset-grid {
-    background: #eee;
     padding: 10px 0px 0px 10px;
+    border: 1px solid #CCC;
     margin-top: 0px;
-    border: 0;
     border-radius: 4px;
 }
 
 .subgrid .arrow {
     border: solid rgba(0, 0, 0, 0);
     border-width: 10px;
-    border-bottom-color: #eee;
+    border-bottom-color: #CCC;
     width: 0;
     height: 0;
     margin-left: 33.3333%;
@@ -903,24 +892,49 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
 /* preset form basics */
 
-.preset-field.inspector-inner {
+.tag-wrap .preset-icon-wrap {
+    border-bottom: 1px solid #CCC;
+}
+
+.tag-wrap .preset-icon-wrap::after { 
+    content: "";
+    position: absolute;
+    height: 0;
+    width: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    border: solid rgba(0, 0, 0, 0);
+    border-width: 10px;
+    border-bottom-color: #CCC;
+}
+
+.tag-wrap .preset-icon-wrap div { 
+    height: 90px;
+    width: 33.3333%;
+    margin: auto;
+    border-radius: 4px;
+    border: 1px solid #CCC;
+    position: relative;
+}
+
+.tag-wrap .preset-icon-wrap .preset-icon { 
+    position: absolute;
+    top: 30px;
+    left: 0px;
+    right: 0px;
+    margin: auto;
+}
+
+.tag-wrap .preset-icon-wrap .preset-icon.line { 
+    top: 15px;
+}
+
+.preset-field.inspector-inner { 
     padding-bottom: 0;
 }
 
-.tag-wrap .grid-button-wrap {
-    padding: 0;
-    height: 110px;
-}
-
-.tag-wrap .grid-button-wrap .grid-entry {
-    border-top: 0;
-    background: #eef0ff;
-}
-
-.tag-wrap .grid-button-wrap .grid-entry .label {
-    background: #eef0ff;
-}
-
 .preset-field .modified-icon {
     opacity: 0.2;
     display: none;
@@ -997,7 +1011,7 @@ input[type=number] {
 
 .spin-control {
     width: 60px;
-    height: 30px;
+    height: 29px;
     border-left: 1px solid #CCC;
     display: inline-block;
     margin-left: -60px;

data/core.yaml

@@ -107,7 +107,7 @@ en:
   nothing_to_redo: Nothing to redo.
   just_edited: "You just edited OpenStreetMap!"
   browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map."
-  view_on_osm: View on OSM
+  view_on_osm: "View on OSM →""
   zoom_in_edit: zoom in to edit the map
   logout: logout
   report_a_bug: report a bug

data/locales.js

@@ -139,7 +139,7 @@ locale.en = {
     "nothing_to_redo": "Nothing to redo.",
     "just_edited": "You just edited OpenStreetMap!",
     "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.",
-    "view_on_osm": "View on OSM",
+    "view_on_osm": "View on OSM →",
     "zoom_in_edit": "zoom in to edit the map",
     "logout": "logout",
     "report_a_bug": "report a bug",

js/id/ui/preset_grid.js

@@ -15,7 +15,7 @@ iD.ui.PresetGrid = function(context, entity) {
             .attr('class', 'header fillL cf');
 
         var message = messagewrap.append('h3')
-            .attr('class', 'inspector-inner fl')
+            .attr('class', 'inspector-inner')
             .text(t('inspector.choose'));
 
         if (preset) {
@@ -115,7 +115,7 @@ iD.ui.PresetGrid = function(context, entity) {
                         .attr('class', 'arrow');
 
                     subgrid.append('div')
-                        .attr('class', 'preset-grid fillL cf fl')
+                        .attr('class', 'preset-grid fillL2 cf fl')
                         .data([d.members.collection])
                         .call(drawGrid, 1000);
 

js/id/ui/tag_editor.js

@@ -26,26 +26,18 @@ iD.ui.TagEditor = function(context, entity) {
         var messagewrap = selection.append('div')
             .attr('class', 'header fillL cf');
 
-        var back = messagewrap.append('button')
-            .attr('class', 'preset-reset fl ' + geometry)
+        messagewrap.append('button')
+            .attr('class', 'preset-reset fl ')
             .on('click', function() {
                 event.choose(preset);
-            });
-
-        var icon = preset.icon || (geometry === 'line' ? 'other-line' : 'marker-stroked');
-
-        back.append('div')
-            .attr('class', 'col12')
-            .append('span')
-            .attr('class', 'preset-icon icon feature-' + icon);
-
-        back.append('div')
-            .attr('class', 'col12')
+            })
             .append('span')
             .attr('class', 'icon back');
 
+        var icon = preset.icon || (geometry === 'line' ? 'other-line' : 'marker-stroked');
+
         messagewrap.append('h3')
-            .attr('class', 'inspector-inner fl')
+            .attr('class', 'inspector-inner')
             .text(t('inspector.editing_feature', { feature: preset.name() }));
 
         messagewrap.append('button')
@@ -57,6 +49,13 @@ iD.ui.TagEditor = function(context, entity) {
         var editorwrap = selection.append('div')
             .attr('class', 'tag-wrap inspector-body fillL2 inspector-body-' + geometry);
 
+        editorwrap.append('div')
+            .attr('class', 'col12 inspector-inner fillL2 preset-icon-wrap')
+            .append('div')
+                .attr('class','fillL')
+                .append('span')
+                    .attr('class', geometry + ' preset-icon icon feature-' + icon);
+
         presetUI = iD.ui.preset(context, entity)
             .preset(preset)
             .on('change', changeTags)