2 files changed, 178 insertions, 22 deletions
diff --git a/design/templates/forum/topic_detail.html b/design/templates/forum/topic_detail.html
new file mode 100644
index 0000000..3873375
--- /dev/null
+++ b/design/templates/forum/topic_detail.html
@@ -0,0 +1,114 @@
+{% extends 'base.html' %}
+{% load timesinceabbr %}
+{% block bodyid %}body-topic{%endblock%}
+{% block content %}
+<main class="wide">
+     <div class="">{% if messages %}
+        <ul class="messages">
+            {% for message in messages %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+    </div>
+   <article class="topic-container single-col">
+        <div class="topic-header">
+            <h1>{{object.title}}</h1>
+            <h2 class="category-name">
+                <a class="name" href="{{object.category.get_absolute_url}}"><span class="color-box" style="background-color: {{object.category.color_rgb}}"></span><span class="strong nb-name">{{object.category.name}}</span></a>
+            </h2>
+        </div>
+    <ol id="post-list">{% for post in object.post_set.all %}
+        <li class="post-list-item">
+            <div class="post-header">
+                <div class="avatar"><img src="{{post.user.get_avatar_url}}" alt="avatar for {{post.user.username}}" /></div>
+                <div class="username">
+                    {{post.user.username}}
+                </div>
+                <div class="user-title">
+                    {{post.user.category}}
+                </div>
+                <div class="post-created">
+                    {{post.date_created|timesinceabbr}}
+                </div>
+            </div>
+            <div class="post-body">
+                {{post.body_html}}
+            </div>
+            <div class="post-footer">
+                
+            </div>
+        </li>
+        {% endfor %}</ol>
+
+
+<table id="" class="topic-list">
+    <thead>
+        <tr>
+            <th data-sort-order="default" class="default">Topic</th>
+            <th data-sort-order="users" class="topic-users sortable num"></th>
+            <th data-sort-order="posts" class="topic-posts sortable num">Replies</th>
+            <th data-sort-order="views" class="topic-views sortable num">Views</th>
+            <th data-sort-order="activity" class="topic-age">Activity</th>
+        </tr>
+    </thead>
+    <tbody>
+    {% for object in object_list %}
+        <tr id="{{object.id}}" class="topic-list-item">
+            <td class="" colspan="1">
+                {% if object.statuses%}<div class="topic-statuses">
+                        <a href="" title="" class="topic-status"><svg class="fa d-icon d-icon-thumbtack svg-icon pinned svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#thumbtack"></use></svg></a>
+                </div>{%endif%}
+                    <a href="{{object.get_absolute_url}}" class="title" data-topic-id="{{object.id}}">{{object.title}}</a>
+                    <span class="topic-post-badges"></span>
+                    {% if object.pinned %}<div class="topic-excerpt">{{object.except}}
+                        <a href="/t/lets-use-math-my-nerds/10030">read more</a>{%endif%}
+                    <div class="category">
+                    <a href="{{object.category.get_absolute_url}}"><span class="color-box" style="background-color: {{object.category.color_rgb}}"></span>{{object.category}}</a>
+                    </div>
+            </td>
+            <td class="topic-users">
+                {% for user in object.user_set.all %}<a href="{{user.get_forum_url}}"><img alt="avatar for {{user}}" src="{{user.get_avatar_url}}" /></a>{%endfor%}
+            </td>
+            <td class="topic-posts center">
+                {{object.reply_count}}
+            </td>
+            <td class="topic-views center">
+                {{object.views}}
+            </td>
+            <td class="topic-age center">
+            </td>
+        </tr>
+    {% endfor %}
+</table>
+    </article>
+</main>
+{% endblock %}
+
+
+
+
+
+
+{% block extra %}
+{% if login_form %}
+<div class="overlay-content" id="js-overlay-content" style="display: none;">
+    {% include 'lib/login.html' with form=login_form %}
+</div>
+{% endif %}
+{%endblock%}
+{% block jsdomready %}
+{% if login_form %}
+  // Select your overlay trigger
+  var trigger = document.querySelector('#overlay-trigger');
+  trigger.addEventListener('click', function(e){
+    e.preventDefault();
+    novicell.overlay.create({
+      'selector': trigger.getAttribute('data-element'),
+      'class': 'selector-overlay',
+    });
+  });
+{% endif %}
+{%endblock%}
diff --git a/design/templates/forum/topic_list.html b/design/templates/forum/topic_list.html
index 89a165e..5f933e9 100644
--- a/design/templates/forum/topic_list.html
+++ b/design/templates/forum/topic_list.html
@@ -1,4 +1,12 @@
 {% extends 'base.html' %}
+{% block bodyid %}body-forum{%endblock%}
+{% block jsinclude %}
+    <script>
+    window.nbdata = [ {%spaceless%}{% for object in category_list %} {value: '{{object.get_absolute_url}}', label: '<span class="color-box" style="background-color: {{object.color_rgb}}"></span><span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}' },{%endfor%} {value: '/forum/', label: '<span class="strong nb-name">All Categories</span>', selected: true, },{%endspaceless%}
+    ]
+    </script>
+<script src="/media/js/choices.min.js"></script>
+{%endblock%}
 {% block content %}
 <main class="wide">
     <div class="single-col">
@@ -8,35 +16,69 @@
     <p>The goal is for users of all levels to learn and share with each other, please treat this discussion forum with the same respect you would a public park. Remember to be kind, courteous and forgiving.</p>
     </span>
     </div>
+    <div class="">
+
+        <div id="list-header">
+            <div id="choices-container" class="flex-wrapper">
+                <ul class="list dropmenu-list list-style-none notebook-list" id="category-list">{% for object in category_list %}
+                    <li ><a class="name" href="{{object.get_absolute_url}}"><span class="color-box" style="background-color: {{object.color_rgb}}"></span><span class="strong nb-name">{{object.name}}</span> x {{object.note_count}}</a></li>
+                {%endfor%}</ul>
+            </div>
+        </div>
+
+
+
+
+
+
+
+        {% if messages %}
+        <ul class="messages">
+            {% for message in messages %}
+                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+                    {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+    </div>
 <table id="" class="topic-list">
     <thead>
         <tr>
             <th data-sort-order="default" class="default">Topic</th>
-            <th data-sort-order="category" class="category sortable">Category</th>
-            <th data-sort-order="posters" class="posters">Users</th>
-            <th data-sort-order="posts" class="posts sortable num">Replies</th>
-            <th data-sort-order="views" class="views sortable num">Views</th>
-            <th data-sort-order="activity" class="activity sortable num">Activity</th>
+            <th data-sort-order="users" class="topic-users sortable num"></th>
+            <th data-sort-order="posts" class="topic-posts sortable num">Replies</th>
+            <th data-sort-order="views" class="topic-views sortable num">Views</th>
+            <th data-sort-order="activity" class="topic-age">Activity</th>
         </tr>
     </thead>
-<tbody>
+    <tbody>
     {% for object in object_list %}
-    <tr data-topic-id="" id="ember1226" class="topic-list-item category-meta has-excerpt pinned ember-view">
-        <td class="main-link clearfix" colspan="1">
-            <span class="link-top-line">
-                <div class="topic-statuses">
-                    <a href="" title="This topic is pinned for you; it will display at the top of its category" class="topic-status"><svg class="fa d-icon d-icon-thumbtack svg-icon pinned svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#thumbtack"></use></svg></a>
-                </div>
-                <a href="/t/lets-use-math-my-nerds/10030" class="title raw-link raw-topic-link" data-topic-id="10030">Let’s use math my nerds</a>
-                <span class="topic-post-badges"></span>
-            </span>
-            <div class="topic-excerpt">For a while we had either to render math outside of the forum or using some kind of ascii art for them. But this is over now. We added the offical math plugin to our instance. And yes asciimath is enabled too. 
-$$
-E=mc…
-            <a href="/t/lets-use-math-my-nerds/10030">read more</a>
-            </div>
-        </td>
-    </tr>
+        <tr id="{{object.id}}" class="topic-list-item">
+            <td class="" colspan="1">
+                {% if object.statuses%}<div class="topic-statuses">
+                        <a href="" title="" class="topic-status"><svg class="fa d-icon d-icon-thumbtack svg-icon pinned svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#thumbtack"></use></svg></a>
+                </div>{%endif%}
+                    <a href="{{object.get_absolute_url}}" class="title" data-topic-id="{{object.id}}">{{object.title}}</a>
+                    <span class="topic-post-badges"></span>
+                    {% if object.pinned %}<div class="topic-excerpt">{{object.except}}
+                        <a href="/t/lets-use-math-my-nerds/10030">read more</a>{%endif%}
+                    <div class="category">
+                    <a href="{{object.category.get_absolute_url}}"><span class="color-box" style="background-color: {{object.category.color_rgb}}"></span>{{object.category}}</a>
+                    </div>
+            </td>
+            <td class="topic-users">
+                {% for user in object.user_set.all %}<a href="{{user.get_forum_url}}"><img alt="avatar for {{user}}" src="{{user.get_avatar_url}}" /></a>{%endfor%}
+            </td>
+            <td class="topic-posts center">
+                {{object.reply_count}}
+            </td>
+            <td class="topic-views center">
+                {{object.views}}
+            </td>
+            <td class="topic-age center">
+            </td>
+        </tr>
     {% endfor %}
 </table>
 </main>