# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1487607176 -3600
# Node ID f8ee375445e6b88b97bbb7129803d2433c415274
# Parent  81945eedc63f1109b915285f919a416d3c98ab7e
Change collection home layout.

- Manage tabs with Bootstrap JS.
- Remove useless components.
- Link directly to image.

diff -r 81945eedc63f -r f8ee375445e6 src/iconolab/templates/iconolab/collection_home.html
--- a/src/iconolab/templates/iconolab/collection_home.html	Wed Feb 15 16:42:06 2017 +0100
+++ b/src/iconolab/templates/iconolab/collection_home.html	Mon Feb 20 17:12:56 2017 +0100
@@ -7,81 +7,70 @@
 {% load iconolab_tags %}
 
 {% block content %}
-  <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 }}">
+  <div id="collection-summary" class="row">
+    <div class="col-md-3">
+      {% thumbnail collection.image "300x300" crop=False as im %}
+        <img src="{{ im.url }}" class="img-responsive">
       {% endthumbnail %}
-    </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>
+      <hr>
+      <p>
+        {{ collection.description | safe }}
       </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="{% if active_list == 'items' %}active{% endif %}"><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 {% if active_list == 'contributions' %}active{% endif %}"><a class="collection-home-tab" id="show-contribution" @click="switchTab('contribution')">Appels à contribution</a></li>
