Improve bookmarks design.
--- a/src/iconolab/templates/iconolab/user_bookmarks.html Wed May 17 17:06:07 2017 +0200
+++ b/src/iconolab/templates/iconolab/user_bookmarks.html Thu May 18 10:37:26 2017 +0200
@@ -4,52 +4,60 @@
{% load humanize %}
{% block user_content %}
- <table class="table">
- <thead>
- <th></th>
- <th>Collection</th>
- <th>Catégorie</th>
- <th></th>
- <th></th>
- </thead>
- <tbody>
- {% for bookmark in bookmarks %}
- <tr>
- <td width="10%">
- {% thumbnail bookmark.image.media "100x100" crop=False as thumbnail %}
- <a href="{% url 'image_detail' bookmark.image.item.collection.name bookmark.image.image_guid %}">
- <img src="{{ thumbnail.url }}" width="{{ thumbnail.width }}" height="{{ thumbnail.height }}" />
- </a>
- {% endthumbnail %}
- </td>
- <td>{{ bookmark.image.item.collection.verbose_name }}</td>
- <td>
- {% if request.user.is_authenticated and profile_user == request.user %}
- <form class="bookmark-edit-form" method="post" action="{% url 'bookmark_edit' bookmark.id %}">
- {% csrf_token %}
- <select name="category">
- {% for bookmark_category in bookmark_categories %}
- <option value="{{ bookmark_category.id }}" {% if bookmark_category == bookmark.category %}selected="selected"{% endif %}>{{ bookmark_category.name }}</option>
- {% endfor %}
- </select>
- </form>
- {% else %}
- {{ bookmark.category.name }}
- {% endif %}
- </td>
- <td>{{ bookmark.created|naturaltime }}</td>
- <td class="text-right">
- {% if request.user.is_authenticated and profile_user == request.user %}
- <form method="post" action="{% url 'bookmark_delete' bookmark.id %}">
- {% csrf_token %}
- <button type="submit" class="btn btn-danger btn-xs">Supprimer</button>
- </form>
- {% endif %}
- </td>
- </tr>
+ {% if bookmarks_by_category|length == 0 %}
+ <div class="alert alert-warning">Aucun favori pour le moment.</div>
+ {% else %}
+
+ {% for bookmarks_category in bookmarks_by_category %}
+ <h4>{{ bookmarks_category.category.name }}</h4>
+ <table class="table">
+ <thead>
+ <th></th>
+ <th>Collection</th>
+ <th>Catégorie</th>
+ <th></th>
+ <th></th>
+ </thead>
+ <tbody>
+ {% for bookmark in bookmarks_category.bookmarks %}
+ <tr>
+ <td width="10%">
+ {% thumbnail bookmark.image.media "100x100" crop=False as thumbnail %}
+ <a href="{% url 'image_detail' bookmark.image.item.collection.name bookmark.image.image_guid %}">
+ <img src="{{ thumbnail.url }}" width="{{ thumbnail.width }}" height="{{ thumbnail.height }}" />
+ </a>
+ {% endthumbnail %}
+ </td>
+ <td>{{ bookmark.image.item.collection.verbose_name }}</td>
+ <td>
+ {% if request.user.is_authenticated and profile_user == request.user %}
+ <form class="bookmark-edit-form" method="post" action="{% url 'bookmark_edit' bookmark.id %}">
+ {% csrf_token %}
+ <select name="category">
+ {% for bookmark_category in bookmark_categories %}
+ <option value="{{ bookmark_category.id }}" {% if bookmark_category == bookmark.category %}selected="selected"{% endif %}>{{ bookmark_category.name }}</option>
+ {% endfor %}
+ </select>
+ </form>
+ {% else %}
+ {{ bookmark.category.name }}
+ {% endif %}
+ </td>
+ <td>{{ bookmark.created|naturaltime }}</td>
+ <td class="text-right">
+ {% if request.user.is_authenticated and profile_user == request.user %}
+ <form method="post" action="{% url 'bookmark_delete' bookmark.id %}">
+ {% csrf_token %}
+ <button type="submit" class="btn btn-danger btn-xs">Supprimer</button>
+ </form>
+ {% endif %}
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
{% endfor %}
- </tbody>
- </table>
+ {% endif %}
{% endblock %}
{% block footer_js %}
--- a/src/iconolab/templates/partials/item_images_preview.html Wed May 17 17:06:07 2017 +0200
+++ b/src/iconolab/templates/partials/item_images_preview.html Thu May 18 10:37:26 2017 +0200
@@ -19,7 +19,12 @@
title="{% if is_bookmarked %}Ajouté à vos favoris{% else %}Ajouter à mes favoris{% endif %}"
data-item="{{ item.metadatas.joconde_ref }}"
data-image-id="{{ first_image.id }}"
- data-image-guid="{{ first_image.image_guid }}"><i class="fa fa-lg fa-star"></i></a>
+ data-image-guid="{{ first_image.image_guid }}">
+ <span class="fa-stack fa-lg">
+ <i class="fa fa-star fa-stack-1x"></i>
+ <i class="fa fa-star-o fa-stack-1x"></i>
+ </span>
+ </a>
{% endif %}
</div>
--- a/src/iconolab/views/userpages.py Wed May 17 17:06:07 2017 +0200
+++ b/src/iconolab/views/userpages.py Thu May 18 10:37:26 2017 +0200
@@ -127,11 +127,21 @@
profile_user = self.object
context = self.get_context_data()
+ bookmark_categories = BookmarkCategory.objects.filter(user=profile_user).all()
+
+ context['bookmark_categories'] = bookmark_categories
context['profile_user'] = profile_user
- context['bookmarks'] = Bookmark.objects.filter(category__user=profile_user).all()
- if (request.user.is_authenticated()):
- context['bookmark_categories'] = BookmarkCategory.objects.filter(user=request.user).all()
+ bookmarks_by_category = []
+ for bookmark_category in bookmark_categories:
+ bookmarks = Bookmark.objects.filter(category__user=profile_user, category=bookmark_category).all()
+ if bookmarks.count() > 0:
+ bookmarks_by_category.append({
+ 'category': bookmark_category,
+ 'bookmarks': bookmarks
+ })
+
+ context['bookmarks_by_category'] = bookmarks_by_category
return render(request, 'iconolab/user_bookmarks.html', context)
--- a/src_js/iconolab-bundle/src/iconolab.scss Wed May 17 17:06:07 2017 +0200
+++ b/src_js/iconolab-bundle/src/iconolab.scss Thu May 18 10:37:26 2017 +0200
@@ -45,16 +45,21 @@
display: block;
}
.bookmark {
- color: #E67E22;
+ color: #fff;
position: absolute;
- top: 10px;
- right: 10px;
+ top: 0;
+ right: 0;
&:hover,
&:active {
- color: darken(#E67E22, 10%);
+ color: darken(#fff, 20%);
}
&.active {
- color: #3498DB;
+ color: #F39C12;
+ }
+ .fa-stack {
+ > i:last-child {
+ color: #000;
+ }
}
}
}