Improve styling of feature list

diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js
index 80df594c82b0b34250a8f4a84fff2e907aa11a64..6b64ee8ee1d74bc214b03c628d5d999eb6a46f73 100644 (file)
--- 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 c088e9429d6e6cb90f87f7fe8c1aa11ebb786dd4..ab94b5dc7ba6d8ac206f152c1eb725d8263f5a1d 100644 (file)
--- 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 62ab94efd7987ebc1e6ad2fb5018dd55e3d22034..629d84c05456f1f3abcd05eef5740b2e34451147 100644 (file)
--- 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>