# HG changeset patch
# User durandn
# Date 1475759358 -7200
# Node ID 43aa7c58904894819d8bf31dfc09f6a163da648b
# Parent  1c7cce1966659456347890a7e57f3fa6edd1cd5c
Work on pagination: collection_home mostly, a few touches on item_detail and detail_annotations #39

diff -r 1c7cce196665 -r 43aa7c589048 src/iconolab/static/iconolab/css/iconolab.css
--- a/src/iconolab/static/iconolab/css/iconolab.css	Thu Oct 06 15:07:50 2016 +0200
+++ b/src/iconolab/static/iconolab/css/iconolab.css	Thu Oct 06 15:09:18 2016 +0200
@@ -120,10 +120,28 @@
 }
 
 /* COLLECTION HOME PAGE */
+
+.collection-summary{
+	padding-bottom: 15px;
+	width: 100%
+}
+
+.collection-container{
+	width:100%;
+}
+
+.collection-home-title{
+	padding-bottom: 15px;
+}
+
+.tab-selector{
+	margin-top: 15px;
+}
+
 .image-list-wrapper{
-	margin-top: 15px; 
-	margin-left:10px;
+	margin-top: 15px;
 }
+
 li.image-list-li{
 	margin-bottom: 5px; 
 	width: 370px; 
@@ -182,4 +200,20 @@
 
 dl.legals-dl dd{
 	margin-left: 10px;
+}
+
+/* HOME PAGE STYLE */
+
+.show-complete-link, .hide-complete-link{
+	cursor: pointer;
+}
+
+/* - COLLECTION HOME STYLE */
+
+.collection-summary{
+	margin-bottom: 15px;
+}
+
+.description-col{
+	padding: 10px;
 }
\ No newline at end of file
diff -r 1c7cce196665 -r 43aa7c589048 src/iconolab/templates/iconolab/collection_home.html
--- a/src/iconolab/templates/iconolab/collection_home.html	Thu Oct 06 15:07:50 2016 +0200
+++ b/src/iconolab/templates/iconolab/collection_home.html	Thu Oct 06 15:09:18 2016 +0200
@@ -7,60 +7,247 @@
 {% load iconolab_tags %}
 
 {% block content %}
-<h2>{{collection.verbose_name}}</h2><br>
-
-<ul class="nav nav-tabs">
-  <li id="tab-items" role="presentation" class="active"><a class="collection-home-tab" id="show-items">Objets du fonds {{collection.verbose_name}}</a></li>
-  <li id="tab-contribution" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-contribution">Appels à contribution</a></li>
-  <li id="tab-revised" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-revised">Annotations les plus révisées</a></li>
-  <li id="tab-recent" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-recent">Annotations récentes</a></li>
-</ul>
-
-<div id="list-recent" class="recent-ann-wrapper collection-home-block">
-  {% include "partials/image_annotations_list.html" with annotation_list=recent_annotations.all %}
-</div>
-
-<div id="list-revised" class="revised-ann-wrapper collection-home-block">
-  {% include "partials/image_annotations_list.html" with annotation_list=revised_annotations.all %}
-</div>
-
-<div id="list-contribution" class="contribution-ann-wrapper collection-home-block">
-  {% include "partials/image_annotations_list.html" with annotation_list=contribution_calls_annotations_list %}
-</div>
-
-<div id="list-items" class="collection-home-block selected">
-<ul class="image-list-wrapper list-inline">
-  {% for item in collection.items.all %}
-  <li class="image-list-li small-image-wrapper panel panel-default">
-    <div class="image-container text-center image-list-image-container">
-    {% with item.images.first as image %}
-      {% thumbnail image.media "350x300" crop=False as im %}
-        <div class="object-infos">
-          <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
-        </div>
-        <div>
-        <a href="{% url 'item_detail' collection_name item.item_guid %}">
-          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
-        </a>
-        </div>
+  <div id="collection-summary" class="row collection-summary">
+    <h1 class="collection-home-title text-center"><small>Fonds Iconolab</small> {{ collection.verbose_name }}</h1>
+    <div class="col-md-3 pull-left">
+      {% thumbnail collection.image "250x250" crop=False as im %}
+        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
       {% endthumbnail %}
-    {% endwith %}
-   </li>
-{% endfor %}
-</ul>
-</div>
-
+    </div>
+    <div class="col-md-9 description-container">
+      
+      <p id="collection-description-short-{{collection.name}}" class="text-justify collection-description"> 
+        {{collection.description | safe}} 
+        {% if collection.complete_description %}<a id="show-complete-{{collection.name}}" class="show-complete-link" @click="showCompleteDescription('{{collection.name}}')"> Voir plus</a>{% endif %}
+      </p>
+      <p id="collection-description-complete-{{collection.name}}" class="text-justify collection-description-complete">
+        {{collection.complete_description | safe}} 
+        <a id="hide-complete-{{collection.name}}" class="hide-complete-link" @click="hideCompleteDescription('{{collection.name}}')"> Voir moins</a>
+      </p>
+    </div>
+  </div>
+  <div id="collection-tabs" class="row tab-selector">
+    <div class="col-md-12">
+      <ul class="nav nav-tabs">
+        <li id="tab-items" role="presentation" class="active"><a class="collection-home-tab" id="show-items" @click="switchTab('items')">Objets du fonds {{collection.verbose_name}}</a></li>
+        <li id="tab-contribution" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-contribution" @click="switchTab('contribution')">Appels à contribution</a></li>
+        <li id="tab-revised" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-revised" @click="switchTab('revised')">Annotations les plus révisées</a></li>
+        <li id="tab-recent" role="presentation" class="pull-right"><a class="collection-home-tab" id="show-recent" @click="switchTab('recent')">Annotations récentes</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="row">
+    <div id="list-recent" class="recent-ann-wrapper collection-home-block col-md-12">
+      {% include "partials/image_annotations_list.html" with annotation_list=recent_list %}
+      {% if recent_list %}
+        <ul class="pagination pull-right recent-perpage" style="margin-left: 15px;">
+          <li class="active pagination-label"><a>Annotations par page : </a></li>
+          <li class="{% if recent_list.paginator.per_page == 5 %}active{% endif %}">
+            <a {% if recent_list.paginator.per_page != 5 %}href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page=1&recent_perpage=5&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>5</a>
+          </li>
+          <li class="{% if recent_list.paginator.per_page == 10 %}active{% endif %}">
+            <a {% if recent_list.paginator.per_page != 10 %}href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page=1&recent_perpage=10&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>10</a>
+          </li>
+          <li class="{% if recent_list.paginator.per_page == 25 %}active{% endif %}">
+            <a {% if recent_list.paginator.per_page != 25 %}href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page=1&recent_perpage=25&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>25</a>
+          </li>
+          <li class="{% if recent_list.paginator.per_page == 100 %}active{% endif %}">
+            <a {% if recent_list.paginator.per_page != 100 %}href="{% url 'collection_home' collection_name %}?show=recent&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page=1&recent_perpage=100&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>100</a>
+          </li>
+        </ul>
+        {% if recent_list.has_previous or recent_list.has_next %}
+          <ul class="pagination pull-right recent-pagination">
+            {% if recent_list.has_previous %}
+            <li>
+              <a href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.previous_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Précédent">
+                <span aria-hidden="true">&laquo;</span>
+              </a>
+            </li>
+            {% endif %}
+            
+            {% for page in recent_list.paginator.page_range %}
+              <li id="page-link-{{page}}" class="pagination-link {% if page == revised_list.number %}active{% endif %}">
+                <a {% if page != revised_list.number %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{page}}&recent_perpage={{recent_list.paginator.per_page}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>{{page}}</a>
+              </li>
+            {% endfor %}
+            
+            {% if recent_list.has_next %}
+            <li>
+              <a href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.next_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Suivant">
+                 <span aria-hidden="true">&raquo;</span>
+              </a>
+            </li>
+            {% endif %}
+          </ul>
+        {% endif %}
+      {% endif %}
+    </div>
+  </div>
+  <div class="row">
+    <div id="list-revised" class="revised-ann-wrapper collection-home-block col-md-12">
+      {% include "partials/image_annotations_list.html" with annotation_list=revised_list %}
+      {% if revised_list %}
+        {{revised_list.paginator.per_page}}
+        <ul class="pagination pull-right revised-perpage" style="margin-left: 15px;">
+          <li class="active pagination-label"><a>Annotations par page : </a></li>
+          <li class="{% if revised_list.paginator.per_page == 5 %}active{% endif %}">
+            <a {% if revised_list.paginator.per_page != 5 %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page=1&revised_perpage=5&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>5</a>
+          </li>
+          <li class="{% if revised_list.paginator.per_page == 10 %}active{% endif %}">
+            <a {% if revised_list.paginator.per_page != 10 %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page=1&revised_perpage=10&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>10</a>
+          </li>
+          <li class="{% if revised_list.paginator.per_page == 25 %}active{% endif %}">
+            <a {% if revised_list.paginator.per_page != 25 %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page=1&revised_perpage=25&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>25</a>
+          </li>
+          <li class="{% if revised_list.paginator.per_page == 100 %}active{% endif %}">
+            <a {% if revised_list.paginator.per_page != 100 %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page=1&revised_perpage=100&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>100</a>
+          </li>
+        </ul>
+        {% if revised_list.has_previous or revised_list.has_next %}
+          <ul class="pagination pull-right revised-pagination">
+            {% if revised_list.has_previous %}
+            <li>
+              <a href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.previous_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Précédent">
+                <span aria-hidden="true">&laquo;</span>
+              </a>
+            </li>
+            {% endif %}
+            
+            {% for page in revised_list.paginator.page_range %}
+              <li id="page-link-{{page}}" class="pagination-link {% if page == revised_list.number %}active{% endif %}">
+                <a {% if page != revised_list.number %}href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{page}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>{{page}}</a>
+              </li>
+            {% endfor %}
+            
+            {% if revised_list.has_next %}
+            <li>
+              <a href="{% url 'collection_home' collection_name %}?show=revised&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_list.next_page_number}}&revised_perpage={{revised_list.paginator.per_page}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Suivant">
+                 <span aria-hidden="true">&raquo;</span>
+              </a>
+            </li>
+            {% endif %}
+          </ul>
+        {% endif %}
+      {% endif %}
+    </div>
+  </div>
+  <div class="row">
+    <div id="list-contribution" class="contributions-ann-wrapper collection-home-block col-md-12">
+      {% include "partials/image_annotations_list.html" with annotation_list=contributions_list %}
+      {% if contributions_list %}
+        <ul class="pagination pull-right contributions-perpage" style="margin-left: 15px;">
+          <li class="active pagination-label"><a>Annotations par page : </a></li>
+          <li class="{% if contributions_list.paginator.per_page == 5 %}active{% endif %}">
+            <a {% if contributions_list.paginator.per_page != 5 %}href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page=1&contributions_perpage=5"{% endif %}>5</a>
+          </li>
+          <li class="{% if contributions_list.paginator.per_page == 10 %}active{% endif %}">
+            <a {% if contributions_list.paginator.per_page != 10 %}href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page=1&contributions_perpage=10"{% endif %}>10</a>
+          </li>
+          <li class="{% if contributions_list.paginator.per_page == 25 %}active{% endif %}">
+            <a {% if contributions_list.paginator.per_page != 25 %}href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page=1&contributions_perpage=25"{% endif %}>25</a>
+          </li>
+          <li class="{% if contributions_list.paginator.per_page == 100 %}active{% endif %}">
+            <a {% if contributions_list.paginator.per_page != 100 %}href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page=1&contributions_perpage=100"{% endif %}>100</a>
+          </li>
+        </ul>
+        {% if contributions_list.has_previous or contributions_list.has_next %}
+          <ul class="pagination pull-right contributions-pagination">
+            {% if contributions_list.has_previous %}
+            <li>
+              <a href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_list.previous_page_number}}&contributions_perpage={{contributions_list.paginator.per_page}}" aria-label="Précédent">
+                <span aria-hidden="true">&laquo;</span>
+              </a>
+            </li>
+            {% endif %}
+            
+            {% for page in contributions_list.paginator.page_range %}
+              <li id="page-link-{{page}}" class="pagination-link {% if page == contributions_list.number %}active{% endif %}">
+                <a {% if page != contributions_list.number %}href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{page}}&contributions_perpage={{contributions_list.paginator.per_page}}"{% endif %}>{{page}}</a>
+              </li>
+            {% endfor %}
+            
+            {% if contributions_list.has_next %}
+            <li>
+             <a href="{% url 'collection_home' collection_name %}?show=contributions&items_page={{items_page}}&items_perpage={{items_perpage}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_list.next_page_number}}&contributions_perpage={{contributions_list.paginator.per_page}}" aria-label="Suivant">
+                <span aria-hidden="true">&raquo;</span>
+              </a>
+            </li>
+            {% endif %}
+          </ul>
+        {% endif %}
+      {% endif %}
+    </div>
+  </div>
+  <div class="row">
+    <div id="list-items" class="collection-home-block selected col-md-12 text-center">
+      <ul class="image-list-wrapper list-inline">
+        {% for item in items_list %}
+        <li class="image-list-li small-image-wrapper panel panel-default">
+          <div class="image-container text-center image-list-image-container">
+          {% with item.images.first as image %}
+            {% thumbnail image.media "350x300" crop=False as im %}
+              <div class="object-infos">
+                <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
+              </div>
+              <div>
+                <a href="{% url 'item_detail' collection_name item.item_guid %}">
+                  <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+                </a>
+              </div>
+            {% endthumbnail %}
+          {% endwith %}
+         </li>
+      {% endfor %}
+      </ul>
+      <ul class="pagination pull-right items-perpage" style="margin-left: 15px;">
+        <li class="active pagination-label"><a>Objets par page : </a></li>
+        <li class="{% if items_list.paginator.per_page == 6 %}active{% endif %}">
+          <a {% if items_list.paginator.per_page != 6 %}href="{% url 'collection_home' collection_name %}?show=items&items_page=1&items_perpage=6&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>6</a>
+        </li>
+        <li class="{% if items_list.paginator.per_page == 12 %}active{% endif %}">
+          <a {% if items_list.paginator.per_page != 12 %}href="{% url 'collection_home' collection_name %}?show=items&items_page=1&items_perpage=12&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>12</a>
+        </li>
+        <li class="{% if items_list.paginator.per_page == 48 %}active{% endif %}">
+          <a {% if items_list.paginator.per_page != 48 %}href="{% url 'collection_home' collection_name %}?show=items&items_page=1&items_perpage=48&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>48</a>
+        </li>
+        <li class="{% if items_list.paginator.per_page == 256 %}active{% endif %}">
+          <a {% if items_list.paginator.per_page != 256 %}href="{% url 'collection_home' collection_name %}?show=items&items_page=1&items_perpage=256&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>256</a>
+        </li>
+      </ul>
+      {% if items_list.has_previous or items_list.has_next %}
+        <ul class="pagination pull-right items-pagination">
+          {% if items_list.has_previous %}
+          <li>
+            <a href="{% url 'collection_home' collection_name %}?show=items&items_page={{items_list.previous_page_number}}&items_perpage={{items_list.paginator.per_page}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Précédent">
+              <span aria-hidden="true">&laquo;</span>
+            </a>
+          </li>
+          {% endif %}
+          
+          {% for page in items_list.paginator.page_range %}
+            <li id="page-link-{{page}}" class="pagination-link {% if page == items_list.number %}active{% endif %}">
+              <a {% if page != items_list.number %}href="{% url 'collection_home' collection_name %}?show=items&items_page={{page}}&items_perpage={{items_list.paginator.per_page}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}"{% endif %}>{{page}}</a>
+            </li>
+          {% endfor %}
+          
+          {% if items_list.has_next %}
+          <li>
+           <a href="{% url 'collection_home' collection_name %}?show=items&items_page={{items_list.next_page_number}}&items_perpage={{items_list.paginator.per_page}}&recent_page={{recent_page}}&recent_perpage={{recent_perpage}}&revised_page={{revised_page}}&revised_perpage={{revised_perpage}}&contributions_page={{contributions_page}}&contributions_perpage={{contributions_perpage}}" aria-label="Suivant">
+             <span aria-hidden="true">&raquo;</span>
+            </a>
+          </li>
+          {% endif %}
+        </ul>
+      {% endif %}
+    </div>
+  </div>
 {% endblock %}
 
 {% block footer_js %}
 <script>
-  $(".collection-home-block:not(.selected)").hide();
-  $(".collection-home-tab").click(function(){
-      $(".collection-home-tab").parent().removeClass("active");
-      $(this).parent().addClass("active");
-      clickedTab = /show\-([0-9a-z\-]+)/.exec($(this).attr("id"))[1];
-      $(".collection-home-block").hide();
-      $("#list-"+clickedTab).show();
-  })
+  _descrVue = new Vue(iconolab.DescriptionViewer);
+  _descrVue.$mount("#collection-summary");
+  _tabsVue = new Vue(iconolab.TabSelector);
+  _tabsVue.$mount("#collection-tabs");
 </script>
 {% endblock %}
\ No newline at end of file
diff -r 1c7cce196665 -r 43aa7c589048 src/iconolab/templates/iconolab/detail_annotation.html
--- a/src/iconolab/templates/iconolab/detail_annotation.html	Thu Oct 06 15:07:50 2016 +0200
+++ b/src/iconolab/templates/iconolab/detail_annotation.html	Thu Oct 06 15:09:18 2016 +0200
@@ -144,16 +144,13 @@
             <ul class="pagination pull-right">
               {% if comments.has_previous %}
               <li>
-                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{comments.previous_page_number}}&perpage={{comments.paginator.per_page}}" aria-label="Previous">
+                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{comments.previous_page_number}}&perpage={{comments.paginator.per_page}}" aria-label="Précédent">
                   <span aria-hidden="true">&laquo;</span>
                 </a>
               </li>
               {% endif %}
               
               {% for page in comments.paginator.page_range %}
-<!--                 {% if not forloop.first %} -->
-<!--                   <li id="shortcut-before-{{page}}" class="pagination-shortcut"><a>...</a></li> -->
-<!--                 {% endif %} -->
                 <li id="page-link-{{page}}" class="pagination-link {% if page == comments.number %}active{% endif %}">
                   <a {% if page != comments.number %}href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{page}}&perpage={{comments.paginator.per_page}}"{% endif %}>{{page}}</a>
                 </li>
