fix #819: default category styles and docs

docs/CategoryStyles.md

@@ -0,0 +1,18 @@
+Category styles
+===============
+
+Misago categories allow to specify their css class when editing them in admin control panel.
+
+This class is then used to build proper css class names used around the UI. For example, entering "protoss" in class's css name will result in category on categories lists and threads in this class on threads list having `list-group-item-category-protoss` css class on them, allowing you to differentiate this category and its threads on lists. In addition to this, such category's page and its thread page would have `page-protoss` class so you could customize it further.
+
+
+## Default classes
+
+Misago's default theme defines following basic classes, visualised as color bands added to left side of category and its threads on lists:
+
+- `primary`
+- `info`
+- `success`
+- `danger`
+- `warning`
+- `inversed`

docs/SUMMARY.md

@@ -4,6 +4,7 @@
 * [Setup and maintenance](./SetupMaintenance.md)
 * [Upgrading from Misago 0.5](./UpgradingFrom05.md)
 * [Coding style](./CodingStyle.md)
+* [Category styles](./CategoryStyles.md)
 * [User authentication](./Auth.md)
 * [Writing new admin actions](./WritingNewAdminActions.md)
 * [Permissions framework](./PermissionsFramework.md)

frontend/src/components/posts-list/index.js

@@ -5,19 +5,25 @@ import Post from './post';
 import PostPreview from './post/preview';
 
 export default function(props) {
-  if (props.posts.isLoaded) {
+  if (!props.posts.isLoaded) {
     return (
-      <ul className="posts-list ui-ready">
-        {props.posts.results.map((post) => {
-          return <ListItem key={post.id} post={post} {...props} />;
-        })}
+      <ul className="posts-list ui-preview">
+        <PostPreview />
       </ul>
     );
   }
 
   return (
-    <ul className="posts-list ui-preview">
-      <PostPreview />
+    <ul className="posts-list ui-ready">
+      {props.posts.results.map((post) => {
+        return (
+          <ListItem
+            key={post.id}
+            post={post}
+            {...props}
+          />
+        );
+      })}
     </ul>
   );
 }