Redesigned category view for Cranefly.

misago/forums/forms.py

@@ -16,7 +16,7 @@ class CategoryForm(Form):
     closed = forms.BooleanField(widget=YesNoSwitch, required=False)
     style = forms.CharField(max_length=255, required=False)
     attrs = forms.CharField(max_length=255, required=False)
-    show_details = forms.BooleanField(widget=YesNoSwitch, required=False)
+    show_details = forms.BooleanField(widget=YesNoSwitch, required=False, initial=True)
 
     layout = (
               (
@@ -66,7 +66,7 @@ class ForumForm(Form):
     prune_start = forms.IntegerField(min_value=0, initial=0)
     prune_last = forms.IntegerField(min_value=0, initial=0)
     attrs = forms.CharField(max_length=255, required=False)
-    show_details = forms.BooleanField(widget=YesNoSwitch, required=False)
+    show_details = forms.BooleanField(widget=YesNoSwitch, required=False, initial=True)
 
     layout = (
               (

misago/forums/models.py

@@ -37,7 +37,10 @@ class ForumManager(models.Manager):
         while parent.level > 1:
             parent = self.forums_tree[parent.parent_id]
             parents.append(parent)
-        return reversed(parents)
+        result = []
+        for i in reversed(parents):
+            result.append(i)
+        return list(result)
 
     def parents_aware_forum(self, forum):
         self.populate_tree()

static/cranefly/css/cranefly.css

@@ -5581,6 +5581,36 @@ a.badge:focus {
   margin-top: 0px;
   padding-top: 10px;
 }
+.header-primary .breadcrumb {
+  background: none;
+  border: none;
+  margin: 0px;
+  margin-bottom: -11.9px;
+  padding: 0px;
+}
+.header-primary .breadcrumb li {
+  font-size: 11.9px;
+  font-weight: bold;
+  text-shadow: none;
+}
+.header-primary .breadcrumb li a:link,
+.header-primary .breadcrumb li a:visited {
+  color: #999999;
+}
+.header-primary .breadcrumb li a:hover,
+.header-primary .breadcrumb li a:active {
+  color: #333333;
+}
+.header-primary .breadcrumb li .divider {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.header-primary .breadcrumb li .divider i {
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+  position: relative;
+  bottom: 1px;
+}
 .header-primary h1 {
   color: #555555;
   font-size: 35px;
@@ -5632,6 +5662,9 @@ body {
   padding-top: 20px;
   padding-bottom: 120px;
 }
+#wrap .container-primary .page-description {
+  margin-bottom: 20px;
+}
 footer {
   background-color: #eeeeee;
   border-top: 1px solid #dadada;
@@ -6756,6 +6789,75 @@ a.btn-link:focus {
   color: #999999;
   text-align: right;
 }
+.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 .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 .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;
+}
 .index-rank-team ul li {
   background-color: #cf402e;
   border-color: #ae3627;

static/cranefly/css/cranefly.less

@@ -83,6 +83,7 @@
 @import "cranefly/popularthreads.less";
 @import "cranefly/watchedthreads.less";
 @import "cranefly/alerts.less";
+@import "cranefly/category.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/category.less

@@ -0,0 +1,88 @@
+// Category view
+// -------------------------
+
+.category-forums-list {
+  background-color: @categoryBackground;
+  border: 1px solid @categoryBorder;
+  border-radius: @borderRadiusSmall;
+  .box-shadow(0px 0px 0px 3px @categoryShadow);
+  margin-bottom: @baseLineHeight;
+
+  table {
+    margin: 0px;
+    
+    tr:first-child {
+      td {
+        border-top: none;
+      }
+    }
+
+    .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;
+        line-height: @baseLineHeight;
+
+        a:link, a:visited {
+          color: lighten(@textColor, 35%);
+        }
+
+        &.forum-title-new {
+          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;
+      }
+    }
+  }
+
+  &.category-forums-important {
+    border: 1px solid darken(@red, 15%);
+    .box-shadow(0px 0px 0px 3px @red);
+  }
+}

static/cranefly/css/cranefly/header.less

@@ -7,6 +7,39 @@
   margin-top: 0px;
   padding-top: @baseLineHeight / 2;
 
+  .breadcrumb {
+    background: none;
+    border: none;
+    margin: 0px;
+    margin-bottom: @fontSizeSmall * -1;
+    padding: 0px;
+
+    li {
+      font-size: @fontSizeSmall;
+      font-weight: bold;
+      text-shadow: none;
+
+      a:link, a:visited {
+        color: @grayLight;
+      }
+
+      a:hover, a:active {
+        color: @textColor;
+      }
+
+      .divider {
+        padding-left: 0px;
+        padding-right: 0px;
+
+        i {
+          .opacity(20);
+          position: relative;
+          bottom: 1px;
+        }
+      }
+    }
+  }
+
   h1 {
     color: @gray;
     font-size: @fontSizeLarge * 2;

static/cranefly/css/cranefly/scaffolding.less

@@ -14,6 +14,10 @@ html, body {
   .container-primary {
     padding-top: @baseLineHeight;
     padding-bottom: @footerHeight + (@footerHeight * 0.5);
+
+    .page-description {
+      margin-bottom: @baseLineHeight;
+    }
   }
 }
 

templates/cranefly/category.html

@@ -3,14 +3,66 @@
 {% load url from future %}
 {% import "cranefly/macros.html" as macros with context %}
 
-{% block breadcrumb %}{{ super() }} <span class="divider">/</span></li>
+{% block title %}{{ macros.page_title(title=category.name) }}{% endblock %}
+
+{% 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">{{ category.name }}
 {%- endblock %}
 
-{% block title %}{{ macros.page_title(title=category.name) }}{% endblock %}
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
+    {% endif %}
+    <ul class="breadcrumb">
+      {{ self.breadcrumb() }}</li>
+    </ul>
+    <h1>{{ category.name }}</h1>
+  </div>
+</div>
+
+<div class="container container-primary">
+  {% if category.description %}
+  <div class="markdown lead page-description">
+    {{ category.description_preparsed|markdown_final|safe }}
+  </div>
+  {% endif %}
+  {% if category.subforums %}
+  <div class="category-forums-list{% if category.style %} category-forums-{{ category.style }}{% endif %}">
+    <table class="table">
+      <tbody>
+        {% for forum in category.subforums %}
+        <tr>
+          <td class="forum-icon"><span class="forum-icon-wrap{% if forum.type == 'redirect' %} forum-icon-redirect{% elif not forum.is_read %} forum-icon-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></span></td>
+          <td class="forum-main">
+            <h3{% if not forum.is_read %} class="forum-title-new"{% endif %}><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}">{{ forum.name }}</a></h3>
+            {% if forum.show_details %}
+            <div class="forum-details">
+              {% if forum.type == 'redirect' %}
+              <span class="label{% if forum.redirects_delta < forum.redirects %} label-success{% endif %}">{{ forum.redirects|intcomma }}</span> {% trans %}Clicks{% endtrans %}
+              {% else %}
+              <span class="label{% if forum.posts_delta < forum.posts %} label-success{% endif %}">{{ forum.posts|intcomma }}</span> {% trans %}Posts{% endtrans %}
+              {% endif %}
+            </div>
+            {% endif %}
+            {% if forum.description %}<p class="forum-description">{{ forum.description }}</p>{% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% else %}
+  <p class="lead">{% trans %}Looks like there are no forums to display in this category.{% endtrans %}</p>
+  {% endif %}
+</div>
+{% endblock %}
 
 {% block content %}
 <div class="page-header">