design prompt playlists

app/Resources/translations/elements.fr.yml

   user_title:            Listes de lectures de %user_username%
   openplaylist:          Consulter les partages de la liste de lecture
   delete:                Supprimer cette liste de lecture
-  play:                  Jouer la liste de lecture
+  play:                  Jouer la liste de lecture
+  add_this_element:      Ajouter ce partage a une liste de lecture
+  create_and_add:        Ajouter ce partage à une nouvelle liste de lecture:
+  add_to:                Ou à une liste de lecture existante:
+  create_submit:         Ajouter
+  public_label:          Publique

src/Muzich/CoreBundle/Resources/public/css/main.css

   padding: 4px;
 }
 
-div.playlists_prompt
-{
-  padding: 10px;
-  border: 1px solid red;
-  width: 320px;
-  background-color: white;
-}
-
 ul.playlist_elements
 {
   margin-left: 0px;
   margin-top: 3px;
 }
 
+div.playlists_prompt
+{
+  padding: 10px;
+  width: 375px;
+  background-color: #F8F8F8;
+}
+
+div.playlists_prompt h2
+{
+  font-size: 1em;
+  margin-top: 7px;
+}
+
+div.playlists_prompt h2.nomargintop
+{
+  margin-top: 0px;
+}
+
+div.playlists_prompt input.niceinput
+{
+  font-size: 13px;
+  height: 23px;
+}
+
+ul.form-errors
+{
+  margin-left: 10px;
+}
+
+ul.form-errors li
+{
+  color: red;
+  list-style-type: none;
+}
+
+div.playlists_prompt ul.form-errors li
+{
+  font-size: 85%;
+}
+
 /*
 *
 *

src/Muzich/CoreBundle/Resources/public/js/muzich.js

     }
   });
   
+  $('div.playlists_prompt form').live('submit', function(){
+    $(this).parents('div.playlists_prompt').find('img.loader').show();
+  });
+  
   $('ul.elements a.add_to_playlist').live('click', function(event){
     
     $('div.playlists_prompt').remove();
-    var prompt = $('<div class="playlists_prompt"><img class="loader" src="/bundles/muzichcore/img/ajax-loader.gif" alt="loading..." /></div>');
+    var prompt = $('<div class="playlists_prompt nicebox"><img class="loader" src="/bundles/muzichcore/img/ajax-loader.gif" alt="loading..." /></div>');
     $('body').append(prompt);
     
     prompt.position({
-      my: "left+3 bottom+0",
+      my: "left+15 bottom+0",
       of: event,
       collision: "fit"
     });
       {
         prompt.append(response.data);
         prompt.find('div.create_playlist form').ajaxForm(function(response){
+          
+          $('div.playlists_prompt').find('img.loader').hide();
           window.ResponseController.execute(
             response,
             function(){},

src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig

         {% endif %}
         
         <li>
-          <a class="add_to_playlist" href="{{ path('playlists_add_element_prompt', { 'element_id' : element.id }) }}">
-            +
+          <a
+            class="add_to_playlist"
+            href="{{ path('playlists_add_element_prompt', { 'element_id' : element.id }) }}"
+            title="{{ 'playlist.add_this_element'|trans({}, 'elements') }}"
+          >
+            <img src="{{ asset('/img/icon_add_2.png') }}" alt="add to playlist" />
           </a>
         </li>
         

src/Muzich/PlaylistBundle/Resources/views/Show/form.html.twig

 
 <div class="field">
   {{ form_widget(form.name, {'attr':{'class':'niceinput'}}) }}
+  
   {{ form_widget(form.public) }}
+  <label for="playlist_public">{{ 'playlist.public_label'|trans({}, 'elements') }}</label>
+  
+  <input class="niceinput" type="submit" value="{{ 'playlist.create_submit'|trans({}, 'elements') }}" />
 </div>
 
-{{ form_rest(form) }}
 
-<input type="submit" value="CREATE" />
+{{ form_rest(form) }}

src/Muzich/PlaylistBundle/Resources/views/Show/prompt.html.twig

 
 <div class="create_playlist">
+  <h2>{{ 'playlist.create_and_add'|trans({}, 'elements') }}</h2>
   <form action="{{ path('playlist_add_element_and_create', { 'element_id' : element_id }) }}" method="post">
     {% include 'MuzichPlaylistBundle:Show:form.html.twig' %}
   </form>
 
 <div>
   {% if playlists|length %}
+    <h2 class="nomargintop">{{ 'playlist.add_to'|trans({}, 'elements') }}</h2>
     <ul class="playlists_for_element">
       {% for playlist in playlists %}
         <li class="playlist">
       {% endfor %}
     </ul>
   {% else %}
-    <p>NO PLAYLIST</p>
+    
   {% endif %}
 </div>