UI and design tweaks

static/css/app.css

@@ -114,16 +114,29 @@
 
 #sidebar input.typeahead {
   display: none;
-  width: 160px;
+  background: #79589f;
+  width: 200px;
   height: 22px;
-  color: black;
+  color: #fff;
   font-weight: normal;
+  outline: none;
+  border: 0px none;
+}
+
+#sidebar input.typeahead::-webkit-input-placeholder {
+  color: #d6cce2;
 }
 
 #sidebar ul.typeahead {
   margin-left: 30px;
   overflow-y: auto;
   max-height: 300px;
+  z-index: 999;
+}
+
+#sidebar ul.typeahead a {
+  font-size: 13px;
+  padding: 3px 10px;
 }
 
 #sidebar div.tables-list {

static/index.html

@@ -41,7 +41,7 @@
         <div class="wrap">
           <div class="title main"> 
             <i class="fa fa-database"></i> <span class="current-database" id="current_database"></span>
-            <input class="typeahead current_database" id="database_search" type="text" placeholder="Search...">
+            <input class="typeahead current_database" id="database_search" type="text" placeholder="Search database">
             <span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
           </div>
           <div id="objects"></div>

static/js/app.js

@@ -857,6 +857,27 @@ function toggleDatabaseSearch() {
   $("#database_search").toggle();  
 }
 
+function enableDatabaseSearch(data) {
+  var input = $("#database_search");
+
+  input.typeahead("destroy");
+
+  input.typeahead({ 
+    source: data, 
+    minLength: 0, 
+    items: "all", 
+    autoSelect: false,
+    fitToElement: true
+  });
+
+  input.typeahead("lookup").focus();
+
+  input.on("focusout", function(e){
+    toggleDatabaseSearch();
+    input.off("focusout");
+  });
+}
+
 $(document).ready(function() {
   $("#table_content").on("click",     function() { showTableContent();     });
   $("#table_structure").on("click",   function() { showTableStructure();   });
@@ -1051,20 +1072,7 @@ $(document).ready(function() {
   $("#current_database").on("click", function(e) {
     apiCall("get", "/databases", {}, function(resp) {
       toggleDatabaseSearch();
-      var input = $("#database_search");
+      enableDatabaseSearch(resp);
-      input.typeahead("destroy");
-      input.typeahead({ 
-        source: resp, 
-        minLength: 0, 
-        items: "all", 
-        autoSelect: false,
-        fitToElement: true
-      });
-      input.typeahead("lookup").focus();
-      input.on("focusout", function(e){
-           toggleDatabaseSearch();
-           input.off("focusout");
-      });
     });
   });