Display stats icons on images list.
--- 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;
+ }
}
}