Evolution #71: Mise en forme d'un élément

app/Resources/translations/elements.fr.yml

       will_be_in:       L'élément sera ajouté dans le groupe
   show:
     close_embed:        Cacher le lecteur
-    open_embed:         Afficher le lecteur
+    open_embed:         Afficher le lecteur
+    open_link:          Ouvrir la page
+  name:
+    who:                (envoyé par <a href="%owner_url%">%owner_name%</a>)
+    whoandgroup:        (envoyé par <a href="%owner_url%">%owner_name%</a> dans le groupe <a href="%group_url%">%group_name%</a>)
+  link:                 Ouvrir la page d'origine

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

   <ul class="elements">
     {% for element in elements %} 
       <li class="element {% if loop.index0 is even %}even{% else %}odd{% endif %}" id="element_{{ element.id }}">
-        
-        {% if element.embed %}
-          <img src="{{ asset('bundles/muzichcore/img/1324917083_player.png') }}" alt="player" />
+             
+        {% if element.getCountFavorite %}
+          <a class="favorite_link" href="{{ path('favorite_remove', { 'id': element.id, 'token': user.personalHash }) }}" >
+            <img src="{{ asset('bundles/muzichcore/img/favorite.png') }}" title="{{ 'element.favorite.remove'|trans({}, 'elements') }}" alt="{{ 'element.favorite.remove'|trans({}, 'elements') }}"/>
+          </a>
         {% else %}
-          <img src="{{ asset('bundles/muzichcore/img/1324917097_link.png') }}" alt="link" />
+          <a class="favorite_link" href="{{ path('favorite_add', { 'id': element.id, 'token': user.personalHash }) }}" >
+            <img src="{{ asset('bundles/muzichcore/img/favorite_bw.png') }}" title="{{ 'element.favorite.add'|trans({}, 'elements') }}" alt="{{ 'element.favorite.add'|trans({}, 'elements') }}" />
+          </a>
         {% endif %}
         
-        {% if element.group %}
-          <b class="element_group">
-            (<a href="{{ path('show_group', {'slug': element.group.slug}) }}">{{ element.group.name }}</a>)
-          </b>
-        {% endif %}
-          
         <span class="element_name">
           {{ element.name }}
         </span> 
         
-        <span class="element_author">
-          (<a href="{{ path('show_user', {'slug': element.owner.slug}) }}">{{ element.owner.name }}</a>)
-        </span>
-        
-        <a class="element_link" href="{{ element.url }}" target="_blank">link</a>
-                  
-          {% if element.getCountFavorite %}
-            | <a href="{{ path('favorite_remove', { 'id': element.id, 'token': user.personalHash }) }}" >
-              <img src="{{ asset('bundles/muzichcore/img/favorite.png') }}" title="{{ 'element.favorite.remove'|trans({}, 'elements') }}" alt="{{ 'element.favorite.remove'|trans({}, 'elements') }}"/>
-            </a>
+        {% autoescape false %}
+          {% if element.group %}
+            {{ 'element.name.whoandgroup'|trans({
+              '%owner_url%'  : path('show_user', {'slug': element.owner.slug}),
+              '%owner_name%' : element.owner.name,
+              '%group_url%'  : path('show_group', {'slug': element.group.slug}),
+              '%group_name%' : element.group.name
+            }, 'elements') }}
           {% else %}
-            | <a href="{{ path('favorite_add', { 'id': element.id, 'token': user.personalHash }) }}" >
-              <img src="{{ asset('bundles/muzichcore/img/favorite_bw.png') }}" title="{{ 'element.favorite.add'|trans({}, 'elements') }}" alt="{{ 'element.favorite.add'|trans({}, 'elements') }}" />
-            </a>
+            {{ 'element.name.who'|trans({
+              '%owner_url%'  : path('show_user', {'slug': element.owner.slug}),
+              '%owner_name%' : element.owner.name
+            }, 'elements') }}
           {% endif %}
+        {% endautoescape %}
+        
+        
+        <a title="{{ 'element.link'|trans({}, 'elements') }}" class="element_link" href="{{ element.url }}" target="_blank">
+          <img src="{{ asset('bundles/muzichcore/img/1324917097_link.png') }}" alt="link" />
+        </a>
           
+        {% if element.embed %}
+          {% autoescape false %}
+            <div id="embed_{{ element.id }}" class="element_embed" style="display: none;">
+              {{ element.embed }}
+            </div>
+          {% endautoescape %}
+        {% endif %}
+        
+        <div>
+
           {% if element.embed %}
-            {% autoescape false %}
-              <div id="embed_{{ element.id }}" class="element_embed" style="display: none;">
-                {{ element.embed }}
-              </div>
-            {% endautoescape %}
+            <a href="#" class="element_open element_embed_close_link" style="display: none;">
+              {{ 'element.show.close_embed'|trans({}, 'elements') }}
+            </a>
+            <a href="#" class="element_open element_embed_open_link">
+              {{ 'element.show.open_embed'|trans({}, 'elements') }}
+            </a>
+          {% else %}
+            <a href="{{ element.url }}" class="element_open" target="_blank">
+              {{ 'element.show.open_link'|trans({}, 'elements') }}
+            </a>
           {% endif %}
-          
+        
+          {% if element.tags|length %}
           <ul class="element_tags">
             {% for tag in element.tags %} 
               <li class="element_tag">
               </li>
             {% endfor %} 
           </ul>
-            
-          {% if element.embed %}
-          <a href="#" class="element_embed_close_link" style="display: none;">
-            {{ 'element.show.close_embed'|trans({}, 'elements') }}
-          </a>
-          <a href="#" class="element_embed_open_link">
-            {{ 'element.show.open_embed'|trans({}, 'elements') }}
-          </a>
+          {% else %}
+          <br />
           {% endif %}
+          
+        </div>
 
       </li>
     {% endfor %} 

web/bundles/muzichcore/css/main.css

 {
   margin-top: 5px;
   margin-bottom: 5px;
+  padding: 5px;
+}
+
+li.element a.favorite_link
+{
+  float: right;
+}
+
+li.element a.element_open
+{
+  float: right;
+  font-weight: bold;
+}
+
+li.element div.element_embed
+{
+  text-align: center;
 }
 
 ul.elements li.even
   float: right;
   margin-top: 36px;
   margin-left: 5px;
+}
+
+.element_name
+{
+  font-weight: bold;
 }

web/bundles/muzichcore/js/muzich.js

   
    // Affichage un/des embed
    $('a.element_embed_open_link').click(function(){
-     $(this).parent('li.element').find('a.element_embed_open_link').hide();
-     $(this).parent('li.element').find('a.element_embed_close_link').show();
-     $(this).parent('li.element').find('div.element_embed').show();
+     $(this).parent().parent('li.element').find('a.element_embed_open_link').hide();
+     $(this).parent().parent('li.element').find('a.element_embed_close_link').show();
+     $(this).parent().parent('li.element').find('div.element_embed').show();
      return false;
    });
 
    // Fermeture du embed si demandé
    $('a.element_embed_close_link').click(function(){
-     $(this).parent('li.element').find('a.element_embed_open_link').show();
-     $(this).parent('li.element').find('a.element_embed_close_link').hide();
-     $(this).parent('li.element').find('div.element_embed').hide();
+     $(this).parent().parent('li.element').find('a.element_embed_open_link').show();
+     $(this).parent().parent('li.element').find('a.element_embed_close_link').hide();
+     $(this).parent().parent('li.element').find('div.element_embed').hide();
      return false;
    });