From 5c1bba526723777c0a1cb767cce4e18e0bf2d55d Mon Sep 17 00:00:00 2001
From: Caio SBA <caiosba@gmail.com>
Date: Sun, 19 Apr 2015 18:24:13 -0300
Subject: [PATCH] Style of auto-complete search field

---
 index.html                |  4 +++-
 js/main.js                |  3 ++-
 sass/_proposal_group.scss | 32 ++++++++++++++++++++++++++++++--
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index bf8d1fe..f686c05 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,9 @@
 
       <div id="proposal-group" class='hide'>
         <label for="search">Selecione um programa para fazer propostas e contar sua experiência. </label>
-        <input placeholder="palavra chave" id="search-input" type="text" />
+        <div id="search-input-container">
+          <input placeholder="palavra chave" id="search-input" type="text" />
+        </div>
         <ul>
           {{#list_proposal article.children}}
             {{#link title id}}{{/link}}
diff --git a/js/main.js b/js/main.js
index b4e4448..1f19121 100644
--- a/js/main.js
+++ b/js/main.js
@@ -102,7 +102,8 @@ $.getJSON(noosferoAPI)
     });
     $( "#search-input" ).autocomplete({
       source: availableTags,
-      select: function( event, ui ) { display_proposal(ui.item['value' ].replace('#','')); }
+      select: function( event, ui ) { display_proposal(ui.item['value' ].replace('#','')); },
+      appendTo: '#search-input-container'
     });
 
 
diff --git a/sass/_proposal_group.scss b/sass/_proposal_group.scss
index 908e158..bf30bec 100644
--- a/sass/_proposal_group.scss
+++ b/sass/_proposal_group.scss
@@ -5,15 +5,43 @@
   #search-input {
     border: 1px solid #000;
     padding: 1px;
-    width: 49%;
+    width: 100%;
     font-size: 14px;
   }
 
-  label[for=search] {
+  #search-input-container, label[for=search] {
     width: 49%;
     display: inline-block;
+      height: 80px;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+
+  label[for=search] {
     text-align: right;
     font-size: 14px;
     max-width: 450px;
   }
 }
+
+.ui-autocomplete {
+  display: block;
+  padding: 0;
+  border: 1px solid #000;
+  background: #fff;
+  width: 99%;
+  overflow: auto;
+  height: 50px;
+  
+  li {
+    list-style: none;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 2px;
+    display: block !important;
+    float: none;
+    &:hover {
+      background: #eee;
+    }
+  }
+}
--
libgit2 0.21.2