Spruce up search pages.

r2/r2/public/static/css/reddit.css

@@ -1833,6 +1833,8 @@ label + #moresearchinfo {
 
 .searchpane {
     margin: 5px 305px 5px 0px;
+    padding-left: 96px;
+    background: #E0E0E0 url(../search-large.png) 26px center no-repeat;
 } 
 
 .searchpane #search input[type=text] { }
@@ -1862,13 +1864,18 @@ label + #moresearchinfo {
   overflow: auto;
   font-size: small;
   white-space: pre-wrap;
+  border: 1px solid gray;
+  padding: 10px;
+  margin-top: -6px;
+  box-shadow: 0 4px 6px -1px #ccc inset;
+  background: #fefefe;
 }
 
-.searchfacets.title {
+.searchfacets .title {
   margin: 5px;
 }
 
-.searchfacets.list {
+.searchfacets .list {
   margin: 0px 0px 0px 10px;
 }
 

r2/r2/templates/searchbar.html

@@ -72,18 +72,19 @@
                  simple=thing.simple, restrict_sr=thing.restrict_sr,
                  syntax=thing.syntax)}
   </div>
-  %if thing.facets and len(thing.facets) > 1:
-  <div class="searchfacets">
-    <h4 class="searchfacets title">${_("too many results? narrow it down to a subreddit!")}</h4>
-    <ol class="searchfacets list">
-    %for facet in thing.facets:
-      <% subreddit, count = facet %>
-      <li class="searchfacet reddit">
-        <a class="facet title word" href="${search_url(thing.prev_search, subreddit, restrict_sr='on', sort=thing.sort)}">/r/${subreddit}</a>&nbsp;
-        <span class="facet count number">(${count})</span>
-      </li>&nbsp;
-    %endfor
-    </ol>
-  </div>
-  %endif
-</div>
+</div>
+
+%if thing.facets and len(thing.facets) > 1:
+<div class="searchfacets">
+  <h4 class="title">${_("too many results? narrow it down to a subreddit!")}</h4>
+  <ol class="list">
+  %for facet in thing.facets:
+    <% subreddit, count = facet %>
+    <li class="searchfacet reddit">
+      <a class="facet title word" href="${search_url(thing.prev_search, subreddit, restrict_sr='on', sort=thing.sort)}">/r/${subreddit}</a>&nbsp;
+      <span class="facet count number">(${count})</span>
+    </li>&nbsp;
+  %endfor
+  </ol>
+</div>
+%endif