Refactor the query results to use bootstrap list-group-flush

app/assets/javascripts/index/query.js

@@ -214,17 +214,15 @@ OSM.Query = function (map) {
 
           if (interestingFeature(element)) {
             var $li = $("<li>")
-              .addClass("query-result")
+              .addClass("query-result list-group-item")
               .data("geometry", featureGeometry(element))
-              .appendTo($ul);
-            var $p = $("<p>")
               .text(featurePrefix(element) + " ")
-              .appendTo($li);
+              .appendTo($ul);
 
             $("<a>")
               .attr("href", "/" + element.type + "/" + element.id)
               .text(featureName(element))
-              .appendTo($p);
+              .appendTo($li);
           }
         }
 

app/assets/stylesheets/_bootstrap-custom.scss

@@ -32,7 +32,7 @@
 @import "bootstrap/alert";
 // @import "bootstrap/progress";
 // @import "bootstrap/media";
-// @import "bootstrap/list-group";
+@import "bootstrap/list-group";
 // @import "bootstrap/close";
 // @import "bootstrap/toasts";
 // @import "bootstrap/modal";

app/assets/stylesheets/common.scss

@@ -1277,17 +1277,10 @@ tr.turn:hover {
 
   .query-results {
     display: none;
-
-    h3 {
-      padding: $lineheight $lineheight $lineheight/2;
-      margin: 0;
-    }
+    padding: 0 $lineheight $lineheight/2;
 
     ul {
       li {
-        padding: 15px 20px;
-        border-bottom: 1px solid $grey;
-
         &.query-result {
           cursor: pointer;
         }

app/views/browse/query.html.erb

@@ -12,11 +12,15 @@
 <div id="query-nearby" class="query-results">
   <h3><%= t(".nearby") %></h3>
   <%= image_tag "searching.gif", :class => "loader" %>
-  <ul class="query-results-list"></ul>
+  <div>
+    <ul class="query-results-list list-group list-group-flush"></ul>
+  </div>
 </div>
 
 <div id="query-isin" class="query-results">
   <h3><%= t(".enclosing") %></h3>
   <%= image_tag "searching.gif", :class => "loader" %>
-  <ul class="query-results-list"></ul>
+  <div>
+    <ul class="query-results-list list-group list-group-flush"></ul>
+  </div>
 </div>