From fc8c13be8fc1fd5faac4ca45b6e1fdc962f5dfe7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felipe=20Mart=C3=ADn?= <fmartingr@gmail.com>
Date: Sun, 11 Oct 2015 09:29:05 +0200
Subject: [PATCH] Modified profile header with more info

---
 amiibofindr/apps/profile/views.py       |  8 ++++-
 amiibofindr/static/less/style.less      |  4 +++
 amiibofindr/templates/profile/main.html | 40 ++++++++++++++++++-------
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/amiibofindr/apps/profile/views.py b/amiibofindr/apps/profile/views.py
index 8146291..3259811 100644
--- a/amiibofindr/apps/profile/views.py
+++ b/amiibofindr/apps/profile/views.py
@@ -32,5 +32,11 @@ class ProfileView(View):
             'this_user': user,
             'amiibo_list': amiibo_list,
             'type': type,
-            'relation': relation
+            'relation': relation,
+            'stats': {
+                'figures_count': UserAmiibo.objects.filter(
+                    user=user, _amiibo__type='figure', own=True).count(),
+                'cards_count': UserAmiibo.objects.filter(
+                    user=user, _amiibo__type='card', own=True).count(),
+            }
         })
diff --git a/amiibofindr/static/less/style.less b/amiibofindr/static/less/style.less
index 31a731f..85227b6 100644
--- a/amiibofindr/static/less/style.less
+++ b/amiibofindr/static/less/style.less
@@ -36,6 +36,10 @@
     white-space: nowrap;
 }
 
+.no-margin-bottom {
+    margin-bottom: 0 !important;
+}
+
 .relation-buttons {
     position: absolute;
     left: 6px;
diff --git a/amiibofindr/templates/profile/main.html b/amiibofindr/templates/profile/main.html
index 11d8f81..1ad6092 100644
--- a/amiibofindr/templates/profile/main.html
+++ b/amiibofindr/templates/profile/main.html
@@ -5,31 +5,51 @@
 
 {% block main_content %}
   <div class="ui page stackable grid">
-    <div class="sixteen wide column">
-      <h2 class="ui center aligned header">
-        <img class="ui image small circular bordered" src="{% gravatar this_user 400 %}"><br>
+    <div class="four wide column">
+      <img class="ui image small circular bordered" src="{% gravatar this_user 400 %}"><br>
+    </div>
+    <div class="twelve wide column">
+      <h2 class="ui header">
         {{ this_user.username }}
         <div class="sub header">
           {% blocktrans with username=this_user.username trimmed %}
             Here you can browse over {{ username }}'s collection
           {% endblocktrans %}
         </div>
+        <div class="ui statistics">
+          <div class="statistic no-margin-bottom">
+            <div class="value">
+              {{ stats.figures_count }}
+            </div>
+            <div class="label">
+              {% trans 'Figures' %}
+            </div>
+          </div>
+          <div class="statistic no-margin-bottom">
+            <div class="value">
+              {{ stats.cards_count }}
+            </div>
+            <div class="label">
+              {% trans 'Cards' %}
+            </div>
+          </div>
+        </div>
       </h2>
-      {% if user.pk == this_user.pk %}
+    </div>
+    {% if user.pk == this_user.pk %}
+      <div class="sixteen wide column">
         <div class="ui text-center">
-          <p>
-            {% trans "Want everyone to see your collection? Spread the word!" %}
-          </p>
+          {% trans "Want everyone to see your collection? Spread the word!" %}
           <a href="https://twitter.com/share?text={% trans "Look at my amiibo collection!" %}" class="twitter-share-button" data-via="amiibofindr">Tweet</a>
           <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
         </div>
-      {% endif %}
-    </div>
+      </div>
+    {% endif %}
     <div class="eight wide column">
       <div class="ui three item menu">
         <a href="{% url 'profile:main-filter' this_user.username type 'own' %}" class="item {% if relation == 'own' %}active{% endif %}">{% trans "Have it" %}</a>
         <a href="{% url 'profile:main-filter' this_user.username type 'want' %}" class="item {% if relation == 'want' %}active{% endif %}">{% trans "Want it" %}</a>
-        <a href="{% url 'profile:main-filter' this_user.username type  'trade'%}" class="item {% if relation == 'trade' %}active{% endif %}">{% trans "Trade it" %}</a>
+        <a href="{% url 'profile:main-filter' this_user.username type 'trade'%}" class="item {% if relation == 'trade' %}active{% endif %}">{% trans "Trade it" %}</a>
       </div>
     </div>
     <div class="eight wide column">