Evolution #79: TagsPrompt: Plus d'userFriendlyté

src/Muzich/CoreBundle/Resources/views/Tag/tagsPrompt.html.twig

@@ -16,7 +16,9 @@
    <input class="tags_prompt_list" id="tags_prompt_list_{{ form_name }}" name="tags" value=""> 
    <div id="search_tag_{{ form_name }}" class="search_tag_list" style="display: none;">
      <span class="info"></span>
-     <img id="tag_loader_{{ form_name }}" class="tag_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
+     <div class="tag_loader_div">
+       <img id="tag_loader_{{ form_name }}" class="tag_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
+     </div>
      <ul class="search_tag_list"></ul>
      <a class="more" href="#" style="display: none;">Afficher les autres tags correspondant a la recherche</a>
    </div>

web/bundles/muzichcore/css/main.css

@@ -503,11 +503,15 @@ ul.tagbox input[type="text"]:FOCUS
   );
 }
 
+div.tag_loader_div
+{
+  text-align: center;
+}
+
 .tag_loader
 {
-  float: right;
-  margin-top: 36px;
-  margin-left: 5px;
+  margin-left: auto;
+  marin-right: auto;
 }
 
 .element_name
@@ -527,17 +531,52 @@ div.search_tag_list
 {
   position: absolute;  
   background-color: white;
+  width: 400px;
+  padding: 2px;
   
+  border: 0px solid #d5d5d5;
+  border-radius: 7px;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  
+  -webkit-box-shadow: #666 0px 2px 3px;
+  -moz-box-shadow: #666 0px 2px 3px;
+  box-shadow: #666 0px 2px 3px;
+}
+
+div.search_tag_list span.info
+{
+  background-color: white;
+  padding: 2px;
 }
 
 div.search_tag_list ul.search_tag_list
 {
-  
-  
+  list-style-image: none;
+  padding:0;
+  margin:0;
+  list-style-type:none;
+  overflow: hidden;
 }
 
 div.search_tag_list ul.search_tag_list li
 {
-  
-  
-}
+  float: left;
+  margin-right: 4px;
+  margin-left: 4px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  padding: 2px;
+  background-color: #d9f7ff;
+}
+
+div.search_tag_list ul.search_tag_list li:hover
+{
+  background-color: #74dffe;
+}
+
+#container ul.search_tag_list li a
+{
+  color: black;
+}
+