Refactored Javascript, started on forums

1 files changed, 114 insertions, 0 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%}