made categories page template easier to customise

frontend/src/components/threads/header.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Link } from 'react-router'; // jshint ignore:line
+import DropdownToggle from 'misago/components/dropdown-toggle'; // jshint ignore:line
+import { TabsNav } from 'misago/components/threads/navs'; // jshint ignore:line
+
+export default class extends React.Component {
+  getClassName() {
+    if (this.props.route.lists.length > 1) {
+      return 'page-header tabbed';
+    } else {
+      return 'page-header';
+    }
+  }
+
+  getGoBackButton() {
+    if (this.props.route.category.parent) {
+      /* jshint ignore:start */
+      return <Link className="btn btn-default btn-aligned btn-icon btn-go-back pull-left"
+                   to={this.props.route.category.parent.absolute_url + this.props.route.list.path}>
+        <span className="material-icon">
+          keyboard_arrow_left
+        </span>
+      </Link>;
+      /* jshint ignore:end */
+    } else {
+      return null;
+    }
+  }
+
+  getCompactNavToggle() {
+    if (this.props.route.lists.length > 1) {
+      /* jshint ignore:start */
+      return <DropdownToggle toggleNav={this.props.toggleNav}
+                             dropdown={this.props.dropdown} />;
+      /* jshint ignore:end */
+    } else {
+      return null;
+    }
+  }
+
+  getTabsNav() {
+    if (this.props.route.lists.length > 1) {
+      /* jshint ignore:start */
+      return <TabsNav baseUrl={this.props.route.category.absolute_url}
+                      list={this.props.route.list}
+                      lists={this.props.route.lists}
+                      hideNav={this.props.hideNav} />;
+      /* jshint ignore:end */
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    /* jshint ignore:start */
+    return <div className={this.getClassName()}>
+      <div className="container">
+        {this.getGoBackButton()}
+        <h1 className="pull-left">{this.props.title}</h1>
+        {this.getCompactNavToggle()}
+      </div>
+
+      {this.getTabsNav()}
+
+    </div>;
+    /* jshint ignore:end */
+  }
+}

frontend/src/components/threads/root.js

@@ -47,16 +47,22 @@ export function getLists() {
 export function paths() {
   let lists = getLists();
   let paths = [];
+  let categoriesMap = {};
+
 
   misago.get('CATEGORIES').forEach(function(category) {
     lists.forEach(function(list) {
+      categoriesMap[category.id] = categoriesMap;
+
       paths.push({
         path: category.absolute_url + list.path,
         component: connect(select)(Route),
-        category: category,
 
-        lists: lists,
-        list: list
+        categoriesMap,
+        category,
+
+        lists,
+        list
       });
     });
   });

frontend/src/components/threads/route.js

@@ -1,7 +1,6 @@
 import React from 'react'; // jshint ignore:line
-import { Link } from 'react-router'; // jshint ignore:line
-import DropdownToggle from 'misago/components/dropdown-toggle'; // jshint ignore:line
-import { TabsNav, CompactNav } from 'misago/components/threads/navs'; // jshint ignore:line
+import Header from 'misago/components/threads/header'; // jshint ignore:line
+import { CompactNav } from 'misago/components/threads/navs'; // jshint ignore:line
 import { getPageTitle, getTitle } from 'misago/components/threads/title-utils';
 import ThreadsList from 'misago/components/threads-list/root'; // jshint ignore:line
 import WithDropdown from 'misago/components/with-dropdown';
@@ -25,53 +24,6 @@ export default class extends WithDropdown {
     return className;
   }
 
-  getHeaderClassName() {
-    if (this.props.route.lists.length > 1) {
-      return 'page-header tabbed';
-    } else {
-      return 'page-header';
-    }
-  }
-
-  getGoBackButton() {
-    if (this.props.route.category.parent) {
-      /* jshint ignore:start */
-      return <Link className="btn btn-default btn-aligned btn-icon btn-go-back pull-left"
-                   to={this.props.route.category.parent.absolute_url + this.props.route.list.path}>
-        <span className="material-icon">
-          keyboard_arrow_left
-        </span>
-      </Link>;
-      /* jshint ignore:end */
-    } else {
-      return null;
-    }
-  }
-
-  getTabsNav() {
-    if (this.props.route.lists.length > 1) {
-      /* jshint ignore:start */
-      return <TabsNav baseUrl={this.props.route.category.absolute_url}
-                      list={this.props.route.list}
-                      lists={this.props.route.lists}
-                      hideNav={this.hideNav} />;
-      /* jshint ignore:end */
-    } else {
-      return null;
-    }
-  }
-
-  getCompactNavToggle() {
-    if (this.props.route.lists.length > 1) {
-      /* jshint ignore:start */
-      return <DropdownToggle toggleNav={this.toggleNav}
-                             dropdown={this.state.dropdown} />;
-      /* jshint ignore:end */
-    } else {
-      return null;
-    }
-  }
-
   getCompactNav() {
     if (this.props.route.lists.length > 1) {
       /* jshint ignore:start */
@@ -88,16 +40,11 @@ export default class extends WithDropdown {
   render() {
     /* jshint ignore:start */
     return <div className={this.getClassName()}>
-      <div className={this.getHeaderClassName()}>
-        <div className="container">
-          {this.getGoBackButton()}
-          <h1 className="pull-left">{this.getTitle()}</h1>
-          {this.getCompactNavToggle()}
-        </div>
-
-        {this.getTabsNav()}
-
-      </div>
+      <Header title={this.getTitle()}
+              route={this.props.route}
+              dropdown={this.state.dropdown}
+              toggleNav={this.toggleNav}
+              hideNav={this.hideNav} />
       <div className={this.getCompactNavClassName()}>
         {this.getCompactNav()}
       </div>

misago/templates/misago/categories/base.html

@@ -0,0 +1,32 @@
+{% extends "misago/base.html" %}
+{% load i18n misago_shorthands %}
+
+
+{% block title %}
+{% if is_index %}
+  {% if misago_settings.forum_index_title %}
+  {{ misago_settings.forum_index_title }}
+  {% else %}
+  {{ misago_settings.forum_name }}
+  {% endif %}
+{% else %}
+  {% trans "Categories" %} | {{ block.super }}
+{% endif %}
+{% endblock title %}
+
+
+{% block meta-description %}
+{% if is_index and misago_settings.forum_index_meta_description %}
+  {{ misago_settings.forum_index_meta_description }}
+{% endif %}
+{% endblock meta-description %}
+
+
+{% block content %}
+<div class="page page-categories {{ categories|iffalse:'page-message' }}">
+  {% include "misago/categories/header.html" %}
+  <div class="container">
+    {% include "misago/categories/body.html" %}
+  </div>
+</div>
+{% endblock content %}

misago/templates/misago/categories/body.html

@@ -0,0 +1,23 @@
+{% load i18n %}
+{% if categories %}
+  <div id="categories-mount">
+    <div class="categories-list">
+      {% for category in categories %}
+        {% include "misago/categories/category.html" with category=category %}
+      {% endfor %}
+    </div>
+  </div>
+{% else %}
+  <div class="message-panel">
+
+    <div class="message-icon">
+      <span class="material-icon">info_outline</span>
+    </div>
+
+    <div class="message-body">
+      <p class="lead">{% trans "No categories are available." %}</p>
+      <p>{% trans "No categories are currently defined or you don't have permission to see them." %}</p>
+    </div>
+
+  </div>
+{% endif %}

misago/templates/misago/categories/header.html

@@ -0,0 +1,14 @@
+{% load i18n %}
+<div class="page-header">
+  <div class="container">
+    {% if is_index %}
+      {% if misago_settings.forum_index_title %}
+        <h1>{{ misago_settings.forum_index_title }}</h1>
+      {% else %}
+        <h1>{{ misago_settings.forum_name }}</h1>
+      {% endif %}
+    {% else %}
+      <h1>{% trans "Categories" %}</h1>
+    {% endif %}
+  </div>
+</div>

misago/templates/misago/categories/list.html

@@ -1,67 +1 @@
-{% extends "misago/base.html" %}
-{% load i18n misago_shorthands %}
-
-
-{% block title %}
-{% if is_index %}
-  {% if misago_settings.forum_index_title %}
-  {{ misago_settings.forum_index_title }}
-  {% else %}
-  {{ misago_settings.forum_name }}
-  {% endif %}
-{% else %}
-  {% trans "Categories" %} | {{ block.super }}
-{% endif %}
-{% endblock title %}
-
-
-{% block meta-description %}
-{% if is_index and misago_settings.forum_index_meta_description %}
-  {{ misago_settings.forum_index_meta_description }}
-{% endif %}
-{% endblock meta-description %}
-
-
-{% block content %}
-<div class="page page-categories {{ categories|iffalse:'page-message' }}">
-  <div class="page-header">
-    <div class="container">
-      {% if is_index %}
-        {% if misago_settings.forum_index_title %}
-          <h1>{{ misago_settings.forum_index_title }}</h1>
-        {% else %}
-          <h1>{{ misago_settings.forum_name }}</h1>
-        {% endif %}
-      {% else %}
-        <h1>{% trans "Categories" %}</h1>
-      {% endif %}
-    </div>
-  </div>
-  <div class="container">
-
-    {% if categories %}
-      <div id="categories-mount">
-        <div class="categories-list">
-          {% for category in categories %}
-            {% include "misago/categories/category.html" with category=category %}
-          {% endfor %}
-        </div>
-      </div>
-    {% else %}
-      <div class="message-panel">
-
-        <div class="message-icon">
-          <span class="material-icon">info_outline</span>
-        </div>
-
-        <div class="message-body">
-          <p class="lead">{% trans "No categories are available." %}</p>
-          <p>{% trans "No categories are currently defined or you don't have permission to see them." %}</p>
-        </div>
-
-      </div>
-    {% endif %}
-
-  </div>
-</div>
-{% endblock content %}
+{% extends "misago/categories/base.html" %}

misago/templates/misago/threadslist/category.html

@@ -35,7 +35,11 @@
 <div class="page-header {{ user.is_authenticated|iftrue:"tabbed" }}">
   <div class="container">
     <h1>
-      <a href="{{ category.parent.get_absolute_url }}{% if list_type != 'all' %}{{ list_type }}/{% endif %}">&lt;</a>
+      <a href="{{ category.parent.get_absolute_url }}{% if list_type != 'all' %}{{ list_type }}/{% endif %}" class="btn btn-default btn-aligned btn-icon btn-go-back pull-left">
+        <span class="material-icon">
+          keyboard_arrow_left
+        </span>
+      </a>
       {{ category.name }}
     </h1>
   </div>