refactored out thread rendering; vote

lms/static/coffee/src/discussion.coffee

@@ -9,6 +9,7 @@ $ ->
     $('#open_close_accordion a').click @toggle
     $('#accordion').show()
 
+
   $("section.discussion").each (index, discussion) ->
     Discussion.bindDiscussionEvents(discussion)
 
@@ -32,7 +33,7 @@ Discussion =
     }[name]
 
   handleAnchorAndReload: (response) ->
-    window.location = window.location.pathname + "#" + response['id']
+    #window.location = window.location.pathname + "#" + response['id']
     window.location.reload()
 
   bindContentEvents: (content) ->
@@ -100,12 +101,26 @@ Discussion =
           Discussion.handleAnchorAndReload(response)
       , 'json'
 
+    handleVote = (elem, value) ->
+      contentType = if $content.hasClass("thread") then "thread" else "comment"
+      url = Discussion.urlFor("#{value}vote_#{contentType}", $content.attr("_id"))
+      $.post url, {}, (response, textStatus) ->
+        if textStatus == "success"
+          Discussion.handleAnchorAndReload(response)
+      , 'json'
+          
     $local(".discussion-reply").click ->
       handleReply(this)
 
     $local(".discussion-cancel-reply").click ->
       handleCancelReply(this)
 
+    $local(".discussion-vote-up").click ->
+      handleVote(this, "up")
+
+    $local(".discussion-vote-down").click ->
+      handleVote(this, "down")
+
   bindDiscussionEvents: (discussion) ->
     $discussion = $(discussion)
     $discussionNonContent = $discussion.children(".discussion-non-content")

lms/static/sass/_discussion.scss

-$comment_margin_left: 20px;
+$comment_margin_left: 30px;
 $discussion_title_size: 1.6em;
 $comment_title_size: 1.2em;
 $comment_body_size: 1.0em;
@@ -45,6 +45,33 @@ $discussion_input_width: 60%;
     margin-bottom: 20px;
     display: block;
   }
