display badges on user profiles [#29340547]

core/models.py

@@ -895,6 +895,10 @@ class Badge(models.Model):
     name = models.CharField(max_length=72, blank=True)
     description = models.TextField(default='', null=True)
     
+    @property
+    def path(self):
+        return '/static/images/%s.png' % self.name
+    
 #class CampaignSurveyResponse(models.Model):
 #    # generic
 #    campaign = models.ForeignKey("Campaign", related_name="surveyresponse", null=False)

frontend/templates/supporter.html

@@ -92,6 +92,13 @@ there's no tab for seeing ALL my books, only the filters! huh.
                             {% ifequal supporter request.user %}
                             <div id="user-block1">
                             <div class="block-inner">
+                            <span class="my-setting">My Profile
+                                <span class="user-badges">
+                                {% for badge in supporter.profile.badges.all %}
+                                    <img class="user-badge" src="{{ badge.path }}" alt="{{ badge.description }}" title="{{ badge.description }}"  />                                
+                                {% endfor %}
+                                </span>
+                            </span>
                             </div>
                             </div>
                             <div class="user-block2">
@@ -112,6 +119,10 @@ there's no tab for seeing ALL my books, only the filters! huh.
                                 <img class="user-avatar" src="/static/images/header/avatar.png" height="50" width="50" alt="Generic Ungluer Avatar" title="Ungluer" />
                                 {% endif %}
                                 <span class="user-name"><a href="#">{{ supporter.username }}</a></span>
+                                <span class="user-badges">
+                                {% for badge in supporter.profile.badges.all %}
+                                    <img src="{{ badge.path }}" alt="{{ badge.description }}" title="{{ badge.description }}"  />                                
+                                {% endfor %}
                             </div>
                             </div>
                             <div class="user-block2">

static/css/supporter_layout.css

@@ -195,6 +195,12 @@ img.user-avatar {
   -webkit-border-radius: 7px;
   border-radius: 7px;
 }
+img.user-badge{
+  vertical-align:middle;
+}
+.user-badges{
+  font-size:32px;
+}
 .social {
   width: 100%;
 }
@@ -207,7 +213,6 @@ span.special-user-name {
   height: 50px;
 }
 span.user-name,
-span.user-date,
 span.user-short-info {
   display: block;
 }
@@ -313,10 +318,10 @@ span.my-setting {
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
-  height: 50px;
-  line-height: 50px;
+  height: 40px;
+  line-height: 40px;
   display: block;
-  padding: 0 0 0 10px;
+  padding: 0 0 10px 10px;
   font-size: 19px;
   font-weight: bold;
   cursor: pointer;

static/less/supporter_layout.less

@@ -120,7 +120,12 @@ img.user-avatar {
 	margin-right:10px;
 	.one-border-radius(7px);
 }
-
+img.user-badge{
+  vertical-align:middle;
+}
+.user-badges{
+  font-size:32px;
+}
 .social { 
 	width:100%;
 }
@@ -135,7 +140,6 @@ span.special-user-name {
 }
 
 span.user-name,
-span.user-date, 
 span.user-short-info { 
 	display: block;
 }
@@ -234,9 +238,9 @@ input.profile-save {
 span.my-setting { 
 	background:@blue-grey url("@{image-base}header/explane.png") 90% center no-repeat; 
 	.one-border-radius(7px); 
-	.height(50px);
+	.height(40px);
 	display:block; 
-	padding:0 0 0 10px; 
+	padding:0 0 10px 10px; 
 	font-size: @font-size-header;
 	font-weight: bold;
 	cursor:pointer;