Redesigned threads list for Cranefly

static/cranefly/css/cranefly.css

@@ -931,10 +931,9 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown hr{border:none;border-top:1px solid #eeeeee;}
 .index-sidebar{position:relative;bottom:9px;}
 .index-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.index-category table{margin:0px;}.index-category table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
-.index-category table .forum-icon{width:1%;}.index-category table .forum-icon .forum-icon-wrap{background-color:#8c8c8c;border:1px solid #737373;border-radius:3px;padding:3px 4px;}.index-category table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#0088cc;border:1px solid #006699;}
+.index-category table .forum-icon{width:1%;}.index-category table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.index-category table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .index-category table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
-.index-category table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;line-height:20px;}.index-category table .forum-main h3 a:link,.index-category table .forum-main h3 a:visited{color:#8c8c8c;}
-.index-category table .forum-main h3.forum-title-new a:link,.index-category table .forum-main h3.forum-title-new a:visited{color:#333333;}
+.index-category table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.index-category table .forum-main h3 a:link,.index-category table .forum-main h3 a:visited{color:#333333;}
 .index-category table .forum-main .forum-details{float:right;color:#999999;font-weight:bold;}.index-category table .forum-main .forum-details .label{position:relative;bottom:1px;}
 .index-category table .forum-main .forum-description{clear:both;margin:0px;padding:0px;color:#8c8c8c;font-size:11.9px;}
 .index-category.index-category-important caption{background-color:#cf402e;border:1px solid #ba3a29;text-shadow:0px 1px 0px #672017;}
@@ -997,10 +996,9 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .news-feed .media .media-body .media-footer{margin:0px;color:#999999;font-size:10.5px;font-weight:normal;}.news-feed .media .media-body .media-footer a{color:#555555;}
 .news-feed hr{border:none;border-top:1px solid #eeeeee;margin:20px 0px;}
 .category-forums-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.category-forums-list table{margin:0px;}.category-forums-list table tr:first-child td{border-top:none;}
-.category-forums-list table .forum-icon{width:1%;}.category-forums-list table .forum-icon .forum-icon-wrap{background-color:#8c8c8c;border:1px solid #737373;border-radius:3px;padding:3px 4px;}.category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#0088cc;border:1px solid #006699;}
+.category-forums-list table .forum-icon{width:1%;}.category-forums-list table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
 .category-forums-list table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
-.category-forums-list table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;line-height:20px;}.category-forums-list table .forum-main h3 a:link,.category-forums-list table .forum-main h3 a:visited{color:#8c8c8c;}
-.category-forums-list table .forum-main h3.forum-title-new a:link,.category-forums-list table .forum-main h3.forum-title-new a:visited{color:#333333;}
+.category-forums-list table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.category-forums-list table .forum-main h3 a:link,.category-forums-list table .forum-main h3 a:visited{color:#333333;}
 .category-forums-list table .forum-main .forum-details{float:right;color:#999999;font-weight:bold;}.category-forums-list table .forum-main .forum-details .label{position:relative;bottom:1px;}
 .category-forums-list table .forum-main .forum-description{clear:both;margin:0px;padding:0px;color:#8c8c8c;font-size:11.9px;}
 .category-forums-list.category-forums-important{border:1px solid #902d20;-webkit-box-shadow:0px 0px 0px 3px #cf402e;-moz-box-shadow:0px 0px 0px 3px #cf402e;box-shadow:0px 0px 0px 3px #cf402e;}
@@ -1017,6 +1015,27 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .user-profile .content-list .media{overflow:auto;}.user-profile .content-list .media .media-object{border-radius:3px;width:52px;height:52px;}
 .user-profile .content-list .media .media-body{margin-left:66px;}.user-profile .content-list .media .media-body .post-preview:link,.user-profile .content-list .media .media-body .post-preview:active,.user-profile .content-list .media .media-body .post-preview:visited,.user-profile .content-list .media .media-body .post-preview:hover{display:block;margin-top:7px;color:#333333;font-size:16.8px;text-decoration:none;}
 .user-profile .content-list .media .media-body .media-footer{margin:0px;color:#999999;font-size:10.5px;font-weight:normal;}.user-profile .content-list .media .media-body .media-footer a{color:#555555;}
+.forum-subforums-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.forum-subforums-list table{margin:0px;}.forum-subforums-list table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
+.forum-subforums-list table .forum-icon{width:1%;}.forum-subforums-list table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.forum-subforums-list table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
+.forum-subforums-list table .forum-icon .forum-icon-wrap.forum-icon-redirect{background-color:#9466c6;border:1px solid #7a43b6;}
+.forum-subforums-list table .forum-main h3{float:left;margin:0px;padding:0px;font-size:17.5px;font-weight:normal;line-height:20px;}.forum-subforums-list table .forum-main h3 a:link,.forum-subforums-list table .forum-main h3 a:visited{color:#333333;}
+.forum-subforums-list table .forum-main .forum-details{float:right;color:#999999;font-weight:bold;}.forum-subforums-list table .forum-main .forum-details .label{position:relative;bottom:1px;}
+.forum-subforums-list table .forum-main .forum-description{clear:both;margin:0px;padding:0px;color:#8c8c8c;font-size:11.9px;}
+.forum-subforums-list.forum-subforums-important caption{background-color:#cf402e;border:1px solid #ba3a29;text-shadow:0px 1px 0px #672017;}
+.forum-threads-list{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.forum-threads-list table{margin:0px;}.forum-threads-list table th{background-color:#fbfbfb;border-bottom:1px solid #eeeeee;padding:2px 10px;color:#999999;font-size:11.9px;}
+.forum-threads-list table td{vertical-align:middle;}.forum-threads-list table td .thread-icon:link,.forum-threads-list table td .thread-icon:active,.forum-threads-list table td .thread-icon:visited,.forum-threads-list table td .thread-icon:hover{background-color:#555555;border:1px solid #2f2f2f;border-radius:3px;padding:3px 4px;}.forum-threads-list table td .thread-icon:link.thread-new,.forum-threads-list table td .thread-icon:active.thread-new,.forum-threads-list table td .thread-icon:visited.thread-new,.forum-threads-list table td .thread-icon:hover.thread-new{background-color:#cf402e;border:1px solid #902d20;}
+.forum-threads-list table td .thread-icon i{background-image:url("../img/glyphicons-halflings-white.png");}
+.forum-threads-list table td .thread-name{color:#333333;font-weight:bold;}
+.forum-threads-list table td .thread-details,.forum-threads-list table td .thread-last-reply{color:#999999;}.forum-threads-list table td .thread-details a:link,.forum-threads-list table td .thread-last-reply a:link,.forum-threads-list table td .thread-details a:visited,.forum-threads-list table td .thread-last-reply a:visited{color:#333333;}
+.forum-threads-list table td .thread-details{font-size:10.5px;}
+.forum-threads-list table td .thread-flags{float:right;margin:0px;opacity:0.8;filter:alpha(opacity=80);padding:0px;}.forum-threads-list table td .thread-flags li{margin-left:3px;float:left;}
+.forum-threads-list table td .thread-rating{background-color:#eeeeee;border-radius:3px;padding:4px;color:#999999;font-size:17.5px;font-weight:bold;text-align:center;}.forum-threads-list table td .thread-rating.thread-rating-negative,.forum-threads-list table td .thread-rating.thread-rating-positive{color:#ffffff;}
+.forum-threads-list table td .thread-rating.thread-rating-negative{background-color:#cf402e;}
+.forum-threads-list table td .thread-rating.thread-rating-positive{background-color:#46a546;}
+.forum-threads-list table th.check-cell,.forum-threads-list table td.check-cell{width:1%;text-align:center;vertical-align:middle;}.forum-threads-list table th.check-cell .checkbox,.forum-threads-list table td.check-cell .checkbox{margin:0px;padding:0px;}.forum-threads-list table th.check-cell .checkbox input,.forum-threads-list table td.check-cell .checkbox input{margin:0px;padding:0px;position:relative;top:3px;}
+.forum-threads-list table th.check-cell input{right:2px;}
+.forum-threads-list .threads-actions{background-color:#fbfbfb;border-top:1px solid #d5d5d5;border-radius:0px 0px 2px 2px;overflow:auto;padding:4px;color:#999999;font-size:11.9px;}.forum-threads-list .threads-actions form{margin-bottom:0px;}
+.forum-threads-extra{overflow:auto;}.forum-threads-extra.extra-top{margin-bottom:20px;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
 .index-rank-mvp ul li{background-color:#1a93c5;border-color:#037fb3;}.index-rank-mvp ul li a:link,.index-rank-mvp ul li a:active,.index-rank-mvp ul li a:visited,.index-rank-mvp ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #011f2c;}

static/cranefly/css/cranefly.less

@@ -86,6 +86,7 @@
 @import "cranefly/newsfeed.less";
 @import "cranefly/category.less";
 @import "cranefly/profiles.less";
+@import "cranefly/forum.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/category.less

@@ -45,16 +45,11 @@
         padding: 0px;
 
         font-size: @fontSizeLarge;
+        font-weight: normal;
         line-height: @baseLineHeight;
 
         a:link, a:visited {
-          color: lighten(@textColor, 35%);
-        }
-
-        &.forum-title-new {
-          a:link, a:visited {
-            color: @textColor;
-          }
+          color: @textColor;
         }
       }
 

static/cranefly/css/cranefly/forum.less

@@ -0,0 +1,241 @@
+// Forum View
+// -------------------------
+
+// Subforums list
+.forum-subforums-list {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+
+  table {
+    margin: 0px;
+
+    caption {
+      background-color: @categoryHeader;
+      border: 1px solid darken(@categoryHeader, 5%);
+      border-radius: @borderRadiusSmall @borderRadiusSmall 0px 0px;
+      margin: -1px;
+      padding: @paddingSmall;
+
+      color: @white;
+      font-size: @fontSizeSmall;
+      font-weight: bold;
+      text-align: left;
+      text-shadow: 0px 1px 0px darken(@categoryHeader, 25%);
+    }
+    
+    .forum-icon {
+      width: 1%;
+
+      .forum-icon-wrap {
+        background-color: @itemOldColor;
+        border: 1px solid darken(@itemOldColor, 10%);
+        border-radius: @baseBorderRadius;
+        padding: (@forumIconSize - 1px) @forumIconSize;
+
+        &.forum-icon-new {
+          background-color: @itemNewColor;
+          border: 1px solid darken(@itemNewColor, 10%);
+        }
+
+        &.forum-icon-redirect {
+          background-color: @itemMovedColor;
+          border: 1px solid darken(@itemMovedColor, 10%);
+        }
+      }
+    }
+    
+    .forum-main {
+      h3 {
+        float: left;
+        margin: 0px;
+        padding: 0px;
+
+        font-size: @fontSizeLarge;
+        font-weight: normal;
+        line-height: @baseLineHeight;
+
+        a:link, a:visited {
+          color: @textColor;
+        }
+      }
+
+      .forum-details {
+        float: right;
+
+        color: @grayLight;
+        font-weight: bold;
+
+        .label {
+          position: relative;
+          bottom: 1px;
+        }
+      }
+
+      .forum-description {
+        clear: both;
+        margin: 0px;
+        padding: 0px;
+
+        color: lighten(@textColor, 35%);
+        font-size: @fontSizeSmall;
+      }
+    }
+  }
+
+  &.forum-subforums-important {
+    caption {
+      background-color: @red;
+      border: 1px solid darken(@red, 5%);
+
+      text-shadow: 0px 1px 0px darken(@red, 25%);
+    }
+  }
+}
+
+// Threads list
+.forum-threads-list {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+
+  table {
+    margin: 0px;
+
+    th {
+      background-color: @bodyBackground;
+      border-bottom: 1px solid @grayLighter;
+      padding: @paddingSmall;
+
+      color: @grayLight;
+      font-size: @fontSizeSmall;
+    }
+
+    td {
+      vertical-align: middle;
+
+      .thread-icon {
+        &:link, &:active, &:visited, &:hover {
+          background-color: @itemOldColor;
+          border: 1px solid darken(@itemOldColor, 15%);
+          border-radius: @baseBorderRadius;
+          padding: 3px 4px;
+
+          &.thread-new {
+            background-color: @itemNewColor;
+            border: 1px solid darken(@itemNewColor, 15%);
+          }
+        }
+
+        i {
+          background-image: url("@{iconWhiteSpritePath}");
+        }
+      }
+
+      .thread-name {
+        color: @textColor;
+        font-weight: bold;
+      }
+
+      .thread-details, .thread-last-reply {
+        color: @grayLight;
+
+        a:link, a:visited {
+          color: @textColor;
+        }
+      }
+
+      .thread-details {
+        font-size: @fontSizeMini;
+      }
+
+      .thread-flags {
+        float: right;
+        margin: 0px;
+        .opacity(80);
+        padding: 0px;
+
+        li {
+          margin-left: 3px;
+          float: left;
+        }
+      }
+
+      .thread-rating {
+        background-color: @grayLighter;
+        border-radius: @baseBorderRadius;
+        padding: 4px;
+
+        color: @grayLight;
+        font-size: @fontSizeLarge;
+        font-weight: bold;
+        text-align: center;
+
+        &.thread-rating-negative, &.thread-rating-positive {
+          color: @white;
+        }
+
+        &.thread-rating-negative {
+          background-color: @red;
+        }
+
+        &.thread-rating-positive {
+          background-color: @green;
+        }
+      }
+    }
+
+    th, td {
+      &.check-cell {
+        width: 1%;
+        text-align: center;
+        vertical-align: middle;
+
+        .checkbox {
+          margin: 0px;
+          padding: 0px;
+
+          input {
+            margin: 0px;
+            padding: 0px;
+            position: relative;
+            top: 3px;
+          }
+        }
+      }
+    }
+
+    th.check-cell {
+      input{
+        right: 2px;
+      }
+    }
+  }
+
+  .threads-actions {
+    background-color: @bodyBackground;
+    border-top: 1px solid @categoryBorder;
+    border-radius: 0px 0px @borderRadiusSmall @borderRadiusSmall;
+    overflow: auto;
+    padding: 4px;
+
+    color: @grayLight;
+    font-size: @fontSizeSmall;
+
+    form {
+      margin-bottom: 0px;
+    }
+  }
+}
+
+.forum-threads-extra {
+  overflow: auto;
+
+  &.extra-top {
+    margin-bottom: @baseLineHeight;
+  }
+}

static/cranefly/css/cranefly/index.less

@@ -61,17 +61,12 @@
     		padding: 0px;
 
     		font-size: @fontSizeLarge;
+        font-weight: normal;
     		line-height: @baseLineHeight;
 
-    		a:link, a:visited {
-    		  color: lighten(@textColor, 35%);
-    		}
-
-    		&.forum-title-new {
-          a:link, a:visited {
-    		    color: @textColor;
-    		  }
-    		}
+        a:link, a:visited {
+          color: @textColor;
+        }
       }
 
       .forum-details {

static/cranefly/css/variables.less

@@ -82,8 +82,8 @@
 
 // Items styles
 // -------------------------
-@itemOldColor:                      darken(@grayLight, 5%);
-@itemNewColor:                      @linkColor;
+@itemOldColor:                      @gray;
+@itemNewColor:                      @red;
 @itemMovedColor:                    lighten(@purple, 10%);
 
 // Board index forums list

templates/cranefly/threads/list.html

@@ -8,129 +8,188 @@
 
 {% block breadcrumb %}{{ super() }} <span class="divider"><i class="icon-chevron-right"></i></span></li>
 {% for parent in parents %}
-<li><a href="{{ parent.type|url(forum=parent.pk, slug=parent.slug) }}">{{ parent.name }}</a> <span class="divider">/</span></li>
+<li><a href="{{ parent.type|url(forum=parent.pk, slug=parent.slug) }}">{{ parent.name }}</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
 {% endfor %}
 <li class="active">{{ forum.name }}
 {%- endblock %}
 
-{% block content %}
-<div class="page-header">
-  <ul class="breadcrumb">
-    {{ self.breadcrumb() }}</li>
-  </ul>
-  <h1>{{ forum.name }}{% if forum.description %}<br><small>{{ forum.description }}</small>{% endif %}</h1>
-</div>
-{% if forum.subforums %}
-<div class="forums-list subforums-list">
-  <h3>{% trans %}Subforums{% endtrans %}:</h3>
-  <div class="category{% if forum.style %} {{ forum.style }}{% endif %}">
-    {{ macros.draw_forums(forum, 12) }}
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {{ messages_list(messages) }}
+    <ul class="breadcrumb">
+      {{ self.breadcrumb() }}</li>
+    </ul>
+    <h1>{{ forum.name }}</h1>
   </div>
 </div>
-{% endif %}
-      
-{% if message %}{{ macros.draw_message(message) }}{% endif %}
-<div class="list-nav">
-  {{ pager() }}
-  {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
-  <ul class="nav nav-pills pull-right">
-    <li class="primary"><a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a></li>
-  </ul>
+
+<div class="container container-primary">
+
+  {% if forum.description %}
+  <div class="markdown lead page-description">
+    {{ forum.description_preparsed|markdown_final|safe }}
+  </div>
   {% endif %}
-</div>
-<table class="table table-striped threads-list">
-  <thead>
-    <tr>
-      <th style="width: 1%;">&nbsp;</th>
-      <th>{% trans %}Thread{% endtrans %}</th>
-      <th>{% trans %}Author{% endtrans %}</th>
-      <th>{% trans %}Replies{% endtrans %}</th>
-      <th>{% trans %}Last Poster{% endtrans %}</th>
-      {% if user.is_authenticated() and list_form %}
-      <th class="check-cell"><label class="checkbox"><input type="checkbox" class="checkbox-master"></label></th>
-      {% endif %}
-    </tr>
-  </thead>
-  <tbody>
-    {% for thread in threads %}
-    <tr>
-      <td><span class="thread-icon{% if not thread.is_read %} {% if thread.closed %}thread-closed{% else %}thread-new{% endif %}{% endif %}"><i class="icon-comment icon-white"></i></span></td>
-      <td>
-        {% if thread.weight > 0 %}<strong>
-        {% if thread.weight == 2 %}
-        <i class="icon-fire"></i> {% trans %}Annoucement:{% endtrans %}
-        {%- else -%}
-        <i class="icon-asterisk"></i> {% trans %}Sticky:{% endtrans %}
-        {%- endif %}</strong> {% endif %}<a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}">{% if not thread.is_read %}<strong>{{ thread.name }}</strong>{% else %}{{ thread.name }}{% endif %}</a> {% if not user.is_crawler() %}{% if not thread.is_read -%}
-        <a href="{% url 'thread_new' thread=thread.pk, slug=thread.slug %}" class="jump jump-new tooltip-top" title="{% trans %}Jump to first unread post{% endtrans %}"><i class="icon-chevron-right"></i></a>
-        {%- else -%}
-        <a href="{% url 'thread_last' thread=thread.pk, slug=thread.slug %}" class="jump jump-last tooltip-top" title="{% trans %}Jump to last post{% endtrans %}"><i class="icon-chevron-right"></i></a>
-        {%- endif %}{% endif %}
-        <ul class="unstyled thread-flags">
-          {% if thread.closed %}<li><span class="tooltip-top" title="{% trans %}This thread is closed for new replies.{% endtrans %}"><i class="icon-lock"></i></span></li>{% endif %}
-          {% if thread.moderated %}<li><span class="tooltip-top" title="{% trans %}This thread will not be visible to other members until moderator reviews it.{% endtrans %}"><i class="icon-eye-close"></i></span></li>{% endif %}
-          {% if thread.deleted %}<li><span class="tooltip-top" title="{% trans %}This thread has been deleted.{% endtrans %}"><i class="icon-remove"></i></span></li>{% endif %}
-        </ul>
-      </td>
-      <td class="span3 thread-author"><span class="tooltip-top" title="{{ thread.start|reltimesince }}">{% if thread.start_poster_id -%}
-          {% if settings.avatars_on_threads_list %}<img src="{{ thread.start_poster.get_avatar(24) }}" alt="" class="avatar-tiny"> {% endif %}<a href="{% url 'user' user=thread.start_poster_id, username=thread.start_poster_slug %}">{{ thread.start_poster_name }}</a>
-          {%- else -%}
-          {% if settings.avatars_on_threads_list %}<img src="{{ macros.avatar_guest(24) }}" alt="" class="avatar-tiny"> {% endif %}<em class="muted">{{ thread.start_poster_name }}</em>
-      {% endif %}</span></td>
-      <td class="span1 thread-stat">{{ thread.replies|intcomma }}</td>
-      <td class="span3 thread-poster"><span class="tooltip-top" title="{{ thread.last|reltimesince }}">{% if thread.last_poster_ignored -%}
-          {% if settings.avatars_on_threads_list %}<img src="{{ macros.avatar_guest(24) }}" alt="" class="avatar-tiny"> {% endif %}<em class="muted">{% trans %}Ignored Member{% endtrans %}</em>
-          {%- elif thread.last_poster_id -%}
-          {% if settings.avatars_on_threads_list %}<img src="{{ thread.last_poster.get_avatar(24) }}" alt="" class="avatar-tiny"> {% endif %}<a href="{% url 'user' user=thread.last_poster_id, username=thread.last_poster_slug %}">{{ thread.last_poster_name }}</a>
-          {%- else -%}
-          {% if settings.avatars_on_threads_list %}<img src="{{ macros.avatar_guest(24) }}" alt="" class="avatar-tiny"> {% endif %}<em class="muted">{{ thread.last_poster_name }}</em>
-          {%- endif %}</span></td>
-      {% if user.is_authenticated() and list_form %}
-      <td class="check-cell">{% if thread.forum_id == forum.pk %}<label class="checkbox"><input form="threads_form" name="{{ list_form['list_items']['html_name'] }}" type="checkbox" class="checkbox-member" value="{{ thread.pk }}"{% if list_form['list_items']['has_value'] and ('' ~ thread.pk) in list_form['list_items']['value'] %} checked="checked"{% endif %}></label>{% else %}&nbsp;{% endif %}</td>
-      {% endif %}
-    </tr>
-    {% else %}
-    <tr>
-      <td colspan="5" style="text-align: center;">
-        <p class="lead">{% trans %}Looks like there are no threads in this forum.{% endtrans %}</p>
-        {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
-        <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-primary btn-large">{% trans %}Let's Change This!{% endtrans %}</a></li>
-        {% endif %}
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% if user.is_authenticated() and list_form %}
-<div class="form-actions table-footer">
-  <form id="threads_form" class="form-inline pull-right" action="{% url 'forum' slug=forum.slug, forum=forum.id, page=pagination['page'] %}" method="POST">
-    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-    {{ form_theme.input_select(list_form['list_action'],width=3) }}
-    <button type="submit" class="btn btn-primary">{% trans %}Go{% endtrans %}</button>
-  </form>
-</div>
-{% endif %}
-<div class="list-nav last">
-  {{ pager() }}
-  {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
-  <ul class="nav nav-pills pull-right">
-    <li class="primary"><a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a></li>
-  </ul>
+
+  {% if forum.subforums %}
+  <div class="forum-subforums-list{% if forum.style %} forum-subforums-{{ forum.style }}{% endif %}">
+    <table class="table">
+      <caption>{% trans %}Child forums{% endtrans %}</caption>
+      <tbody>
+        {% for subforum in forum.subforums %}
+        <tr>
+          <td class="forum-icon"><span class="forum-icon-wrap{% if subforum.type == 'redirect' %} forum-icon-redirect{% elif not subforum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if subforum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
+          <td class="forum-main">
+            <h3><a href="{{ subforum.type|url(slug=subforum.slug, forum=subforum.id) }}">{{ subforum.name }}</a></h3>
+            {% if subforum.show_details %}
+            <div class="forum-details">
+              {% if subforum.type == 'redirect' %}
+              <span class="label{% if subforum.redirects_delta < subforum.redirects %} label-success{% endif %}">{{ subforum.redirects|intcomma }}</span> {% trans %}Clicks{% endtrans %}
+              {% else %}
+              <span class="label{% if subforum.posts_delta < subforum.posts %} label-success{% endif %}">{{ subforum.posts|intcomma }}</span> {% trans %}Posts{% endtrans %}
+              {% endif %}
+            </div>
+            {% endif %}
+            {% if subforum.description %}<p class="forum-description">{{ subforum.description }}</p>{% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% endif %}
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
+  </div>
   {% endif %}
+
+  <div class="forum-threads-extra extra-top">
+    {{ pager() }}
+    {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
+    <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-primary pull-right"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a>
+    {% endif %}
+  </div>
+
+  <div class="forum-threads-list">
+    <table class="table">
+      <thead>
+        <tr>
+          <th style="width: 1%;">&nbsp;</th>
+          <th>{% trans %}Thread{% endtrans %}</th>
+          <th class="span1">{% trans %}Rating{% endtrans %}</th>
+          <th class="span5">{% trans %}Activity{% endtrans %}</th>
+          {% if user.is_authenticated() and list_form %}
+          <th class="check-cell"><label class="checkbox"><input type="checkbox" class="checkbox-master"></label></th>
+          {% endif %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for thread in threads %}
+        <tr>
+          <td>
+            <a href="{% url 'thread_new' thread=thread.pk, slug=thread.slug %}" class="thread-icon{% if not thread.is_read %} thread-new{% endif %} tooltip-top" title="{% if not thread.is_read -%}
+            {% trans %}Click to see first unread post{% endtrans %}
+            {%- else -%}
+            {% trans %}Click to see last post{% endtrans %}
+            {%- endif %}"><i class="icon-comment"></i></a>
+          </td>
+          <td>
+            <a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}" class="thread-name">{{ thread.name }}</a>
+            <span class="thread-details">
+              {% trans user=thread_starter(thread), start=thread.start|reldate|low %}by {{ user }} {{ start }}{% endtrans %}
+            </span>
+            <ul class="unstyled thread-flags">
+              {% if thread.replies_reported %}
+              <li><i class="icon-warning-sign tooltip-top" title="{% trans %}This thread has reported replies{% endtrans %}"></i></li>
+              {% endif %}
+              {% if thread.replies_moderated %}
+              <li><i class="icon-question-sign tooltip-top" title="{% trans %}This thread has unreviewed replies{% endtrans %}"></i></li>
+              {% endif %}
+              {% if thread.weight == 2 %}
+              <li><i class="icon-star tooltip-top" title="{% trans %}This thread is an annoucement{% endtrans %}"></i></li>
+              {% endif %}
+              {% if thread.weight == 1 %}
+              <li><i class="icon-star-empty tooltip-top" title="{% trans %}This thread is sticky{% endtrans %}"></i></li>
+              {% endif %}
+              {% if thread.moderated  %}
+              <li><i class="icon-eye-close tooltip-top" title="{% trans %}This thread awaits review{% endtrans %}"></i></li>
+              {% endif %}
+              {% if thread.deleted %}
+              <li><i class="icon-trash tooltip-top" title="{% trans %}This thread is deleted{% endtrans %}"></i></li>
+              {% endif %}
+              {% if thread.closed %}
+              <li><i class="icon-lock tooltip-top" title="{% trans %}This thread is closed{% endtrans %}"></i></li>
+              {% endif %}
+            </ul>
+          </td>
+          <td>
+            <div class="thread-rating{% if (thread.upvotes-thread.downvotes) > 0 %} thread-rating-positive{% elif (thread.upvotes-thread.downvotes) < 0 %} thread-rating-negative{% endif %}">
+              {{ (thread.upvotes-thread.downvotes)|abs|intcomma }}
+            </div>
+          </td>
+          <td>
+            <div class="thread-last-reply">
+              {{ replies(thread.replies) }} - {% trans user=thread_reply(thread), last=thread.last|reldate|low %}last by {{ user }} {{ last }}{% endtrans %}
+            </div>
+          </td>
+          {% if user.is_authenticated() and list_form %}
+          <td class="check-cell">{% if thread.forum_id == forum.pk %}<label class="checkbox"><input form="threads_form" name="{{ list_form['list_items']['html_name'] }}" type="checkbox" class="checkbox-member" value="{{ thread.pk }}"{% if list_form['list_items']['has_value'] and ('' ~ thread.pk) in list_form['list_items']['value'] %} checked="checked"{% endif %}></label>{% else %}&nbsp;{% endif %}</td>
+          {% endif %}
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% if user.is_authenticated() and list_form %}
+    <div class="threads-actions">
+      <form id="threads_form" class="form-inline pull-right" action="{% url 'forum' slug=forum.slug, forum=forum.id, page=pagination['page'] %}" method="POST">
+        <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+        {{ form_theme.input_select(list_form['list_action'],width=3) }}
+        <button type="submit" class="btn btn-danger">{% trans %}Go{% endtrans %}</button>
+      </form>
+    </div>
+    {% endif %}
+  </div>
+
+  <div class="forum-threads-extra">
+    {{ pager() }}
+    {% if user.is_authenticated() and acl.threads.can_start_threads(forum) %}
+    <a href="{% url 'thread_new' forum=forum.pk, slug=forum.slug %}" class="btn btn-primary pull-right"><i class="icon-plus"></i> {% trans %}New Thread{% endtrans %}</a>
+    {% endif %}
+  </div>
+
 </div>
 {% endblock %}
 
+{% macro replies(thread_replies) -%}
+{% trans count=thread_replies, replies=('<strong>' ~ (thread_replies|intcomma) ~ '</strong>')|safe -%}
+{{ replies }} reply
+{%- pluralize -%}
+{{ replies }} replies
+{%- endtrans %}
+{%- endmacro %}
+
+{% macro thread_starter(thread) -%}
+{% if thread.start_poster_id %}<a href="{% url 'user' user=thread.start_poster_id, username=thread.start_poster_slug %}" class="user-link">{{ thread.start_poster_name }}</a>{% else %}{{ thread.start_poster_name }}{% endif %}
+{%- endmacro %}
+
+{% macro thread_reply(thread) -%}
+{% if thread.last_poster_id %}<a href="{% url 'user' user=thread.last_poster_id, username=thread.last_poster_slug %}" class="user-link">{{ thread.last_poster_name }}</a>{% else %}{{ thread.last_poster_name }}{% endif %}
+{%- endmacro %}
+
 {% macro pager() %}
-  <ul class="pager pull-left">
+{% if pagination['total'] > 0 %}
+<div class="pagination pull-left">
+  <ul>
+    <li class="count">{{ macros.pager_label(pagination) }}</li>
     {%- if pagination['prev'] > 1 %}<li><a href="{% url 'forum' slug=forum.slug, forum=forum.id %}" class="tooltip-top" title="{% trans %}First Page{% endtrans %}"><i class="icon-chevron-left"></i> {% trans %}First{% endtrans %}</a></li>{% endif -%}
     {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'forum' slug=forum.slug, forum=forum.id, page=pagination['prev'] %}{% else %}{% url 'forum' slug=forum.slug, forum=forum.id %}{% endif %}" class="tooltip-top" title="{% trans %}Newest Threads{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
     {%- if pagination['next'] > 0 %}<li><a href="{% url 'forum' slug=forum.slug, forum=forum.id, page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Older Threads{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
-    <li class="count">
-    {%- trans current_page=pagination['page'], pages=pagination['total'] -%}
-    Page {{ current_page }} of {{ pages }}
-    {%- endtrans -%}
-    </li>
   </ul>
+</div>
+{% endif %}
 {% endmacro %}
 
 {% block javascripts -%}