Added extra information to threads list

misago/static/misago/css/misago/threadslists.less

@@ -3,27 +3,20 @@
 // --------------------------------------------------
 
 
-// Block style
-//
-//==
 .threads-list {
   .table-panel {
     border: none;
 
     .list-group {
       margin: 0px;
-    }
-  }
-}
 
-
-// Thread icon
-//
-//==
-.threads-list {
-  .table-panel {
-    .list-group {
       .list-group-item {
+        padding-top: @padding-base-vertical + 1px;
+        padding-bottom: @padding-base-vertical + 1px;
+
+        // Thread icon
+        //
+        //==
         &.new {
           .thread-icon {
             color: @state-active;
@@ -37,35 +30,103 @@
 
           color: @state-default;
         }
-      }
-    }
-  }
-}
 
 
-// Thread title
-//
-//==
-.threads-list {
-  .table-panel {
-    .list-group {
-      .list-group-item {
+        // Thread title
+        //
+        //==
         .item-title {
           font-size: @font-size-large;
         }
-      }
-    }
-  }
-}
 
 
-// Empty list message
-//
-//==
-.threads-list {
-  .table-panel {
-    .list-group {
-      .list-group-item {
+        // Thread flags
+        //
+        //==
+        .thread-flags {
+          float: right;
+          overflow: auto;
+          position: relative;
+          top: 3px;
+
+          li {
+            float: left;
+
+            .fa, .glyphicon {
+              .opacity(0.5);
+              transition-duration: 0.5s;
+
+              &:hover, &:focus {
+                .opacity(0.9);
+                transition-duration: 0.05s;
+              }
+            }
+          }
+        }
+
+
+        // Thread last reply
+        //
+        //==
+        .thread-stats {
+          .thread-replies {
+            display: inline-block;
+            margin: -3px 0px;
+            margin-right: @font-size-large / 3;
+            .opacity(0.5);
+            transition-duration: 0.5s;
+            width: 20%;
+
+            font-size: @font-size-large;
+
+            &:hover, &:focus {
+              .opacity(0.9);
+              transition-duration: 0.05s;
+            }
+
+            &>div {
+              display: inline;
+
+              span {
+                font-size: @font-size-base;
+              }
+            }
+          }
+
+          .thread-author {
+            margin-right: @font-size-large / 3;
+
+            img {
+              border-radius: @border-radius-small;
+              width: 25px;
+              margin: -3px 0px;
+              position: relative;
+              bottom: 3px;
+            }
+
+            &:hover {
+              text-decoration: none;
+            }
+          }
+
+          a.time-ago {
+            color: @state-default;
+            font-size: @font-size-large;
+
+            &:hover {
+              color: @state-hover;
+            }
+
+            &:active {
+              color: @state-clicked;
+            }
+          }
+        }
+
+
+        // Empty list message
+        //
+        //==
         &.message-row {
           padding-top: @line-height-computed;
           padding-bottom: @line-height-computed;

misago/templates/misago/threads/list.html

@@ -1,5 +1,5 @@
 {% extends "misago/base.html" %}
-{% load i18n misago_stringutils %}
+{% load humanize i18n misago_avatars misago_stringutils %}
 
 
 {% block title %}{{ forum.name }} | {{ block.super }}{% endblock title %}
@@ -68,31 +68,84 @@
         <ul class="list-group">
           {% for thread in threads %}
           <li class="list-group-item{% if thread.is_new %} new{% endif %}">
-
-            {% if thread.is_announcement %}
-              {% if thread.is_new %}
-              <span class="thread-icon tooltip-top fa fa-star fa-lg fa-fw" title="{% trans "Announcement, unread" %}"></span>
-              {% else %}
-              <span class="thread-icon tooltip-top fa fa-star-o fa-lg fa-fw" title="{% trans "Announcement, read" %}"></span>
-              {% endif %}
-            {% elif thread.is_pinned %}
-              {% if thread.is_new %}
-              <span class="thread-icon tooltip-top fa fa-bookmark fa-lg fa-fw" title="{% trans "Pinned, unread" %}"></span>
-              {% else %}
-              <span class="thread-icon tooltip-top fa fa-bookmark-o fa-lg fa-fw" title="{% trans "Pinned, read" %}"></span>
-              {% endif %}
-            {% else %}
-              {% if thread.is_new %}
-              <span class="thread-icon tooltip-top fa fa-circle fa-lg fa-fw" title="{% trans "Unread posts" %}"></span>
-              {% else %}
-              <span class="thread-icon tooltip-top fa fa-circle-thin fa-lg fa-fw" title="{% trans "Read posts" %}"></span>
-              {% endif %}
-            {% endif %}
-
-            <a href="{{ thread.get_absolute_url }}" class="item-title">
-              {{ thread.title }}
-            </a>
-
+            <div class="row">
+
+              <div class="col-md-8">
+                {% if thread.is_announcement %}
+                  {% if thread.is_new %}
+                  <span class="thread-icon tooltip-top fa fa-star fa-lg fa-fw" title="{% trans "Announcement, unread" %}"></span>
+                  {% else %}
+                  <span class="thread-icon tooltip-top fa fa-star-o fa-lg fa-fw" title="{% trans "Announcement, read" %}"></span>
+                  {% endif %}
+                {% elif thread.is_pinned %}
+                  {% if thread.is_new %}
+                  <span class="thread-icon tooltip-top fa fa-bookmark fa-lg fa-fw" title="{% trans "Pinned, unread" %}"></span>
+                  {% else %}
+                  <span class="thread-icon tooltip-top fa fa-bookmark-o fa-lg fa-fw" title="{% trans "Pinned, read" %}"></span>
+                  {% endif %}
+                {% else %}
+                  {% if thread.is_new %}
+                  <span class="thread-icon tooltip-top fa fa-circle fa-lg fa-fw" title="{% trans "Unread posts" %}"></span>
+                  {% else %}
+                  <span class="thread-icon tooltip-top fa fa-circle-thin fa-lg fa-fw" title="{% trans "Read posts" %}"></span>
+                  {% endif %}
+                {% endif %}
+
+                <a href="{{ thread.get_absolute_url }}" class="item-title">
+                  {{ thread.title }}
+                </a>
+
+                <ul class="list-unstyled thread-flags">
+                  {% if thread.has_reported_posts %}
+                  <li class="tooltip-top" title="{% trans "Reported posts" %}">
+                    <span class="fa fa-exclamation-triangle fa-fw fa-lg"></span>
+                  </li>
+                  {% endif %}
+                  {% if thread.has_moderated_posts and not thread.is_moderated %}
+                  <li class="tooltip-top" title="{% trans "Moderated posts" %}">
+                    <span class="fa fa-eye-slash fa-fw fa-lg"></span>
+                  </li>
+                  {% endif %}
+                  {% if thread.is_poll %}
+                  <li class="tooltip-top" title="{% trans "Poll" %}">
+                    <span class="fa fa-bar-chart-o fa-fw fa-lg"></span>
+                  </li>
+                  {% endif %}
+                  {% if thread.is_moderated %}
+                  <li class="tooltip-top" title="{% trans "Moderated" %}">
+                    <span class="fa fa-eye-slash fa-fw fa-lg"></span>
+                  </li>
+                  {% endif %}
+                  {% if thread.is_closed %}
+                  <li class="tooltip-top" title="{% trans "Closed" %}">
+                    <span class="fa fa-lock fa-fw fa-lg"></span>
+                  </li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="col-md-4 thread-stats">
+                <div class="thread-replies">
+                  <div class="tooltip-top" title="{% blocktrans trimmed with replies=thread.replies|intcomma count counter=thread.replies %}{{ replies }} reply{% plural %}{{ replies }} replies{% endblocktrans %}">
+                    <span class="glyphicon glyphicon-comment"></span>
+                    {{ thread.replies|intcomma }}
+                  </div>
+                </div>
+
+                {% if thread.last_poster_id %}
+                <a href="{% url USER_PROFILE_URL user_slug=thread.last_poster_slug user_id=thread.last_poster_id %}" class="thread-author tooltip-top" title="{% blocktrans with user=thread.last_poster_name %}Last post by {{ user }}{% endblocktrans %}">
+                  <img src="{{ thread.last_poster_id|avatar:25 }}" alt="{% trans "Avatar" %}" class="avatar">
+                </a>
+                {% else %}
+                <span class="thread-author tooltip-top" title="{% blocktrans with user=thread.last_poster_name %}Last post by {{ user }}{% endblocktrans %}">
+                  <img src="{% blankavatar 25 %}" alt="{% trans "Avatar" %}" class="avatar">
+                </span>
+                {% endif %}
+
+                <a href="#" class="dynamic time-ago tooltip-top" data-timestamp="{{ thread.last_post_on|date:"c" }}" title="{% blocktrans with last_post=thread.last_post_on|date %}Last post from {{ last_post }}{% endblocktrans %}">
+                  {{ thread.last_post_on|date }}
+                </a>
+              </div>
+            </div>
           </li>
           {% empty %}
           <li class="list-group-item message-row">