@@ -162,7 +159,7 @@
               
               {% if comments.has_next %}
               <li>
-                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{comments.next_page_number}}&perpage={{comments.paginator.per_page}}" aria-label="Next">
+                <a href="{% url 'annotation_detail' collection_name image_guid annotation_guid %}?page={{comments.next_page_number}}&perpage={{comments.paginator.per_page}}" aria-label="Suivant">
                   <span aria-hidden="true">&raquo;</span>
                 </a>
               </li>
diff -r 1c7cce196665 -r 43aa7c589048 src/iconolab/templates/iconolab/detail_item.html
--- a/src/iconolab/templates/iconolab/detail_item.html	Thu Oct 06 15:07:50 2016 +0200
+++ b/src/iconolab/templates/iconolab/detail_item.html	Thu Oct 06 15:09:18 2016 +0200
@@ -7,7 +7,7 @@
 {% load iconolab_tags %}
 
 {% block content %}
-<div class="row">
+<div id="item-detail" class="row">
 	<div class="col-md-6">
         {% for image in item.images.all|dictsort:"pk" %}
           <div id="img-{{image.image_guid}}" class="item-detail-image-block {% if forloop.first %}selected{% endif %}">
diff -r 1c7cce196665 -r 43aa7c589048 src_js/iconolab-bundle/src/components/cutout/svgboard.js
--- a/src_js/iconolab-bundle/src/components/cutout/svgboard.js	Thu Oct 06 15:07:50 2016 +0200
+++ b/src_js/iconolab-bundle/src/components/cutout/svgboard.js	Thu Oct 06 15:09:18 2016 +0200
@@ -351,7 +351,6 @@
 		rectZone.attr({fill: FILL_COLOR, stroke: STROKE_COLOR, opacity: 0.6});
 	});
 
-
 	paper.mouseup(function () {
 		if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
 		drawing_path = rectZone;