Improve styling of feature list

app/assets/javascripts/index/query.js

@@ -1,3 +1,5 @@
+//= require jquery.simulate
+
 OSM.Query = function(map) {
   var queryButton = $(".control-query .control-button"),
     uninterestingTags = ['source', 'source_ref', 'source:ref', 'history', 'attribution', 'created_by', 'tiger:county', 'tiger:tlid', 'tiger:upload_uuid'],
@@ -27,6 +29,11 @@ OSM.Query = function(map) {
       var geometry = $(this).data("geometry")
       if (geometry) map.removeLayer(geometry);
       $(this).removeClass("selected");
+    })
+    .on("click", ".query-results li", function (e) {
+      if (!$(e.target).is('a')) {
+        $(this).find("a").simulate("click", e);
+      }
     });
 
   function interestingFeature(feature, origin) {
@@ -159,7 +166,6 @@ OSM.Query = function(map) {
               .data("geometry", featureGeometry(element, nodes))
               .appendTo($ul);
             var $p = $("<p>")
-              .addClass("inner12 search_results_entry clearfix")
               .text(featurePrefix(element) + " ")
               .appendTo($li);
 

app/assets/stylesheets/common.css.scss

@@ -1124,12 +1124,33 @@ header .search_form {
     margin: 0 0 10px 10px;
   }
 
+  .query-intro p {
+    padding: $lineheight $lineheight $lineheight/2;
+  }
+
   .query-results {
     display: none;
 
-    ul.results-list li.selected {
+    h3 {
+      padding: $lineheight $lineheight $lineheight/2;
+      margin: 0;
+    }
+
+    ul {
+      li {
+        padding: 15px 20px;
+        border-bottom: 1px solid #ddd;
+        cursor: pointer;
+
+        &.selected {
           background: #FFFFE6;
         }
+
+        a {
+          color: #000;
+        }
+      }
+    }
   }
 }
 

app/views/browse/query.html.erb

@@ -5,18 +5,18 @@
   <%= t "browse.query.title" %>
 </h2>
 
-<div class="browse-section query-intro">
+<div class="query-intro">
   <p><%= t("browse.query.introduction") %></p>
 </div>
 
-<div id="query-nearby" class="browse-section query-results">
-  <h4><%= t("browse.query.nearby") %></h4>
+<div id="query-nearby" class="query-results">
+  <h3><%= t("browse.query.nearby") %></h3>
   <%= image_tag "searching.gif", :class => "loader" %>
-  <ul class="results-list"></ul>
+  <ul class="query-results-list"></ul>
 </div>
 
-<div id="query-isin" class="browse-section query-results">
-  <h4><%= t("browse.query.enclosing") %></h4>
+<div id="query-isin" class="query-results">
+  <h3><%= t("browse.query.enclosing") %></h3>
   <%= image_tag "searching.gif", :class => "loader" %>
-  <ul class="results-list"></ul>
+  <ul class="query-results-list"></ul>
 </div>