added support for css sliding doors tags

12 files changed, 368 insertions, 344 deletions

diff --git a/askbot/skins/default/media/js/live_search.js b/askbot/skins/default/media/js/live_search.js
index 23da046b..23f81acd 100644
--- a/askbot/skins/default/media/js/live_search.js
+++ b/askbot/skins/default/media/js/live_search.js
@@ -206,15 +206,19 @@ $(document).ready(function(){
         if (deletable){
             html += '<span class="delete-icon"></span>';
         }
-        return '<span class="tag-left">' + html + '</span>';
+        var tag_class = 'tag-left';
+        if (deletable){
+            tag_class += ' deletable-tag';
+        }
+        return '<li class="' + tag_class + '">' + html + '</li>';
     };
 
     var render_tags = function(tags, linkable, deletable){
-        var tags_html = '<div class="tags">';
+        var tags_html = '<ul class="tags">';
         $.each(tags, function(idx, item){
             tags_html += render_tag(item, linkable, deletable);
         });
-        tags_html += '</div>';
+        tags_html += '</ul>';
         return tags_html;
     };
 
diff --git a/askbot/skins/default/media/js/post.js b/askbot/skins/default/media/js/post.js
index f49720a6..864ac77b 100644
--- a/askbot/skins/default/media/js/post.js
+++ b/askbot/skins/default/media/js/post.js
@@ -634,25 +634,20 @@ var questionRetagger = function(){
                             '{tag}',
                             tag_name
                         );
-        return '<span class="tag-left">' +
+        return '<li class="tag-left">' +
                     '<a ' +
                         'class="tag tag-right" ' +
                         'href="' + url + '" ' + 
                         'title="' + tag_title + '" rel="tag"' +
                     '>' + tag_name + '</a>' +
-               '</span>';
+               '</li>';
     };
 
     var drawNewTags = function(new_tags){
         new_tags = new_tags.split(/\s+/);
         var tags_html = ''
         $.each(new_tags, function(index, name){
-            if (index === 0){
-                tags_html = render_tag(name);
-            }
-            else {
-                tags_html += ' ' + render_tag(name);
-            }
+            tags_html += render_tag(name);
         });
         tagsDiv.html(tags_html);
     };
@@ -871,22 +866,13 @@ inherits(DeleteIcon, SimpleControl);
 
 DeleteIcon.prototype.decorate = function(element){
     this._element = element;
-    var img = mediaUrl("media/images/close-small.png");
-    var imgHover = mediaUrl("media/images/close-small-hover.png");
     this._element.attr('class', 'delete-icon');
-    this._element.attr('src', img);
     this._element.attr('title', this._title);
     setupButtonEventHandlers(this._element, this._handler);
-    this._element.mouseover(function(e){
-        $(this).attr('src', imgHover);
-    });
-    this._element.mouseout(function(e){
-        $(this).attr('src', img);
-    });
 };
 
 DeleteIcon.prototype.createDom = function(){
-    this.decorate($('<img />'));
+    this.decorate($('<span />'));
 };
 
 
