Popular threads page

misago/views.py

@@ -137,7 +137,7 @@ def forum_map(request):
 def popular_threads(request):
     return request.theme.render_to_response('popular_threads.html',
                                             {
-                                             'threads': Thread.objects.filter(forum_id__in=request.acl.threads.get_readable_forums(request.acl)).filter(deleted=False).filter(moderated=False).order_by('-score').prefetch_related('start_poster', 'last_poster', 'forum')[:50]
+                                             'threads': Thread.objects.filter(forum_id__in=request.acl.threads.get_readable_forums(request.acl)).filter(deleted=False).filter(moderated=False).order_by('-score').prefetch_related('start_poster', 'last_poster', 'forum')[:50],
                                              },
                                             context_instance=RequestContext(request));
 

static/cranefly/css/cranefly.css

@@ -957,6 +957,16 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .forum-map-category table .forum-map-subforum span.tree-i{border-left:2px solid #eeeeee;position:relative;top:5px;margin-right:4px;}
 .forum-map-category table .forum-map-subforum span.tree-s{width:12px;margin-right:4px;}
 .forum-map-category.forum-map-category-important caption{background-color:#cf402e;border:1px solid #ba3a29;text-shadow:0px 1px 0px #672017;}
+.popular-threads hr{margin:14px 0px;border:none;border-top:1px solid #eeeeee;}
+.popular-threads .popular-thread{overflow:auto;}.popular-threads .popular-thread .popular-thread-warmth{display:block;float:left;margin-top:1px;margin-right:14px;padding:10.5px;color:#ffffff;text-align:center;font-weight:bold;text-shadow:0px 1px 0px #3b3b3b;}.popular-threads .popular-thread .popular-thread-warmth i{background-image:url("../img/glyphicons-halflings-white.png");}
+.popular-threads .popular-thread .popular-thread-warmth.popular-thread-warmth-0{background-color:#cf402e;border:1px solid #a53325;}
+.popular-threads .popular-thread .popular-thread-warmth.popular-thread-warmth-1{background-color:#af594e;border:1px solid #8c473e;}
+.popular-threads .popular-thread .popular-thread-warmth.popular-thread-warmth-2{background-color:#90716d;border:1px solid #735a57;}
+.popular-threads .popular-thread .popular-thread-warmth.popular-thread-warmth-3{background-color:#555555;border:1px solid #3b3b3b;}
+.popular-threads .popular-thread .popular-thread-details .popular-thread-title:link,.popular-threads .popular-thread .popular-thread-details .popular-thread-title:visited{color:#555555;font-weight:bold;}
+.popular-threads .popular-thread .popular-thread-details .popular-thread-title:hover,.popular-threads .popular-thread .popular-thread-details .popular-thread-title:active{color:#333333;}
+.popular-threads .popular-thread .popular-thread-details .popular-thread-info{margin:0px;margin-left:14px;padding:0px;color:#999999;font-size:11.9px;}.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:link,.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:visited{color:#555555;}
+.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:hover,.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:active{color:#333333;}
 .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

@@ -78,6 +78,7 @@
 @import "cranefly/signin.less";
 @import "cranefly/usercp.less";
 @import "cranefly/forummap.less";
+@import "cranefly/popularthreads.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/popularthreads.less

@@ -0,0 +1,81 @@
+// Popular threads list
+// -------------------------
+
+.popular-threads {
+  hr {
+    margin: @baseFontSize 0px;
+    border: none;
+    border-top: 1px solid @grayLighter;
+  }
+
+  .popular-thread {
+    overflow: auto;
+
+    .popular-thread-warmth {
+      display: block;
+      float: left;
+      margin-top: 1px;
+      margin-right: @baseFontSize;
+      padding: @fontSizeMini;
+
+      color: @white;
+      text-align: center;
+      font-weight: bold;
+      text-shadow: 0px 1px 0px darken(@gray, 10%);
+
+      i {
+        background-image: url("@{iconWhiteSpritePath}");
+      }
+
+      &.popular-thread-warmth-0 {
+        background-color: @red;
+        border: 1px solid darken(@red, 10%);
+      }
+
+      &.popular-thread-warmth-1 {
+        background-color: desaturate(@red, 25%);
+        border: 1px solid darken(desaturate(@red, 25%), 10%);
+      }
+
+      &.popular-thread-warmth-2 {
+        background-color: desaturate(@red, 50%);
+        border: 1px solid darken(desaturate(@red, 50%), 10%);
+      }
+
+      &.popular-thread-warmth-3 {
+        background-color: @gray;
+        border: 1px solid darken(@gray, 10%);
+      }
+    }
+
+    .popular-thread-details {
+      .popular-thread-title {
+        &:link, &:visited {
+          color: @gray;
+          font-weight: bold;
+        }
+
+        &:hover, &:active {
+          color: @textColor;
+        }
+      }
+
+      .popular-thread-info {
+        margin: 0px;
+        margin-left: @baseFontSize;
+        padding: 0px;
+
+        color: @grayLight;
+        font-size: @fontSizeSmall;
+
+        a:link, a:visited {
+          color: @gray;
+        }
+
+        a:hover, a:active {
+          color: @textColor;
+        }
+      }
+    }
+  }
+}

templates/cranefly/popular_threads.html

@@ -2,43 +2,68 @@
 {% load i18n %}
 {% import "cranefly/macros.html" as macros with context %}
 
-{% block title %}{{ macros.page_title(title=_('Active Threads')) }}{% endblock %}
+{% block title %}{{ macros.page_title(title=_('Popular Threads')) }}{% endblock %}
 
-{% block content %}
-<div class="page-header">
-  <h1>{% trans %}Active Threads{% endtrans %}</h1>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
+    {% endif %}
+    <h1>{% trans %}Popular Threads{% endtrans %}</h1>
+  </div>
 </div>
-{% if threads %}
-<p class="lead">{% trans %}Following threads are currently experiencing most activity:{% endtrans %}</p>
-<ul class="unstyled shorts-list">
-{% for row in threads|batch(2, '') %}
-  <li>
+
+<div class="container container-primary">
+  {% if threads %}
+  <div class="popular-threads">
+  {% for thread in threads %}
+  {% do thread.__dict__.update({'warmth': loop.index}) %}
+  {% endfor %}
+  {% for row in threads|batch(2, '') %}
     <div class="row">
       {% for thread in row %}{% if thread %}
       <div class="span6">
-        <img src="{% if thread.start_poster_id %}{{ thread.start_poster.get_avatar(36) }}{% else %}{{ macros.avatar_guest(24) }}{% endif %}" class="avatar tooltip-top" title="{% trans username=thread.start_poster_name %}Thread started by {{ username }}{% endtrans %}">
-        <p class="title">
-          <a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}" class="hover-opacity tooltip-top" title="{% trans %}Jump to thread start{% endtrans %}"><i class="icon-asterisk"></i></a>
-          <a href="{% url 'thread_last' thread=thread.pk, slug=thread.slug %}" class="jump jump-last tooltip-top" title="{% trans %}Jump to latest reply{% endtrans %}"><strong>{{ thread.name }}</strong></a>
-        </p>
-        <p class="location">{% trans forum=forum(thread.forum), starter=username(thread.start_poster_id, thread.start_poster_name, thread.start_poster_slug), start=thread.start|reldate %}Thread started by {{ starter }} in {{ forum }} on {{ start }}.{% endtrans %}</p>
+        <div class="popular-thread">
+          <a href="{% url 'thread_new' thread=thread.pk, slug=thread.slug %}" class="label popular-thread-warmth popular-thread-warmth-{{ warmth(thread.warmth) }} tooltip-top" title="{% trans %}Jump to latest reply{% endtrans %}"><i class="icon-fire"></i></a>
+          <div class="popular-thread-details">
+            <a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}" class="popular-thread-title tooltip-top" title="{% trans %}Jump to thread start{% endtrans %}">{{ thread.name }}</a>
+            <p class="popular-thread-info">
+              {% trans forum=forum(thread.forum), starter=username(thread.start_poster_id, thread.start_poster_name, thread.start_poster_slug), last=thread.last|reldate, replies=replies(thread.replies) %}By {{ starter }} - {{ forum }} - {{ replies }} - last on {{ last }}.{% endtrans %}
+            </p>
+          </div>
+        </div>
       </div>
       {% endif %}{% endfor %}
     </div>
-  </li>
-{% endfor %}
-</ul>
-{% else %}
-<p class="lead">{% trans %}Looks like there are no active threads.{% endtrans %}</p>
-{% endif %}
-{%- endblock %}
+    <hr>
+  {% endfor %}
+  </div>
+  {% else %}
+  <p class="lead">{% trans %}Looks like there are no popular threads... yet!{% endtrans %}</p>
+  {% endif %}
+</div>
+{% endblock %}
+
 
+{% macro warmth(loop_index) -%}
+{% if loop_index < 5 %}0{% elif loop_index < 20 %}1{% elif loop_index < 35 %}2{% else %}3{% endif %}
+{%- endmacro %}
+
+{% macro replies(thread_replies) -%}
+{% trans count=thread_replies, replies=thread_replies|intcomma -%}
+One reply
+{%- pluralize -%}
+{{ replies }} replies
+{%- endtrans %}
+{%- endmacro %}
 
 {% macro forum(forum) -%}
 <a href="{% url 'forum' forum=forum.pk, slug=forum.slug %}">{{ forum.name }}</a>
 {%- endmacro %}
 
-
 {% macro username(id, username, slug) -%}
 {%- if id -%}
 <a href="{% url 'user' user=id, username=slug %}">{{ username }}</a>