-        <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}"><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 {% if active_list == 'recent' %}active{% endif %}"><a class="collection-home-tab" id="show-recent" @click="switchTab('recent')">Annotations récentes</a></li>
+    <div class="col-md-9 description-container">
+      <h1>{{ collection.verbose_name }} <small>Fonds Iconolab</small></h1>
+
+      <ul class="nav nav-tabs" role="tablist">
+        <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}">
+          <a href="#list-items" role="tab" data-toggle="tab">Objets du fonds</a>
+        </li>
+        <li id="tab-contribution" role="presentation" class="pull-right {% if active_list == 'contributions' %}active{% endif %}">
+          <a href="#list-contribution" role="tab" data-toggle="tab">Appels à contribution</a>
+        </li>
+        <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}">
+          <a href="#list-revised" role="tab" data-toggle="tab">Annotations les plus révisées</a>
+        </li>
+        <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}">
+          <a href="#list-recent" role="tab" data-toggle="tab">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 {% if active_list == 'recent' %}selected{% endif %}">
-      {% include "partials/image_annotations_list.html" with annotation_list=recent_pagination_data.list %}
-      {% if recent_list %}
-        {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
-      {% endif %}
-    </div>
-  </div>
-  <div class="row">
-    <div id="list-revised" class="revised-ann-wrapper collection-home-block col-md-12 {% if active_list == 'revised' %}selected{% endif %}">
-      {% include "partials/image_annotations_list.html" with annotation_list=revised_pagination_data.list %}
-      {% if revised_list %}
-        {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
-      {% endif %}
-    </div>
-  </div>
-  <div class="row">
-    <div id="list-contribution" class="contributions-ann-wrapper collection-home-block col-md-12 {% if active_list == 'contributions' %}selected{% endif %}">
-      {% include "partials/image_annotations_list.html" with annotation_list=contributions_pagination_data.list %}
-      {% if contributions_list %}
-        {% include "partials/collection_home_pagination_links.html" with pagination_data=contributions_pagination_data list_identifier="contributions" %}
-      {% endif %}
-    </div>
-  </div>
-  <div class="row">
-    <div id="list-items" class="collection-home-block col-md-12 text-center {% if active_list == 'items' %}selected{% endif %}">
-      <ul class="image-list-wrapper list-inline"> 
-        {% for item in items_pagination_data.list %}
-          <li class="image-list-li small-image-wrapper panel panel-default">
-            <div class="object-infos text-center" style="margin-top: 10px;">
-               <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 class="tab-content">
+
+        <div id="list-recent" role="tabpanel" class="tab-pane {% if active_list == 'recent' %}active{% endif %}">
+          {% include "partials/image_annotations_list.html" with annotation_list=recent_pagination_data.list %}
+          {% if recent_list %}
+            {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
+          {% endif %}
+        </div>
+        <div id="list-revised" role="tabpanel" class="tab-pane {% if active_list == 'revised' %}active{% endif %}">
+          {% include "partials/image_annotations_list.html" with annotation_list=revised_pagination_data.list %}
+          {% if revised_list %}
+            {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
+          {% endif %}
+        </div>
+        <div id="list-contribution" role="tabpanel" class="tab-pane {% if active_list == 'contributions' %}active{% endif %}">
+          {% include "partials/image_annotations_list.html" with annotation_list=contributions_pagination_data.list %}
+          {% if contributions_list %}
+            {% include "partials/collection_home_pagination_links.html" with pagination_data=contributions_pagination_data list_identifier="contributions" %}
+          {% endif %}
+        </div>
+        <div id="list-items" role="tabpanel" class="tab-pane {% if active_list == 'items' %}active{% endif %}">
+          <div class="item-grid">
+            {% for item in items_pagination_data.list %}
+            <div class="item-grid-item">
+              {% include "partials/item_images_preview.html" with item=item %}
+              <div class="object-infos text-center">
+                <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>
-            {% include "partials/item_images_preview.html" with item=item %}
-          </li>
-        {% endfor %}
-      </ul>
-      {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
+            {% endfor %}
+          </div>
+          {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
+        </div>
+
+      </div>
+
     </div>
   </div>
 {% endblock %}
-
-{% block footer_js %}
-<script>
-  _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 81945eedc63f -r f8ee375445e6 src/iconolab/templates/partials/item_images_preview.html
--- a/src/iconolab/templates/partials/item_images_preview.html	Wed Feb 15 16:42:06 2017 +0100
+++ b/src/iconolab/templates/partials/item_images_preview.html	Mon Feb 20 17:12:56 2017 +0100
@@ -4,20 +4,20 @@
   {% if item.images.count > 1 %}
     {% with item.images_sorted_by_name.first as main_image %}
       {% if main_image.wh_ratio < 1.3  %}
-        <div class="item-links-portrait text-center" style="display:inline-block; margin: 10px 0px;">
+        <div class="item-links-portrait">
           {% thumbnail main_image.media "250x250" crop=False as im %}
-          <div class="main-image" style="display:inline-block">
-            <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{main_image.image_guid}}">
+          <div class="main-image">
+            <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
               <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
             </a>
           </div>
           {% endthumbnail %}
-          <div class="secondary-images-container secondary-images-portrait" style="display:inline-block; margin: 10px">
+          <div class="secondary-images-container secondary-images-portrait">
             {% for secondary_image in item.images.all %}
               {% if secondary_image != main_image and forloop.counter <= 4 %}
                 {% thumbnail secondary_image.media "100x100" crop=False as im %}
                   <div class="secondary-image-portrait">
-                    <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{secondary_image.image_guid}}">
+                    <a href="{% url 'image_detail' item.collection.name secondary_image.image_guid %}">
                       <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                     </a>
                   </div>
@@ -27,20 +27,20 @@
           </div>
         </div>
         {% else %}
-        <div class="item-links-landscape text-center">
+        <div class="item-links-landscape">
           {% thumbnail main_image.media "250x250" crop=False as im %}
-          <div class="main-image" style="display:inline-block">
-            <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{main_image.image_guid}}">
+          <div class="main-image">
+            <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
               <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
             </a>
           </div>
           {% endthumbnail %}
-          <div class="secondary-images-container secondary-images-landscape" style="margin: 10px">
+          <div class="secondary-images-container secondary-images-landscape">
             {% for secondary_image in item.images.all %}
               {% if secondary_image != main_image and forloop.counter <= 3 %}
                 {% thumbnail secondary_image.media "100x100" crop=False as im %}
-                  <div class="secondary-image-landscape pull-left" style="display:inline-block">
-                    <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{secondary_image.image_guid}}">
+                  <div class="secondary-image-landscape pull-left">
+                    <a href="{% url 'image_detail' item.collection.name secondary_image.image_guid %}">
                       <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                     </a>
                   </div>
@@ -53,13 +53,13 @@
     {% endwith %}
   {% else %}
     {% with item.images.first as main_image %}
-      <div class="item-links text-center" style="display:inline-block; margin: 10px 0px;">
+      <div class="main-image">
         {% thumbnail main_image.media "250x250" crop=False as im %}
-          <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{main_image.image_guid}}">
+          <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
             <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
           </a>
         {% endthumbnail %}
       </div>
     {% endwith %}
   {% endif %}
-</div>
\ No newline at end of file
+</div>
diff -r 81945eedc63f -r f8ee375445e6 src_js/iconolab-bundle/src/components/collectionhome/descriptionviewer/DescriptionViewer.vue
--- a/src_js/iconolab-bundle/src/components/collectionhome/descriptionviewer/DescriptionViewer.vue	Wed Feb 15 16:42:06 2017 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,20 +0,0 @@
-<script>
-export default {
-      data: {
-        
-      },
-      mounted() {
-          $(".collection-description-complete").hide();
-      },
-      methods: {
-          showCompleteDescription: function(){
-              $(".collection-description").hide()
-              $(".collection-description-complete").show()
-          },
-          hideCompleteDescription: function(name){
-              $(".collection-description-complete").hide()
-              $(".collection-description").show()
-          }
-      },
-}
-</script>
\ No newline at end of file
diff -r 81945eedc63f -r f8ee375445e6 src_js/iconolab-bundle/src/components/collectionhome/tabselector/TabSelector.vue
--- a/src_js/iconolab-bundle/src/components/collectionhome/tabselector/TabSelector.vue	Wed Feb 15 16:42:06 2017 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,24 +0,0 @@
-<script>
-
-export default {
-	data () {
-		return {}
-	},
-	mounted () {
-		var self=this;
-	 	$(".collection-home-block:not(.selected)").hide();
-	},
-	methods: {
-		switchTab: function(name){
-		    $(".collection-home-block").removeClass("selected");
-		    $(".collection-home-block").hide();
-		    $(".collection-home-tab").parent().removeClass("active");
-		    $("#list-"+name).show();
-		    $("#tab-"+name).addClass("active");
-		    
-		}
-	}
-}
-
-
-</script>
\ No newline at end of file
diff -r 81945eedc63f -r f8ee375445e6 src_js/iconolab-bundle/src/iconolab.scss
--- a/src_js/iconolab-bundle/src/iconolab.scss	Wed Feb 15 16:42:06 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss	Mon Feb 20 17:12:56 2017 +0100
@@ -14,6 +14,31 @@
     }
 }
 
