Display stats icons on images list.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 01 Mar 2017 17:58:12 +0100
changeset 412 d7f556b0bd2a
parent 411 74b01659ee40
child 413 9c5f2d97863a
Display stats icons on images list.
src/iconolab/templates/iconolab/collection_home.html
src/iconolab/templates/partials/item_images_preview.html
src_js/iconolab-bundle/src/iconolab.scss
--- a/src/iconolab/templates/iconolab/collection_home.html	Wed Mar 01 17:35:13 2017 +0100
+++ b/src/iconolab/templates/iconolab/collection_home.html	Wed Mar 01 17:58:12 2017 +0100
@@ -60,9 +60,6 @@
             {% 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>
             {% endfor %}
           </div>
--- a/src/iconolab/templates/partials/item_images_preview.html	Wed Mar 01 17:35:13 2017 +0100
+++ b/src/iconolab/templates/partials/item_images_preview.html	Wed Mar 01 17:58:12 2017 +0100
@@ -1,65 +1,46 @@
 {% load thumbnail %}
 
 <div class="item-image-container">
-  {% 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">
-          {% thumbnail main_image.media "250x250" crop=False as im %}
-          <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">
-            {% 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 '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>
-                {% endthumbnail %}
-              {% endif %}
-            {% endfor %}
-          </div>
-        </div>
-        {% else %}
-        <div class="item-links-landscape">
-          {% thumbnail main_image.media "250x250" crop=False as im %}
-          <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">
-            {% 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">
-                    <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>
-                {% endthumbnail %}
-              {% endif %}
-            {% endfor %}
-          </div>
-        </div>
-  	  {% endif %}
-    {% endwith %}
-  {% else %}
-    {% with item.images.first as main_image %}
-      <div class="main-image">
-        {% thumbnail main_image.media "250x250" crop=False as im %}
-          <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>
+
+  {% with item.images_sorted_by_name.first as first_image %}
+
+    <div class="main-image">
+      {% thumbnail first_image.media "250x250" crop=False as im %}
+        <a href="{% url 'image_detail' item.collection.name first_image.image_guid %}">
+          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+        </a>
+      {% endthumbnail %}
+    </div>
+
+    {% if item.images.count > 1 %}
+    <div class="other-images">
+    {% for image in item.images_sorted_by_name %}
+      {% if image != first_image %}
+        {% thumbnail image.media "100x100" crop=False as im %}
+        <a href="{% url 'image_detail' item.collection.name image.image_guid %}">
+          <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+        </a>
         {% endthumbnail %}
-      </div>
-    {% endwith %}
-  {% endif %}
+      {% endif %}
+    {% endfor %}
+    </div>
+    {% endif %}
+
+    <p class="item-image-stats">
+      <span title="{{ first_image.stats.views_count }} vues">
+        <i class="fa fa-eye"></i> {{ first_image.stats.views_count }}
+      </span>
+      <span title="{{ first_image.stats.annotations_count }} annotations">
+        <i class="fa fa-pencil-square-o"></i> {{ first_image.stats.annotations_count }}
+      </span>
+      <span title="{{ first_image.stats.comments_count }} commentaires">
+        <i class="fa fa-comments"></i> {{ first_image.stats.comments_count }}
+      </span>
+      <span title="{{ first_image.stats.tag_count }} mots-clés">
+        <i class="fa fa-tags"></i> {{ first_image.stats.tag_count }}
+      </span>
+    </p>
+
+  {% endwith %}
+
 </div>
--- a/src_js/iconolab-bundle/src/iconolab.scss	Wed Mar 01 17:35:13 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss	Wed Mar 01 17:58:12 2017 +0100
@@ -19,23 +19,33 @@
     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 {
+        .main-image, .other-images {
             margin-bottom: 10px;
             img {
                 width: 100%;
                 height: auto;
             }
         }
-        .item-image-container {
+        .other-images {
+            display: flex;
+            > * {
+                width: 50%;
+            }
+        }
+        .main-image {
             a {
                 display: block;
             }
         }
+        .item-image-stats {
+            display: flex;
+            justify-content: space-around;
+            padding: 0 10px;
+        }
     }
 }