From e329bf37c03d11eb32bed0fd0927bcbb76c316fc Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Sun, 9 Mar 2014 12:29:28 +0000
Subject: [PATCH] Improve styling of feature list

---
 app/assets/javascripts/index/query.js  |  8 +++++++-
 app/assets/stylesheets/common.css.scss | 25 +++++++++++++++++++++++--
 app/views/browse/query.html.erb        | 14 +++++++-------
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js
index 80df594c8..6b64ee8ee 100644
--- a/app/assets/javascripts/index/query.js
+++ b/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);
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index c088e9429..ab94b5dc7 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1124,11 +1124,32 @@ 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 {
-      background: #FFFFE6;
+    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;
+        }
+      }
     }
   }
 }
diff --git a/app/views/browse/query.html.erb b/app/views/browse/query.html.erb
index 62ab94efd..629d84c05 100644
--- a/app/views/browse/query.html.erb
+++ b/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>
-- 
2.43.2