--- a/src/iconolab/templates/partials/image_annotations_list.html	Mon May 22 12:11:44 2017 +0200
+++ b/src/iconolab/templates/partials/image_annotations_list.html	Mon May 22 16:17:36 2017 +0200
@@ -1,72 +1,74 @@
 {% load thumbnail %}
 {% load iconolab_tags %}
 
-<ul class="annotation-list-wrapper list-inline">
-    {% if header %}
-	<h4><strong>Annotations de l'image</strong></h4>
-    {% endif %}
+{% if header %}
+<h4><strong>Annotations de l'image</strong></h4>
+{% endif %}
 
+{% if not annotation_list %}
+<div class="alert alert-warning">Aucune annotation à afficher</div>
+{% else %}
 
-    {% if not annotation_list %}
-        <h3 class="text-center"><small>Aucune annotation à afficher</small></p>
-    {% else %}
-        <table class="table table-condensed">
-          <thead>
-            <th>Résumé</th>
-            <th>Utilisateurs</th>
-            <th>Dates</th>
-            <th>Statistiques</th>
-            {% if show_links %}
-            <th>Liens et données</th>
-            {% endif %}
-          </thead>
-          {% for annotation in annotation_list %}
-          <tr>
-            <td class="col-md-2">
-              <div class="fragment-container" style="position: relative">
-                {% thumbnail annotation.image.media "150x150" crop=False as im %}
-                  <a href="{% url 'annotation_detail' collection_name annotation.image.image_guid annotation.annotation_guid %}">
-                    <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
-                    <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
-                      <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
-                        <path d="{{ annotation.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
-                      </g>
-                    </svg>
-                  </a>
-                {% endthumbnail %}
-              </div>
-              {% if annotation.current_revision.title %}
-                <h4><small>Titre: </small>{{ annotation.current_revision.title }}</h4>
-              {% endif %}
-            </td>
-            <td class="col-md-2">
-              <b>Auteur: </b><br>
-              <a href="{% url 'user_home' annotation.author.id %}" style="color:#000000">{{ annotation.author }}</a><br>
-              <b>Contributeurs: </b><br>
-              {% for contributor in annotation.stats.contributors.all %}
-                  <a href="{% url 'user_home' contributor.id %}" style="color:#000000">{{ contributor.username }}</a>{% if not forloop.last %}, {% endif %}
-              {% endfor %}
-            <td class="col-md-2">
-              <b>Créée le:</b><br>
-              {{ annotation.created|date:'d-m-Y' }}<br>
-              <b>Révisée pour la dernière fois le:</b><br>
-              {{ annotation.current_revision.created|date:'d-m-Y' }}
-            </td>
-            <td class="col-md-3">
-                {% include "partials/annotation_stats_panel.html" with annotation=annotation %}
-            </td>
-            {% if show_links %}
-            <td class="col-md-3">
-              <b>Espace de travail</b><br>
-              <a class="btn btn-primary btn-sm" href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}" target="_blank">Suivre le lien</a><br>
-              <br><b>Permalien vers l'état actuel</b><br>
-              <a class="btn btn-primary btn-sm" href="{% url 'revision_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid annotation.current_revision.revision_guid %}" target="_blank">Suivre le lien</a><br>
-              <br><b>Permalien vers l'état dynamique</b><br>
-              <a class="btn btn-primary btn-sm" href="{% url 'annotation_readonly' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}" target="_blank">Suivre le lien</a><br>
-            </td>
-            {% endif %}
-          </tr>
-          {% endfor %}
-        </table>
+<table class="table table-condensed table-hover table-clickable" data-selector=".fragment-container > a">
+  <thead>
+    <th>Résumé</th>
+    <th>Utilisateurs</th>
+    <th>Dates</th>
+    <th>Statistiques</th>
+    {% if show_links %}
+    <th>Liens et données</th>
     {% endif %}
-</ul>
+  </thead>
+  <tbody>
+  {% for annotation in annotation_list %}
+  <tr>
+    <td>
+      <div class="fragment-container" style="position: relative">
+        {% thumbnail annotation.image.media "150x150" crop=False as im %}
+          <a href="{% url 'annotation_detail' collection_name annotation.image.image_guid annotation.annotation_guid %}">
+            <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+            <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
+              <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
+                <path d="{{ annotation.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
+              </g>
+            </svg>
+          </a>
+        {% endthumbnail %}
+      </div>
+      {% if annotation.current_revision.title %}
+        <h4><small>Titre: </small>{{ annotation.current_revision.title }}</h4>
+      {% endif %}
+    </td>
+    <td>
+      <b>Auteur: </b><br>
+      <a href="{% url 'user_home' annotation.author.id %}" style="color:#000000">{{ annotation.author }}</a><br>
+      <b>Contributeurs: </b><br>
+      {% for contributor in annotation.stats.contributors.all %}
+          <a href="{% url 'user_home' contributor.id %}" style="color:#000000">{{ contributor.username }}</a>{% if not forloop.last %}, {% endif %}
+      {% endfor %}
+    </td>
+    <td>
+      <b>Créée le:</b><br>
+      {{ annotation.created|date:'d-m-Y' }}<br>
+      <b>Révisée pour la dernière fois le:</b><br>
+      {{ annotation.current_revision.created|date:'d-m-Y' }}
+    </td>
+    <td>
+        {% include "partials/annotation_stats_panel.html" with annotation=annotation %}
+    </td>
+    {% if show_links %}
+    <td>
+      <b>Espace de travail</b><br>
+      <a class="btn btn-primary btn-sm" href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}" target="_blank">Suivre le lien</a><br>
+      <br><b>Permalien vers l'état actuel</b><br>
+      <a class="btn btn-primary btn-sm" href="{% url 'revision_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid annotation.current_revision.revision_guid %}" target="_blank">Suivre le lien</a><br>
+      <br><b>Permalien vers l'état dynamique</b><br>
+      <a class="btn btn-primary btn-sm" href="{% url 'annotation_readonly' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}" target="_blank">Suivre le lien</a><br>
+    </td>
+    {% endif %}
+  </tr>
+  {% endfor %}
+  </tbody>
+</table>
+
+{% endif %}

--- a/src_js/iconolab-bundle/src/main.js	Mon May 22 12:11:44 2017 +0200
+++ b/src_js/iconolab-bundle/src/main.js	Mon May 22 16:17:36 2017 +0200
@@ -38,6 +38,14 @@
 Vue.component('annotation-list', Editor.AnnotationList);
 Vue.component('comment-list', Editor.CommentList);
 
+$('.table-clickable').each(function() {
+    var selector = $(this).data('selector');
+    $(this).find('tr').on('click', function(e) {
+        var href = $(this).find(selector).attr('href');
+        window.location.replace(href);
+    });
+})
+
 if (!window.iconolab) {
     window.iconolab = iconolab;
 }