Improve bookmarks design.
authorAlexandre Segura <mex.zktk@gmail.com>
Thu, 18 May 2017 10:37:26 +0200
changeset 508 3d920e27a465
parent 507 1bae3da99830
child 509 efa81cbd61e9
Improve bookmarks design.
src/iconolab/templates/iconolab/user_bookmarks.html
src/iconolab/templates/partials/item_images_preview.html
src/iconolab/views/userpages.py
src_js/iconolab-bundle/src/iconolab.scss
--- 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;
+                    }
                 }
             }
         }