+  .discussion-votes {
+    margin-right: 8px;
+    margin-top: 5px;
+    text-align: center;
+    height: 40px;
+    float: left;
+    .discussion-vote-count {
+      font-size: $comment_body_size;
+      @include discussion-font;
+    }
+    a.discussion-vote {
+      display: block;
+      color: black;
+      font-weight: bold;
+      font-size: 15px;
+      &.discussion-vote-up {
+        margin-bottom: 3px;
+      }
+      &.discussion-vote-down {
+        margin-top: 3px;
+      }
+    }
+  }
+  .discussion-right-wrapper {
+    min-height: 40px;
+    float: left;
+  }
   .new-post-form {
     .new-post-title, .new-post-body {
       @include discussion-font;
@@ -105,6 +132,8 @@ $discussion_input_width: 60%;
       }
     }
     .discussion-content {
+      margin-top: 10px;
+      overflow: hidden;
       .discussion-content-edit {
         .comment-edit {
           @include discussion-font;
@@ -118,16 +147,20 @@ $discussion_input_width: 60%;
     .comments {
       //display: none;
       margin-left: $comment_margin_left;
-      
+      overflow: hidden;
       .comment {
         .comment-body {
           @include discussion-font;
           font-size: $comment_body_size;
-          margin-top: 10px;
+          margin-top: 3px;
           display: block;
           color: black;
         }
       }
+      .discussion-votes {
+        margin-right: 6px;
+        margin-top: 6px;
+      }
     }
   }
 

lms/templates/discussion/inline.html

-<%! from django.core.urlresolvers import reverse %>
-
-<%
-def url_for(thread_id):
-  return reverse('django_comment_client.forum.views.single_thread', args=[thread_id])
-%>
-
-
+<%namespace name="renderer" file="thread.html"/>
 
 <section class="discussion">
   <div class="discussion-non-content">
@@ -18,61 +11,6 @@ def url_for(thread_id):
     </form>
   </div>
   % for thread in threads:
-    ${render_thread(thread)}
+    ${renderer.render_thread(thread, edit_thread=False, show_comments=False)}
   % endfor
 </section>
-
-<%def name="render_thread(thread, edit_thread=False, show_comments=False)">
-  <div class="thread" _id="${thread['id']}">
-    <div class="discussion-content">
-      <a class="thread-title" name="${thread['id']}" href="${url_for(thread['id'])}">${thread['title']}</a>
-      <div class="discussion-content-view">
-        <div class="thread-body">${thread['body']}</div>
-        <div class="info">
-          ${render_info(thread)}
-          % if edit_thread:
-            ${render_reply('')}
-            ${render_edit('')}
-          % endif
-        </div>
-      </div>
-    </div>
-    % if show_comments:
-      <div class="comments">
-        ${render_comments(thread['children'])}
-      </div>
-    % endif
-  </div>
-</%def>
-
-<%def name="render_comments(comments)">
-  % for comment in comments:
-    <div class="comment" _id="${comment['id']}">
-      <div class="discussion-content">
-        <div class="discussion-content-view">
-          <a class="comment-body" name="${comment['id']}">${comment['body']}</a>
-          <div class="info">
-            ${render_info(comment)}
-            ${render_reply('')}
-            ${render_edit('')}
-          </div>
-        </div>
-      </div>
-      <div class="comments">
-        ${render_comments(comment['children'])}
-      </div>
-    </div>
-  % endfor
-</%def>
-
-<%def name="render_info(content)">
-  ${time_ago_in_words(parse(content['updated_at']))} ago by user No.${content['user_id']}
-</%def>
-
-<%def name="render_reply(url)">
-  <a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
-</%def>
-
-<%def name="render_edit(url)">
-  <a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
-</%def>

lms/templates/discussion/single_thread.html

-<%! from django.core.urlresolvers import reverse %>
+<%namespace name="renderer" file="thread.html"/>
 
 <section class="discussion">
   <a class="discussion-title" href="javascript:void(0)">Discussion</a>
-  ${render_thread(thread, edit_thread=True, show_comments=True)}
+  ${renderer.render_thread(thread, edit_thread=True, show_comments=True)}
 </section>
-
-<%def name="render_thread(thread, edit_thread=False, show_comments=False)">
-  <div class="thread" _id="${thread['id']}">
-    <div class="discussion-content">
-      <a class="thread-title" name="${thread['id']}" href="javascript:void(0)">${thread['title']}</a>
-      <div class="discussion-content-view">
-        <div class="thread-body">${thread['body']}</div>
-        <div class="info">
-          ${render_info(thread)}
-          % if edit_thread:
-            ${render_reply('')}
-            ${render_edit('')}
-          % endif
-        </div>
-      </div>
-    </div>
-    % if show_comments:
-      <div class="comments">
-        ${render_comments(thread['children'])}
-      </div>
-    % endif
-  </div>
-</%def>
-
-<%def name="render_comments(comments)">
-  % for comment in comments:
-    <div class="comment" _id="${comment['id']}">
-      <div class="discussion-content">
-        <div class="discussion-content-view">
-          <a class="comment-body" name="${comment['id']}">${comment['body']}</a>
-          <div class="info">
-            ${render_info(comment)}
-            ${render_reply('')}
-            ${render_edit('')}
-          </div>
-        </div>
-      </div>
-      <div class="comments">
-        ${render_comments(comment['children'])}
-      </div>
-    </div>
-  % endfor
-</%def>
-
-<%def name="render_info(content)">
-  ${time_ago_in_words(parse(content['updated_at']))} ago by user No.${content['user_id']}
-</%def>
-
-<%def name="render_reply(url)">
-  <a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
-</%def>
-
-<%def name="render_edit(url)">
-  <a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
-</%def>

lms/templates/discussion/thread.html

+<%! from django.core.urlresolvers import reverse %>
+<%! from datehelper import time_ago_in_words %>
+<%! from dateutil.parser import parse %>
+
+
+
+<%def name="render_thread(thread, edit_thread=False, show_comments=False)">
+  <%
+    if show_comments:
+      url_for_thread = ""
+    else:
+      thread_id = thread['id']
+      url_for_thread = reverse('django_comment_client.forum.views.single_thread', args=[thread_id])
+  %>
+  <div class="thread" _id="${thread['id']}">
+    <div class="discussion-content">
+      ${render_vote(thread)}
+      <div class="discussion-right-wrapper clearfix">
+        <a class="thread-title" name="${thread['id']}" href="${url_for_thread}">${thread['title']}</a>
+        <div class="discussion-content-view">
+          <div class="thread-body">${thread['body']}</div>
+          <div class="info">
+            ${render_info(thread)}
+            % if edit_thread:
+              ${render_reply()}
+              ${render_edit()}
+              ${render_watch_thread()}
+            % endif
+          </div>
+        </div>
+      </div>
+    </div>
+    % if show_comments:
+      <div class="comments">
+        ${render_comments(thread['children'])}
+      </div>
+    % endif
+  </div>
+</%def>
+
+<%def name="render_comments(comments)">
+  % for comment in comments:
+    <div class="comment" _id="${comment['id']}">
+      <div class="discussion-content">
+        ${render_vote(comment)}
+        <div class="discussion-right-wrapper">
+          <div class="discussion-content-view">
+            <a class="comment-body" name="${comment['id']}">${comment['body']}</a>
+            <div class="info">
+              ${render_info(comment)}
+              ${render_reply()}
+              ${render_edit()}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="comments">
+        ${render_comments(comment['children'])}
+      </div>
+    </div>
+  % endfor
+</%def>
+
+<%def name="render_info(content)">
+  ${time_ago_in_words(parse(content['updated_at']))} ago by user No.${content['user_id']}
+</%def>
+
+<%def name="render_reply()">
+  <a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
+</%def>
+
+<%def name="render_edit()">
+  <a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
+</%def>
+
+<%def name="render_watch_thread()">
+  <a class="discussion-link discussion-watch-thread" href="javascript:void(0)">Watch</a>
+</%def>
+
+
+<%def name="render_vote(content)">
+  <%
+    upvote = "&#x2C4;"
+    downvote = "&#x2C5;"
+  %>
+  <div class="discussion-votes" title="Current votes: ${content['votes']['point']}">
+    <a class="discussion-vote discussion-vote-up" href="javascript:void(0)" title="Current votes: ${content['votes']['point']}">${upvote}</a>
+    <a class="discussion-vote discussion-vote-down" href="javascript:void(0)" title="Current votes: ${content['votes']['point']}">${downvote}</a>
+  </div>
+</%def>