+.item-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .item-grid-item {
+        // flex: 1;
+        padding: 0 10px 20px;
+        @media (min-width: $screen-sm-min) {
+            width: 25%;
+        }
+        .main-image {
+            margin-bottom: 10px;
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+        .item-image-container {
+            a {
+                display: block;
+            }
+        }
+    }
+}
+
 .drawingModeBtn {border: 1px solid orange; cursor: pointer; height: 25px; margin-bottom: 10px}
 
 .form-drawing {border-bottom: 1px solid #C3C3C3; }
@@ -31,8 +56,6 @@
 
 #zoomTarget, .cut-canvas {
 	border: 1px solid #C3C3C3;
-	padding-top: 2px;
-	padding-bottom: 2px
 }
 
 .no-padding {
@@ -177,18 +200,6 @@
 
 /* GLOBAL HOME PAGE */
 
-.home-main-button-container{
-	position: relative;
-	width:0px;
-	height: 0px;
-}
-
-.home-main-button{
-	position: absolute;
-	left: 15px;
-	top: 15px
-}
-
 .collection-title{
 	margin-top:0px;
 }
@@ -206,10 +217,6 @@
 	padding-bottom: 15px;
 }
 
-.collection-home-title{
-	padding-bottom: 15px;
-}
-
 .tab-selector{
 	margin-top: 15px;
 }
@@ -286,10 +293,12 @@
 
 /* - COLLECTION HOME STYLE */
 
-.collection-summary{
-	margin-bottom: 15px;
-}
-
 .description-col{
 	padding: 10px;
 }
+
+#collection-summary {
+    .tab-pane {
+        padding: 30px 0;
+    }
+}
diff -r 81945eedc63f -r f8ee375445e6 src_js/iconolab-bundle/src/main.js
--- a/src_js/iconolab-bundle/src/main.js	Wed Feb 15 16:42:06 2017 +0100
+++ b/src_js/iconolab-bundle/src/main.js	Mon Feb 20 17:12:56 2017 +0100
@@ -8,8 +8,6 @@
 import Zoomview from './components/zoomview/Zoomview.vue'
 import MergeTool from './components/mergetool/MergeTool.vue'
 import CollectionSelector from './components/collectionselector/CollectionSelector.vue'
-import TabSelector from './components/collectionhome/tabselector/TabSelector.vue'
-import DescriptionViewer from './components/collectionhome/descriptionviewer/DescriptionViewer.vue'
 import DiffViewer from './components/diffviewer/diffviewer.vue'
 import jsondiffpatch from 'jsondiffpatch'
 import Editor from './components/editor'
@@ -23,8 +21,6 @@
     JsDiff: Diff,
     JsonDiff: jsondiffpatch,
     CollectionSelector: CollectionSelector,
-    TabSelector: TabSelector,
-    DescriptionViewer: DescriptionViewer,
     VueComponents : {
         Typeahead: Typeahead,
         MergeTool: MergeTool,