@@ -1152,7 +1138,7 @@ Comment.prototype.decorate = function(element){
     var parent_type = this._element.parent().parent().attr('id').split('-')[2];
     var comment_id = this._element.attr('id').replace('comment-','');
     this._data = {id: comment_id};
-    var delete_img = this._element.find('img.delete-icon');
+    var delete_img = this._element.find('span.delete-icon');
     if (delete_img.length > 0){
         this._deletable = true;
         this._delete_icon = new DeleteIcon(this.deletePrompt);
diff --git a/askbot/skins/default/media/js/tag_selector.js b/askbot/skins/default/media/js/tag_selector.js
index 857e67b6..df444627 100644
--- a/askbot/skins/default/media/js/tag_selector.js
+++ b/askbot/skins/default/media/js/tag_selector.js
@@ -42,12 +42,6 @@ function pickedTags(){
     };
 
     var setupTagDeleteEvents = function(obj,tag_store,tagname,reason,send_ajax){
-        obj.unbind('mouseover').bind('mouseover', function(){
-            $(this).attr('src', mediaUrl('media/images/close-small-hover.png'));
-        });
-        obj.unbind('mouseout').bind('mouseout', function(){
-            $(this).attr('src', mediaUrl('media/images/close-small-dark.png'));
-        });
         obj.click( function(){
             unpickTag(tag_store,tagname,reason,send_ajax);
         });
@@ -60,7 +54,7 @@ function pickedTags(){
                                     to_tag_container
                                 ){
         $.each(clean_tagnames, function(idx, tagname){
-            var new_tag = $('<span></span>');
+            var new_tag = $('<li></li>');
             new_tag.addClass('deletable-tag');
             new_tag.addClass('tag-left');
             var tag_link = $('<a></a>');
@@ -70,9 +64,8 @@ function pickedTags(){
             var tag_url = askbot['urls']['questions'] + '?tags=' + tagname;
             tag_link.attr('href', tag_url);
             tag_link.html(tagname);
-            var del_link = $('<img></img>');
+            var del_link = $('<span></span>');
             del_link.addClass('delete-icon');
-            del_link.attr('src', mediaUrl('media/images/close-small-dark.png'));
 
             setupTagDeleteEvents(del_link, to_target, tagname, reason, true);
 
@@ -133,32 +126,31 @@ function pickedTags(){
         }
     };
 
-    var collectPickedTags = function(){
-        var good_prefix = 'interesting-tag-';
-        var bad_prefix = 'ignored-tag-';
-        var good_re = RegExp('^' + good_prefix);
-        var bad_re = RegExp('^' + bad_prefix);
+    var collectPickedTags = function(section){
         interestingTags = {};
         ignoredTags = {};
-        $('.deletable-tag').each(
+        if (section === 'interesting'){
+            var reason = 'good';
+            var tag_store = interestingTags;
+        }
+        else if (section === 'ignored'){
+            var reason = 'bad';
+            var tag_store = ignoredTags;
+        }
+        else {
+            return;
+        }
+        $('.' + section + '.tags.marked-tags a.tag').each(
             function(i,item){
-                var item_id = $(item).attr('id');
-                var tag_name, tag_store;
-                if (good_re.test(item_id)){
-                    tag_name = item_id.replace(good_prefix,'');
-                    tag_store = interestingTags;
-                    reason = 'good';
-                }
-                else if (bad_re.test(item_id)){
-                    tag_name = item_id.replace(bad_prefix,'');
-                    tag_store = ignoredTags;
-                    reason = 'bad';
-                } 
-                else {
-                    return;
-                }
-                tag_store[tag_name] = $(item);
-                setupTagDeleteEvents($(item).find('img'),tag_store,tag_name,reason,true);
+                var tag_name = $(item).html();
+                tag_store[tag_name] = $(item).parent();
+                setupTagDeleteEvents(
+                    $(item).parent().find('.delete-icon'),
+                    tag_store,
+                    tag_name,
+                    reason,
+                    true
+                );
             }
         );
     };
@@ -176,7 +168,8 @@ function pickedTags(){
     };
     return {
         init: function(){
-            collectPickedTags();
+            collectPickedTags('interesting');
+            collectPickedTags('ignored');
             setupHideIgnoredQuestionsControl();
             $("#interestingTagInput, #ignoredTagInput").autocomplete(tags, {
                 minChars: 1,
diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index cb585d74..77e5b0c2 100755
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -336,6 +336,121 @@ blockquote {
     width: 100%;
 }
 
+/* tag formatting is also copy-pasted in template
+   because it must be the same in the emails
+   askbot/models/__init__.py:format_instant_notification_email()
+*/
+ul.tags,
+ul.tags.marked-tags,
+ul#related-tags {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    line-height: 170%;
+    display: block;
+}
+
+ul.tags li {
+    float:left;
+    display: block;
+    margin: 0 5px 0 0;
+    padding: 0;
+}
+
+ul.tags.marked-tags li {
+    margin-bottom: 5px;
+}
+
+#tagSelector div.inputs {
+    clear: both;
+    float: none;
+}
+
+.tags-page ul.tags li,
+ul#ab-user-tags li {
+    width: 160px;
+}
+
+ul#related-tags li {
+    margin: 0 5px 3px 0;
+    float: left;
+    clear: left;
+}
+
+/* .tag-left and .tag-right are for the sliding doors decoration of tags */
+.tag-left {
+    background: url(../images/tag-right.png) no-repeat right center;
+    border: none;
+    display: block;
+    float: left;
+    height: 18px;
+    margin: 0 5px 0 0;
+    overflow-x: hidden;
+    padding: 0;
+}
+
+.tag-right {
+    background: url(../images/tag-left.png) no-repeat left center;
+    border: none;
+    display: block;
+    float: left;
+    height: 18px;
+    line-height: 20px;
+    font-weight: normal;
+    font-size: 11px;
+    padding: 0px 7px 0px 15px;
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+.deletable-tag {
+    margin-right: 3px;
+    white-space: nowrap;
+}
+
+.deletable-tag .tag-right {
+    padding-right: 0px;
+    float: left;
+}
+.deletable-tag.tag-left {
+    padding-right: 3px;
+}
+
+.tags a.tag-right,
+.tags span.tag-right {
+    color: #333;
+    text-decoration: none;
+}
+
+span.delete-icon {
+    padding-left: 13px;
+    vertical-align: bottom;
+    background: url(../images/close-small-dark.png) no-repeat;
+}
+span.delete-icon:hover {
+    background: url(../images/close-small-hover.png) no-repeat;
+}
+
+.tags span.delete-icon {
+    float: left;
+    height: 15px;
+    margin: 2px 0 0 1px;
+    display: block;
+}
+
+.tag-number {
+    font-weight: 700;
+    display: block;
+    float: left;
+    font-family: sans-serif;
+}
+
+ul#search-tags {
+    padding-top: 3px;
+}
+
 .short-summary {
     position: relative;
     padding: 5px 2px 5px 2px;
@@ -469,7 +584,7 @@ blockquote {
 }
 
 .boxC p {
-    margin-bottom: 8px;
+    margin-bottom: 4px;
 }
 
 .boxC p.info-box-follow-up-links {
@@ -553,20 +668,6 @@ blockquote {
     padding: 5px 0 10px 0;
 }
 
-/* tag formatting is also copy-pasted in template
-   askbot/models/__init__.py:format_instant_notification_email()
-*/
-.tags {
-    font-family: sans-serif;
-    line-height: 170%;
-    display: block;
-    margin-top: 5px;
-}
-
-/*#search-tags .tag {
-    margin-left: 7px;
-}*/
-
 p.rss {
     float: right;
     font-size: 12px;
@@ -579,89 +680,6 @@ p.rss a {
     background: url(../images/feed-icon-small.png) no-repeat;
 }
 
-.tag-left {
-    background: url(../images/tag-right.png) no-repeat right center;
-    overflow-x: hidden;
-    padding: 2px 0;
-    margin: 0 5px 0 0;
-    border: none;
-}
-.tag-right {
-    background: url(../images/tag-left.png) no-repeat left center;
-    padding: 2px 7px 2px 15px;
-    white-space: nowrap;
-    font-size: 11px;
-    font-weight: normal;
-    color: #333;
-    text-decoration: none;
-    vertical-align: middle;
-    line-height: 16px;
-    border: none;
-}
-
-.deletable-tag .tag-right {
-    padding-right: 0px;
-}
-.deletable-tag.tag-left {
-    padding-right: 3px;
-}
-
-.tags a,
-.tags span.tag-right {
-    color: #333;
-    text-decoration: none;
-    vertical-align: middle;
-    border: none;
-}
-/*.tags a,
-.tags span.tag {
-    white-space: nowrap;
-    font-size: 11px;
-    font-weight: normal;
-    color: #333;
-    text-decoration: none;
-    background-color: #EEE;
-    border-left: 3px solid #777;
-    border-top: 1px solid #EEE;
-    border-bottom: 1px solid #CCC;
-    border-right: 1px solid #CCC;
-    padding: 1px 8px 1px 8px;
-    margin-right:3px;
-}
-
-.tags a:hover {
-    background-color: #fFF;
-    color: #333;
-}*/
-
-/*#question-list .tag {
-    margin-right: 6px;
-}*/
-
-span.delete-icon {
-    padding-left: 13px;
-    margin-left: -2px;
-    margin-right: 3px;
-    background: url(../images/close-small-dark.png) no-repeat;
-}
-span.delete-icon:hover {
-    background: url(../images/close-small-hover.png) no-repeat;
-}
-
-.tag-number {
-    font-weight: 700;
-    font-family: sans-serif;
-}
-
-.marked-tags {
-    margin: 5px 0;
-}
-
-.deletable-tag {
-    margin-right: 3px;
-    white-space: nowrap;
-}
-
 /* badges */
 a.medal {
     font-size: 14px;
@@ -1017,18 +1035,6 @@ div.comments {
     background: #F4E7E7 none repeat scroll 0 0;
 }
 
-/* tags */
-.tagsList {
-    margin: 0;
-    list-style-type: none;
-    padding: 0px;
-    padding-left: 5px;
-}
-
-.tagsList li {
-    width: 235px;
-    float: left;
-}
 
 .boxC ul {
     margin-left: 15px;
@@ -1361,7 +1367,7 @@ ins .post-tag {
     text-decoration: none;
 }
 
-.narrow  .tags {
+.narrow .tags {
     float: left;
 }
 
@@ -1716,12 +1722,6 @@ button::-moz-focus-inner {
     padding: 2px 3px 5px 3px;
 }
 
-.delete-icon {
-    vertical-align: middle;
-    padding-left: 1px;
-    margin-bottom:3px;
-}
-
 /* these need to go */
 table.form-as-table .errorlist {
     display: block;
@@ -1821,15 +1821,21 @@ ul.form-horizontal-rows li input {
 }
 
 .post-controls {
+    clear: left;
     float: left;
 }
 
-.post-tags {
-    margin-bottom:8px;
+ul.post-tags {
+    margin-left: 7px;
+}
+ul.post-tags li {
+    margin-top: 4px;
+    margin-bottom: 3px;
 }
 
-.post-retag {
+ul.post-retag {
     margin-bottom:0px;
+    margin-left:5px;
 }
 
 #question-controls .tags {
@@ -2108,7 +2114,7 @@ a.edit {
 .lit { color: #066; }
 .pun { color: #660; }
 .pln { color: #000; }
-.tag { color: #008; }
+.tag { color: #008; }/* name conflict here */
 .atn { color: #606; }
 .atv { color: #080; }
 .dec { color: #606; }
diff --git a/askbot/skins/default/templates/blocks/tag_selector.html b/askbot/skins/default/templates/blocks/tag_selector.html
index 8270f5ea..ffbab736 100644
--- a/askbot/skins/default/templates/blocks/tag_selector.html
+++ b/askbot/skins/default/templates/blocks/tag_selector.html
@@ -2,45 +2,37 @@
 {% import "macros.html" as macros %}
 <div id="tagSelector" class="boxC">
     <h2>{% trans %}Interesting tags{% endtrans %}</h2>
-    <div class="tags interesting marked-tags">
-    {% for tag_name in interesting_tag_names %}
-        {% spaceless %}
-        {{
-            macros.tag_widget(
-                tag_name,
-                id = "interesting-tag-" ~ tag_name,
-                deletable = True,
-                delete_link_title = _(
-                    "remove '%(tag_name)s' from the list of interesting tags"|
-                    format(tag_name = tag_name)
-                )
-            )
-        }}
-        {% endspaceless %}
-    {% endfor %}
+    {{ 
+        macros.tag_list_widget(
+            interesting_tag_names,
+            deletable = True,
+            css_class = 'interesting marked-tags'
+        )
+    }}
+    {# todo - add this via js
+        "remove '%(tag_name)s' from the list of interesting tags"|
+        format(tag_name = tag_name)
+    #}
+    <div class="inputs">
+        <input id="interestingTagInput" autocomplete="off" type="text"/>&nbsp;
+        <input id="interestingTagAdd" type="submit" value="{% trans %}Add{% endtrans %}"/>
     </div>
-    <input id="interestingTagInput" autocomplete="off" type="text"/>&nbsp;
-    <input id="interestingTagAdd" type="submit" value="{% trans %}Add{% endtrans %}"/>
     <h2>{% trans %}Ignored tags{% endtrans %}</h2>
-    <div class="tags ignored marked-tags">
-    {% for tag_name in ignored_tag_names %}
-        {% spaceless %}
-        {{
-            macros.tag_widget(
-                tag_name,
-                id = "interesting-tag-" ~ tag_name,
-                deletable = True,
-                delete_link_title = gettext(
-                    "remove '%(tag_name)s' from the list of ignored tags"|
-                    format(tag_name = tag_name)
-                )
-            )
-        }}
-        {% endspaceless %}
-    {% endfor %}
+    {{
+        macros.tag_list_widget(
+            ignored_tag_names,
+            deletable = True,
+            css_class = 'ignored marked-tags'
+        )
+    }}
+    {# todo: add this via javascript 
+        "remove '%(tag_name)s' from the list of ignored tags"|
+        format(tag_name = tag_name)
+    #}
+    <div class="inputs">
+        <input id="ignoredTagInput" autocomplete="off" type="text"/>&nbsp;
+        <input id="ignoredTagAdd" type="submit" value="{% trans %}Add{% endtrans%}"/>
     </div>
-    <input id="ignoredTagInput" autocomplete="off" type="text"/>&nbsp;
-    <input id="ignoredTagAdd" type="submit" value="{% trans %}Add{% endtrans%}"/>
     <p id="hideIgnoredTagsControl">
     <input id="hideIgnoredTagsCb" type="checkbox" {% if request.user.hide_ignored_questions %}checked="checked"{% endif %} />
     <label id="hideIgnoredTagsLabel" for="hideIgnoredTagsCb">{% trans %}keep ignored questions hidden{% endtrans %}</label>
diff --git a/askbot/skins/default/templates/macros.html b/askbot/skins/default/templates/macros.html
index 486d058c..028937f8 100644
--- a/askbot/skins/default/templates/macros.html
+++ b/askbot/skins/default/templates/macros.html
@@ -257,20 +257,48 @@ poor design of the data or methods on data objects #}
     {%- endif -%}
 {%- endmacro -%}
 
-{%- macro tag_widget(
+{%- macro tag_list_widget(
+            tags,
+            id = None,
+            deletable = False,
+            make_links = True,
+            url_params = None,
+            css_class = None
+        )
+-%}
+<ul {% if id %}id={{ id }}{% endif %}
+    class="tags{% if css_class %} {{css_class}}{% endif %}"
+>
+    {% if tags %}
+        {% for tag in tags %}
+            {{ tag_widget(
                 tag,
-                id = None,
-                deletable = False,
-                is_link = True,
-                delete_link_title = None,
-                url_params = None
-            ) %}
-    <span 
-        {% if id %}id="{{ id }}"{% endif %}
-        class="tag-left{% if deletable %} deletable-tag{% endif %}"
-    >
+                deletable = deletable,
+                is_link = make_links,
+                url_params = url_params,
+                html_tag = 'li'
+            )}}
+        {% endfor %}
+    {% endif %}
+</ul>
+{%- endmacro -%}
+
+{# todo: remove css_class argument because it is redundant #}
+{%- macro tag_widget(
+            tag,
+            deletable = False,
+            is_link = True,
+            delete_link_title = None,
+            url_params = None,
+            html_tag = 'div',
+            css_class = None,
+            extra_content = ''
+        )
+-%}
+    {% spaceless %}
+    <{{ html_tag }} class="tag-left{% if deletable %} deletable-tag{% endif %}">
         <{{ if_else(is_link, 'a', 'span') }}
-            class="tag tag-right"
+            class="tag tag-right{% if css_class %} {{ css_class }}{% endif %}"
             href="{% url questions %}?tags={{tag|urlencode}}{{ 
                                                         if_else(
                                                             url_params != None,
@@ -280,14 +308,15 @@ poor design of the data or methods on data objects #}
                                                     }}"
             title="{% trans %}see questions tagged '{{ tag }}'{% endtrans %}" rel="tag">{{ tag }}</{{ if_else(is_link, 'a', 'span') }}>
         {% if deletable %}
-            <img class="delete-icon"
-                src="{{'/images/close-small-dark.png'|media}}"
+            <span class="delete-icon"
                 {% if delete_link_title %}
                     title="{{ delete_link_title }}"
                 {% endif %}
-            />
+            ></span>
         {% endif %}
-    </span>
+    </{{ html_tag }}>
+    {{ extra_content }}
+    {% endspaceless %}
 {%- endmacro -%}
 
 {%- macro question_summary(question, extra_class=None) -%}
@@ -344,13 +373,7 @@ poor design of the data or methods on data objects #}
             </div>
         </div>
         <h2><a title="{{question.summary|escape}}" href="{{ question.get_absolute_url() }}">{{question.get_question_title()|escape}}</a></h2>
-        {% spaceless %}
-        <div class="tags">
-            {% for tag in question.get_tag_names() %}
-                {{ tag_widget(tag) }}
-            {% endfor %}
-        </div>
-        {% endspaceless %}
+        {{ tag_list_widget(question.get_tag_names()) }}
     </div>
 {%- endmacro -%}
 
@@ -367,10 +390,9 @@ poor design of the data or methods on data objects #}
             <a class="edit">{% trans %}edit{% endtrans %}</a>
         {% endif %}
         {% if user|can_delete_comment(comment) %}
-            <img class="delete-icon" 
-                src="{{"/images/close-small.png"|media}}"
+            <span class="delete-icon" 
                 title="{% trans %}delete this comment{% endtrans %}"
-            />
+            ></span>
         {% endif %}
     </div>
     {% endfor %}
diff --git a/askbot/skins/default/templates/main_page/headline.html b/askbot/skins/default/templates/main_page/headline.html
index 4e47f217..130a9bd9 100644
--- a/askbot/skins/default/templates/main_page/headline.html
+++ b/askbot/skins/default/templates/main_page/headline.html
@@ -17,18 +17,13 @@
             {% trans %}with {{author_name}}'s contributions{% endtrans %}
         {% endif %}
         </h1>
-        {% spaceless %}
-        <div id="search-tags" class="tags">
-        {% if search_tags %}
-            {% for tag in search_tags %}
-            <span class="tag-left">
-                <span class="tag tag-right">{{tag}}</span>
-                <span class="delete-icon"></span>
-            </span>
-            {% endfor %}
-        {% endif %}
-        </div>
-        {% endspaceless %}
+        {{ macros.tag_list_widget(
+                search_tags,
+                id = 'search-tags',
+                deletable = True,
+                make_links = False
+            )
+        }}
         {% if author_name or search_tags or query %}
             <p class="search-tips">{% trans %}Search tips:{% endtrans %}
             {% if reset_method_count > 1 %}
diff --git a/askbot/skins/default/templates/main_page/sidebar.html b/askbot/skins/default/templates/main_page/sidebar.html
index baedb25d..52d107af 100644
--- a/askbot/skins/default/templates/main_page/sidebar.html
+++ b/askbot/skins/default/templates/main_page/sidebar.html
@@ -20,13 +20,18 @@
     {% cache 0 "tags" tags search_tags scope sort query context.page context.page_size language_code %}
     <div class="boxC">
         <h2>{% trans %}Related tags{% endtrans %}</h2>
-        <div id="related-tags" class="tags">
+        <ul id="related-tags" class="tags">
             {% for tag in tags %}
-                {{ macros.tag_widget(tag.name) }}
-                <span class="tag-number">&#215; {{ tag.local_used_count|intcomma }}</span>
-                <br />
+                <li>
+                    {{ macros.tag_widget(
+                        tag.name,
+                        html_tag = 'div',
+                        extra_content = '<span class="tag-number">&#215; ' ~
+                            tag.local_used_count|intcomma ~ '</span>'
+                    )}}
+                </li>
             {% endfor %}
-        </div>
+        </ul>
     </div>
     {% endcache %}
 {% endif %}
diff --git a/askbot/skins/default/templates/question.html b/askbot/skins/default/templates/question.html
index 7eb21d21..87209147 100644
--- a/askbot/skins/default/templates/question.html
+++ b/askbot/skins/default/templates/question.html
@@ -77,77 +77,78 @@
                 <div class="question-body">
                     {{question.html}}
                 </div>
-                    {% spaceless %}
-                    <div id="question-tags" class="post-tags tags">
-                        {% for tag in question.get_tag_names() %}
-                            <a href="{% url questions %}?tags={{tag|urlencode}}&amp;start_over=true" 
-                                class="post-tag"
-                                title="{% trans %}see questions tagged '{{tag}}'{% endtrans %}" rel="tag">{{ tag }}</a>
-                        {% endfor %}
-                    </div>
-                    {% endspaceless %}
-                    <div id="question-controls" class="post-controls">
-                        {% set pipe=joiner('<span class="sep">|</span>') %}
-                        {% if request.user|can_edit_post(question) %}{{ pipe() }}
-                            <a href="{% url edit_question question.id %}">{% trans %}edit{% endtrans %}</a>
-                        {% endif %}
-                        {% if request.user|can_retag_question(question) %}{{ pipe() }}
-                            <a id="retag" href="{% url retag_question question.id %}">{% trans %}retag{% endtrans %}</a>
-                            <script type="text/javascript">
-                                var retagUrl = "{% url retag_question question.id %}";
-                            </script>
-                        {% endif %}
-                        {% if question.closed %}
-                            {% if request.user|can_reopen_question(question) %}{{ pipe() }}
-                            <a href="{% url reopen question.id %}">{% trans %}reopen{% endtrans %}</a>
-                            {% endif %}
-                        {% else %}
-                            {% if request.user|can_close_question(question) %}{{ pipe() }}
-                            <a href="{% url close question.id %}">{% trans %}close{% endtrans %}</a>
-                            {% endif %}
+                <ul id="question-tags" class="post-tags tags">
+                    {% for tag in question.get_tag_names() %}
+                        {{ macros.tag_widget(
+                                tag,
+                                css_class = 'post-tag',
+                                html_tag = 'li'
+                            )
+                        }}
+                    {% endfor %}
+                </ul>
+                <div id="question-controls" class="post-controls">
+                    {% set pipe=joiner('<span class="sep">|</span>') %}
+                    {% if request.user|can_edit_post(question) %}{{ pipe() }}
+                        <a href="{% url edit_question question.id %}">{% trans %}edit{% endtrans %}</a>
+                    {% endif %}
+                    {% if request.user|can_retag_question(question) %}{{ pipe() }}
+                        <a id="retag" href="{% url retag_question question.id %}">{% trans %}retag{% endtrans %}</a>
+                        <script type="text/javascript">
+                            var retagUrl = "{% url retag_question question.id %}";
+                        </script>
+                    {% endif %}
+                    {% if question.closed %}
+                        {% if request.user|can_reopen_question(question) %}{{ pipe() }}
+                        <a href="{% url reopen question.id %}">{% trans %}reopen{% endtrans %}</a>
                         {% endif %}
-                        {% if request.user|can_flag_offensive(question) %}{{ pipe() }}
-                        <span id="question-offensive-flag-{{ question.id }}" class="offensive-flag" 
-                            title="{% trans %}report as offensive (i.e containing spam, advertising, malicious text, etc.){% endtrans %}">
-                            <a>{% trans %}flag offensive{% endtrans %}</a>
-                            {% if request.user|can_see_offensive_flags(question) %}
-                                <span class="darkred">{% if question.offensive_flag_count > 0 %}({{ question.offensive_flag_count }}){% endif %}</span>
-                            {% endif %}
-                        </span>
+                    {% else %}
+                        {% if request.user|can_close_question(question) %}{{ pipe() }}
+                        <a href="{% url close question.id %}">{% trans %}close{% endtrans %}</a>
                         {% endif %}
-                        {% if request.user|can_delete_post(question) %}{{ pipe() }}
-                            <a id="question-delete-link-{{question.id}}">{% if question.deleted %}{% trans %}undelete{% endtrans %}{% else %}{% trans %}delete{% endtrans %}{% endif %}</a>
+                    {% endif %}
+                    {% if request.user|can_flag_offensive(question) %}{{ pipe() }}
+                    <span id="question-offensive-flag-{{ question.id }}" class="offensive-flag" 
+                        title="{% trans %}report as offensive (i.e containing spam, advertising, malicious text, etc.){% endtrans %}">
+                        <a>{% trans %}flag offensive{% endtrans %}</a>
+                        {% if request.user|can_see_offensive_flags(question) %}
+                            <span class="darkred">{% if question.offensive_flag_count > 0 %}({{ question.offensive_flag_count }}){% endif %}</span>
                         {% endif %}
-                    </div>
-                    <div class="post-update-info-container">
-                            {{ 
-                                macros.post_contributor_info(
-                                                question,
-                                                "original_author",
-                                                question.wiki,
-                                                settings.MIN_REP_TO_EDIT_WIKI
-                                            )
-                            }}
-                            {{ 
-                                macros.post_contributor_info(
-                                                question,
-                                                "last_updater",
-                                                question.wiki,
-                                                settings.MIN_REP_TO_EDIT_WIKI,
-                                            )
-                            }}
-                    </div>
-                    {{
-                        macros.post_comments_widget(
-                                post = question,
-                                show_post = show_post,
-                                show_comment = show_comment,
-                                comment_order_number = comment_order_number,
-                                user = request.user,
-                                max_comments = settings.MAX_COMMENTS_TO_SHOW
-                            )
-                    }}
+                    </span>
+                    {% endif %}
+                    {% if request.user|can_delete_post(question) %}{{ pipe() }}
+                        <a id="question-delete-link-{{question.id}}">{% if question.deleted %}{% trans %}undelete{% endtrans %}{% else %}{% trans %}delete{% endtrans %}{% endif %}</a>
+                    {% endif %}
+                </div>
+                <div class="post-update-info-container">
+                        {{ 
+                            macros.post_contributor_info(
+                                            question,
+                                            "original_author",
+                                            question.wiki,
+                                            settings.MIN_REP_TO_EDIT_WIKI
+                                        )
+                        }}
+                        {{ 
+                            macros.post_contributor_info(
+                                            question,
+                                            "last_updater",
+                                            question.wiki,
+                                            settings.MIN_REP_TO_EDIT_WIKI,
+                                        )
+                        }}
                 </div>
+                {{
+                    macros.post_comments_widget(
+                            post = question,
+                            show_post = show_post,
+                            show_comment = show_comment,
+                            comment_order_number = comment_order_number,
+                            user = request.user,
+                            max_comments = settings.MAX_COMMENTS_TO_SHOW
+                        )
+                }}
+                <!--/div-->
             </td>
         </tr>
     </table>
@@ -375,15 +376,21 @@
     <p>
         {% trans %}Question tags{% endtrans %}:
     </p>
-    <p class="tags" >
+    <ul id="related-tags" class="tags">
         {% for tag in tags %}
-        <a href="{% url questions %}?tags={{tag.name|urlencode}}&amp;start_over=true" 
-            title="{% trans tag_name=tag.name %}see questions tagged '{{tag_name}}'{% endtrans %}" 
-            rel="tag">{{ tag.name }}</a> 
-            <span class="tag-number">&#215;{{ tag.used_count|intcomma }}</span><br/>
+        <li>
+            {{ macros.tag_widget(
+                    tag,
+                    html_tag = 'div',
+                    url_params = 'start_over=true',
+                    extra_content = '<span class="tag-number">&#215; ' ~
+                        tag.used_count|intcomma ~ '</span>'
+                )
+            }}
+        </li>
         {% endfor %}
-    </p>
-    <p>
+    </ul>
+    <p style="clear:left">
         {% trans %}question asked{% endtrans %}: <strong title="{{ question.added_at }}">{{question.added_at|diff_date}}</strong>
     </p>
     <p> 
diff --git a/askbot/skins/default/templates/tags.html b/askbot/skins/default/templates/tags.html
index 267da771..7db9a8c8 100644
--- a/askbot/skins/default/templates/tags.html
+++ b/askbot/skins/default/templates/tags.html
@@ -30,15 +30,20 @@
     {% endif %}
 </p>
 {% if tags.object_list %}
-<ul class="tagsList tags">
-{% for tag in tags.object_list %}
-   <li>
-    {{ macros.tag_widget(tag.name, url_params = 'start_over=true') }}&nbsp;
-    <span class="tag-number">&#215; {{ tag.used_count|intcomma }}</span>
-    <br/>
-    </li>
-{% endfor %}
-</ul>
+    <ul class='tags'>
+        {% for tag in tags.object_list %}
+        <li>
+            {{ macros.tag_widget(
+                        tag = tag.name,
+                        url_params = 'start_over=true',
+                        html_tag = 'div',
+                        extra_content = '<span class="tag-number">&#215; ' ~
+                                        tag.used_count|intcomma ~ '</span>'
+                )
+            }}
+        </li>
+        {% endfor %}
+    </ul>
 {% endif %}
 <div class="pager">
     {{macros.paginator(paginator_context)}}
diff --git a/askbot/skins/default/templates/user_profile/user_stats.html b/askbot/skins/default/templates/user_profile/user_stats.html
index 677fc69e..02849df1 100644
--- a/askbot/skins/default/templates/user_profile/user_stats.html
+++ b/askbot/skins/default/templates/user_profile/user_stats.html
@@ -65,20 +65,31 @@
         <div class="user-stats-table">
             <table class="tags">
                 <tr>
-                    <td width="180" valign="top">
+                    <td valign="top">
+                        <ul id="ab-user-tags" class="tags">
                         {% for tag in user_tags %}
+                            <li>
                             {{ macros.tag_widget(
                                 tag.name,
-                                url_params = "author=" ~ view_user.id ~
-                                            "&start_over=true"
+                                html_tag = 'div',
+                                url_params = 
+                                    "author=" ~ view_user.id ~
+                                    "&start_over=true",
+                                extra_content = 
+                                    '<span class="tag-number">&#215; ' ~
+                                    tag.user_tag_usage_count|intcomma ~
+                                    '</span>'
                                )
                             }}
-                            <span class="tag-number">&#215; {{ tag.user_tag_usage_count|intcomma }}</span><br/>
+                            </li>
+                            {#
                             {% if loop.index is divisibleby 10 %}
                                 </td>
                                 <td width="180"  valign="top">
                             {% endif %}
+                            #}
                         {% endfor %}
+                        </ul>
                     </td>
                 </tr>
             </table>
diff --git a/askbot/templatetags/extra_filters_jinja.py b/askbot/templatetags/extra_filters_jinja.py
index 545b6fc9..8e394345 100644
--- a/askbot/templatetags/extra_filters_jinja.py
+++ b/askbot/templatetags/extra_filters_jinja.py
@@ -24,8 +24,6 @@ def country_display_name(country_code):
 
 @register.filter
 def country_flag_url(country_code):
-    import pdb
-    pdb.set_trace()
     return countries_settings.FLAG_URL % country_code
 
 @register.filter