style for badges, tags and profile templates

8 files changed, 178 insertions, 134 deletions

diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 7592da73..3df846bd 100644
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -1070,6 +1070,7 @@ ul.tags.marked-tags li,
 .tags-page ul.tags li,
 ul#ab-user-tags li {
     width: 160px;
+    margin:5px;
 }
 
 ul#related-tags li {
@@ -1995,6 +1996,7 @@ span.delete-icon:hover {
 .tabBar-user{
     width:375px;
 }
+
 .user {
     padding: 5px;
     line-height: 140%;
@@ -2020,6 +2022,153 @@ span.delete-icon:hover {
     display: inline;
 }
 
+/* tags page */
+
+.tabBar-tags{
+    width:270px;
+    margin-bottom:15px;
+}
+
+/* badges page */
+
+a.medal {
+    font-size: 17px;
+    line-height: 250%;
+    margin-right:5px;
+    color: #333;
+    text-decoration: none;
+    background: url(../images/medala.gif) no-repeat;
+    border-left: 1px solid #EEE;
+    border-top: 1px solid #EEE;
+    border-bottom: 1px solid #CCC;
+    border-right: 1px solid #CCC;
+    padding: 4px 12px 4px 6px;
+}
+
+a:hover.medal {
+    color: #333;
+    text-decoration: none;
+    background: url(../images/medala_on.gif) no-repeat;
+    border-left: 1px solid #E7E296;
+    border-top: 1px solid #E7E296;
+    border-bottom: 1px solid #D1CA3D;
+    border-right: 1px solid #D1CA3D;
+}
+
+#award-list{
+    .user{
+        float:left;
+       margin:5px;
+    }
+}
+
+/* profile page */
+
+.tabBar-profile{
+    width:100%;
+    margin-bottom:15px;
+    float:left;
+}
+
+.user-profile-page{
+    font-size:15px;
+    color:@info-text-dark;
+    .avatar img{
+        border:#eee 1px solid;
+       padding:5px;
+    }
+    h2{
+        padding:10px 0px 10px 0px;
+    }
+}
+
+.user-details {
+    font-size: 15px;
+}
+
+.user-about {
+    background-color: #EEEEEE;
+    height: 200px;
+    line-height: 20px;
+    overflow: auto;
+    padding: 10px;
+    width: 90%;
+    p{font-size:18px;}
+}
+
+.user-info-table td{
+    padding-bottom:5px;
+}
+
+.follow-toggle {
+    border:0;
+    color:@button-label;
+    font-weight:bold;
+    font-size:12px;
+    height:26px;
+    line-height:26px;
+    margin-top:-2px;
+    font-size:15px;
+    cursor:pointer;
+    background:url(../images/small-button-blue.png) repeat-x top;
+    .rounded-corners(4px);
+    .text-shadow(0px,1px,0px,#E6F6FA);
+    .box-shadow(1px, 1px, 2px, #808080)
+}
+
+.follow-toggle:hover {
+    background:url(../images/small-button-blue.png) repeat-x bottom;
+}
+
+.follow-toggle .follow{
+    font-color: #000;
+    font-style:normal;
+}
+
+.follow-toggle .unfollow div.unfollow-red{
+    display:none;
+}
+
+.follow-toggle .unfollow:hover div.unfollow-red{
+    display:inline;
+    color:#fff;
+    font-weight:bold;
+    color:#A05736;
+}
+
+.follow-toggle .unfollow:hover div.unfollow-green{
+    display:none;
+}
+
+.vote-count {
+    font-family: Arial;
+    font-size: 160%;
+    font-weight: 700;
+    color: #777;
+}
+
+.answer-summary {
+    display: block;
+    clear: both;
+    padding: 3px;
+}
+
+.answer-votes {
+    background-color: #EEEEEE;
+    color: #555555;
+    float: left;
+    font-family: Arial;
+    font-size: 15px;
+    font-weight: bold;
+    height: 17px;
+    padding: 2px 4px 5px;
+    text-align: center;
+    text-decoration: none;
+    width: 20px;
+    margin-right: 10px;
+    .rounded-corners(4px);
+}
+
 /* ----- Footer links , check blocks/footer.html----- */
 
 #ground {
@@ -2070,31 +2219,6 @@ span.delete-icon:hover {
 }
 
 
-/* badges */
-a.medal {
-    font-size: 14px;
-    line-height: 250%;
-    font-weight: 800;
-    color: #333;
-    text-decoration: none;
-    background: url(../images/medala.gif) no-repeat;
-    border-left: 1px solid #EEE;
-    border-top: 1px solid #EEE;
-    border-bottom: 1px solid #CCC;
-    border-right: 1px solid #CCC;
-    padding: 4px 12px 4px 6px;
-}
-
-a:hover.medal {
-    color: #333;
-    text-decoration: none;
-    background: url(../images/medala_on.gif) no-repeat;
-    border-left: 1px solid #E7E296;
-    border-top: 1px solid #E7E296;
-    border-bottom: 1px solid #D1CA3D;
-    border-right: 1px solid #D1CA3D;
-}
-
 .notify-me {
     float: left;
 }
@@ -2284,18 +2408,6 @@ ins .post-tag {
     margin-top: 3px;
 }
 
-.user-details {
-    font-size: 13px;
-}
-
-.user-about {
-    background-color: #EEEEEE;
-    height: 200px;
-    line-height: 20px;
-    overflow: auto;
-    padding: 10px;
-    width: 90%;
-}
 
 /*
 .favorites-count-off {
@@ -2342,33 +2454,8 @@ ins .post-tag {
     float: left;
 }
 
-.answer-summary {
-    display: block;
-    clear: both;
-    padding: 3px;
-}
 
-.answer-votes {
-    background-color: #EEEEEE;
-    color: #555555;
-    float: left;
-    font-family: Arial;
-    font-size: 110%;
-    font-weight: bold;
-    height: 15px;
-    padding: 4px 4px 5px;
-    text-align: center;
-    text-decoration: none;
-    width: 20px;
-    margin-right: 10px;
-}
 
-.vote-count {
-    font-family: Arial;
-    font-size: 160%;
-    font-weight: 700;
-    color: #777;
-}
 
 /* todo: make these more semantic */
 .user-action-1 {
@@ -2987,52 +3074,3 @@ pre.prettyprint { padding: 3px; border: 0px solid #888; }
   .atn { color: #404; }
   .atv { color: #060; }
 }
-
-.follow-toggle {
-    border: 2px solid;
-    -moz-border-radius:5px;
-    -webkit-border-radius:5px;
-    border-radius: 5px;
-    height: auto;
-    width: 200px;
-    float:left;
-    padding: 0;
-    margin-right:100%;
-    margin-bottom: 10px;
-}
-
-.follow-toggle .follow{
-    font-color: #000;
-    font-style:normal;
-    background: #4cd46f;
-}
-
-.follow-toggle .follow:hover{
-    font-weight: bold;
-}
-
-.follow-toggle .unfollow{
-    background: #4cd46f;
-}
-
-.follow-toggle .unfollow:hover{
-    background: #d94849;
-}
-
-.follow-toggle .unfollow div.unfollow-red{
-    display:none;
-}
-
-.follow-toggle .unfollow div.unfollow-green{
-    background: #4cd46f;
-}
-
-.follow-toggle .unfollow:hover div.unfollow-red{
-    display:inline;
-    color:#fff;
-    font-weight:bold;
-}
-
-.follow-toggle .unfollow:hover div.unfollow-green{
-    display:none;
-}
diff --git a/askbot/skins/default/templates/badge.html b/askbot/skins/default/templates/badge.html
index ee7f5360..d1f75617 100644
--- a/askbot/skins/default/templates/badge.html
+++ b/askbot/skins/default/templates/badge.html
@@ -1,9 +1,10 @@
 {% extends "two_column_body.html" %}
 {% import "macros.html" as macros %}
+{%from "macros.html" import gravatar %}
 <!-- template badge.html -->
 {% block title %}{% spaceless %}{% trans name=badge.name %}{{name}}{% endtrans %} - {% trans %}Badge{% endtrans %}{% endspaceless %}{% endblock %}
 {% block content %}
-<h1>{% trans name=badge.name %}Badge "{{name}}"{% endtrans %}</h1>
+<h1 class="section-title">{% trans name=badge.name %}Badge "{{name}}"{% endtrans %}</h1>
     <p>
         <a href="{{badge.get_absolute_url()}}" title="{{ badge.get_type_display() }} : {% trans description=badge.description %}{{description}}{% endtrans %}" class="medal"><span class="{{ badge.css_class }}">&#9679;</span>&nbsp;{% trans name=badge.name%}{{name}}{% endtrans %}</a> {% trans description=badge.description %}{{description}}{% endtrans %}
     </p>
@@ -13,11 +14,16 @@
         <strong>{% trans num_awardees=badge_recipients|length %}user received this badge:{% pluralize %}users received this badge:{% endtrans %}</strong></p>
         {% endif %}
     </div>
-    <div id="award-list" style="clear:both;margin-left:20px;line-height:25px;">
+    <div class="clean"></div>
+    <div id="award-list">
         {% for recipient in badge_recipients %}
-        <p style="width:180px;float:left"><a href="{{ recipient.get_absolute_url() }}">{{ recipient.username }}</a> 
-        {{ macros.user_score_and_badge_summary(recipient) }}
-        </p>
+            <div class="user">
+                <ul>
+                    <li class="thumb">{{ gravatar(recipient, 32) }}</li>
+                    <li><a href="{{ recipient.get_absolute_url() }}">{{recipient.username}}</a></li>
+                    <li>{{ macros.user_score_and_badge_summary(recipient) }}</li>
+                </ul>
+            </div>
         {% endfor %}
     </div>
 {% endblock %}
diff --git a/askbot/skins/default/templates/badges.html b/askbot/skins/default/templates/badges.html
index bbd09951..08827da3 100644
--- a/askbot/skins/default/templates/badges.html
+++ b/askbot/skins/default/templates/badges.html
@@ -2,7 +2,7 @@
 <!-- template badges.html -->
 {% block title %}{% spaceless %}{% trans %}Badges summary{% endtrans %}{% endspaceless %}{% endblock %}
 {% block content %}
-<h1>{% trans %}Badges{% endtrans %}</h1>
+<h1 class="section-title">{% trans %}Badges{% endtrans %}</h1>
 <p>
 {% trans %}Community gives you awards for your questions, answers and votes.{% endtrans %}<br/>
 {% trans %}Below is the list of available badges and number 
@@ -31,7 +31,7 @@ of times each type of badge has been awarded. Give us feedback at {{feedback_faq
 </div>
 {% endblock %}
 {% block sidebar %}
-<div class="boxC">
+<div class="box">
     <h2>{% trans %}Community badges{% endtrans %}</h2>
     <p>
         <a style="cursor:default;" title="{% trans %}gold badge: the highest honor and is very rare{% endtrans %}" class="medal"><span class="badge1">&#9679;</span>&nbsp;{% trans %}gold{% endtrans %}</a>
diff --git a/askbot/skins/default/templates/tags.html b/askbot/skins/default/templates/tags.html
index 7d9026af..1cd4c4b9 100644
--- a/askbot/skins/default/templates/tags.html
+++ b/askbot/skins/default/templates/tags.html
@@ -4,14 +4,14 @@
 {% block title %}{% spaceless %}{% trans %}Tag list{% endtrans %}{% endspaceless %}{% endblock %}
 {% block content %}
 <!-- Tabs -->
-<div class="tabBar">
-    {% if stag %}
-        <h1>{% trans %}Tags, matching "{{ stag }}"{% endtrans %}</h1>
-    {% else %}
-        <h1>{% trans %}Tag list{% endtrans %}</h1>
-    {% endif %}
-
+{% if stag %}
+    <h1 class="section-title">{% trans %}Tags, matching "{{ stag }}"{% endtrans %}</h1>
+{% else %}
+    <h1 class="section-title">{% trans %}Tag list{% endtrans %}</h1>
+{% endif %}
+<div class="tabBar tabBar-tags">
     <div class="tabsA">
+        <span class="label">{% trans %}Sort by &raquo;{% endtrans %}</span>
         <a
             id="sort_name"
             href="{% url tags %}?sort=name"
@@ -46,6 +46,7 @@
             </li>
             {% endfor %}
         </ul>
+        <div class="clean"></div>
         <div class="pager">
             {{macros.paginator(paginator_context)}}
         </div>
diff --git a/askbot/skins/default/templates/user_profile/user.html b/askbot/skins/default/templates/user_profile/user.html
index ad3d564b..6ec4bc3a 100644
--- a/askbot/skins/default/templates/user_profile/user.html
+++ b/askbot/skins/default/templates/user_profile/user.html
@@ -7,15 +7,13 @@
 </style>
 {% endblock %}
 {% block content %}
-    <h1>
+    <h1 class="section-title">
         {% spaceless %}
-        <a href="{% url user_profile view_user.id, view_user.username|slugify %}">
         {% trans username=view_user.username %}{{username}}'s profile{% endtrans %} - {% block profilesection %}{% endblock %}
-        </a>
         {% endspaceless %}
     </h1>
-    <div style="margin-left: 5px;">
-        {% include "user_profile/user_tabs.html" %}
+    {% include "user_profile/user_tabs.html" %}
+    <div>
         {% block usercontent %}
         {% endblock %}
     </div>
diff --git a/askbot/skins/default/templates/user_profile/user_favorites.html b/askbot/skins/default/templates/user_profile/user_favorites.html
index bb019c90..08c3c688 100644
--- a/askbot/skins/default/templates/user_profile/user_favorites.html
+++ b/askbot/skins/default/templates/user_profile/user_favorites.html
@@ -1,7 +1,7 @@
 {% extends "user_profile/user.html" %}
 <!-- user_favorites.html -->
 {% block profilesection %}
-    {% trans %}followed questions{% endtrans %}
+   <h1 class="section-title"> {% trans %}followed questions{% endtrans %}</h1>
 {% endblock %}
 {% block usercontent %}
 {% include "user_profile/users_questions.html" %}
diff --git a/askbot/skins/default/templates/user_profile/user_tabs.html b/askbot/skins/default/templates/user_profile/user_tabs.html
index ad24a303..0c7c4599 100644
--- a/askbot/skins/default/templates/user_profile/user_tabs.html
+++ b/askbot/skins/default/templates/user_profile/user_tabs.html
@@ -1,5 +1,5 @@
 <!-- user_tabs.html -->
-<div class="tabBar">
+<div class="tabBar tabBar-profile">
     <div class="tabsC">
         <a id="stats" {% if tab_name=="stats" %}class="on"{% endif %} 
             title="{% trans %}User profile{% endtrans %}" 
@@ -49,4 +49,5 @@
         {% endif %}
     </div>
 </div>
+<div class="clean"></div>
 <!-- end user_tabs.html -->
diff --git a/askbot/skins/default/templates/user_profile/user_votes.html b/askbot/skins/default/templates/user_profile/user_votes.html
index d5e469ae..5111a580 100644
--- a/askbot/skins/default/templates/user_profile/user_votes.html
+++ b/askbot/skins/default/templates/user_profile/user_votes.html
@@ -10,9 +10,9 @@
                 <div style="width:150px;float:left">{{vote.voted_at|diff_date(True)}}</div>
                 <div style="width:30px;float:left">
                 {% if vote.vote==1 %}
-                    <img src="{{"/images/vote-arrow-up-on.png"|media}}" title="{% trans %}upvote{% endtrans %}">
+                    <img src="{{"/images/vote-arrow-up-on-new.png"|media}}" title="{% trans %}upvote{% endtrans %}">
                 {% else %}
-                    <img src="{{"/images/vote-arrow-down-on.png"|media}}" title="{% trans %}downvote{% endtrans %}">
+                    <img src="{{"/images/vote-arrow-down-on-new.png"|media}}" title="{% trans %}downvote{% endtrans %}">
                 {% endif %}
                 </div>
                 <div style="float:left;overflow:hidden;width:750px">