[ux,query,#53][s]: make it clear that search box is for searching.

css/data-explorer.css

@@ -23,24 +23,13 @@
   height: 30px;
 }
 
-.header .recline-query-editor form {
+.header .recline-query-editor .input-prepend {
-  height: 30px;
+  margin-bottom: auto;
-  margin-bottom: 0;
 }
 
-.header .recline-query-editor label {
+.header .recline-query-editor .text-query input {
-  float: none;
-}
-
-.header .recline-query-editor label {
-  float: none;
-}
-
-.header .recline-query-editor input.text-query {
   float: left;  
-  margin-top: 1px;
   margin-right: 5px;
-  width: 200px;
 }
 
 .header .recline-query-editor .pagination input {
@@ -51,7 +40,7 @@
 }
 
 .header .recline-query-editor .pagination a {
-  line-height: 28px;
+  line-height: 26px;
 }
 
 .header .recline-query-editor form .btn {

src/view.js

@@ -197,7 +197,10 @@ my.QueryEditor = Backbone.View.extend({
   className: 'recline-query-editor', 
   template: ' \
     <form action="" method="GET" class="form-inline"> \
-      <input type="text" name="q" value="{{q}}" class="text-query" /> \
+      <div class="input-prepend text-query"> \
+        <span class="add-on"><i class="icon-search"></i></span> \
+        <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
+      </div> \
       <div class="pagination"> \
         <ul> \
           <li class="prev action-pagination-update"><a>&laquo;</a></li> \