inline and forum styles

common/lib/xmodule/xmodule/discussion_module.py

@@ -15,7 +15,7 @@ class DiscussionModule(XModule):
         context = {
             'discussion_id': self.discussion_id,
         }
-        return self.system.render_template('discussion/_show_discussion.html', context)
+        return self.system.render_template('discussion/_discussion_module.html', context)
 
     def __init__(self, system, location, definition, instance_state=None, shared_state=None, **kwargs):
         XModule.__init__(self, system, location, definition, instance_state, shared_state, **kwargs)

lms/static/sass/_discussion.scss

@@ -24,8 +24,13 @@ $discussion_input_width: 90%;
 }
 
 .discussion {
+  .search-wrapper-inline {
+    width: 80%;
+    display: inline-block;
+    margin-top: 2%;
+  }
   .discussion-search-form {
-    margin-bottom: flex-gutter(4);
+    margin-bottom: 1%;
     display: inline-block;
     width: flex-grid(12);
     .discussion-link {
@@ -47,24 +52,51 @@ $discussion_input_width: 90%;
       float: left;
       width: 72%;
     }
-    .search-within {
-      display: block;
-      margin-top: flex-gutter();
-    }
-    .discussion-search-within-board {
-      font-style: normal;
-      font: inherit;
-    }
+  }
+  .search-within {
+    display: block;
+    margin-bottom: 3%;
+  }
+  .discussion-search-within-board {
+    font-style: normal;
+    font: inherit;
   }
   .control-button {
     @include button;
     @include discussion-font;
+    display: inline-block;
+    margin-bottom: 3%;
     color: white;
     font-weight: bold;
     padding-top: 9px;
     font-size: inherit;
     width: inherit;
     text-decoration: none;
+    border: 1px solid #6F6F6F;
+    -webkit-box-shadow: inset 0 1px 0 #A2A2A2,0 0 3px #CCC;
+    -moz-box-shadow: inset 0 1px 0 #a2a2a2,0 0 3px #ccc;
+    box-shadow: inset 0 1px 0 #A2A2A2,0 0 3px #CCC;
+    background-color: #959595;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595),color-stop(100%, #7B7B7B));
+    background-image: -webkit-linear-gradient(top, #959595,#7B7B7B);
+    background-image: -moz-linear-gradient(top, #959595,#7B7B7B);
+    background-image: -ms-linear-gradient(top, #959595,#7B7B7B);
+    background-image: -o-linear-gradient(top, #959595,#7B7B7B);
+    background-image: linear-gradient(top, #959595,#7B7B7B);
+    text-shadow: none;
+    &:hover {
+      -webkit-box-shadow: inset 0 1px 0 #BBB,0 0 3px #CCC;
+      -moz-box-shadow: inset 0 1px 0 #bbb,0 0 3px #ccc;
+      box-shadow: inset 0 1px 0 #BBB,0 0 3px #CCC;
+      background-color: #A2A2A2;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A2A2A2),color-stop(100%, #7B7B7B));
+      background-image: -webkit-linear-gradient(top, #A2A2A2,#7B7B7B);
+      background-image: -moz-linear-gradient(top, #A2A2A2,#7B7B7B);
+      background-image: -ms-linear-gradient(top, #A2A2A2,#7B7B7B);
+      background-image: -o-linear-gradient(top, #A2A2A2,#7B7B7B);
+      background-image: linear-gradient(top, #A2A2A2,#7B7B7B);
+      border: 1px solid #555;
+    }
   }
   .discussion-title {
     @include discussion-font;
@@ -122,7 +154,7 @@ $discussion_input_width: 90%;
     float: left;
     width: 85%;
   }
-  .new-post-form, .discussion-thread-edit{
+  .new-post-form, .discussion-thread-edit {
     .title-input, .body-input {
       font-style: normal;
       font: inherit;
@@ -177,8 +209,6 @@ $discussion_input_width: 90%;
   }
   .thread {
     //display: none;
-    margin-top: 30px;
-    margin-bottom: 30px;
     .thread-title {
       @include discussion-font;
       @include discussion-clickable;
@@ -240,10 +270,9 @@ $discussion_input_width: 90%;
       }
     }
     .discussion-content {
-      margin-top: 10px;
       overflow: hidden;
       border-top: lightgray 1px solid;
-      padding-top: 20px;
+      padding: 3% 0;
       .discussion-reply-new {
         margin-left: $comment_margin_left;
         .reply-body {

lms/templates/discussion/_forum.html

@@ -6,6 +6,11 @@
       <a class="discussion-title" href="javascript:void(0)">Discussion</a>
     </div>
     ${search_bar}
+    <div class="search-within">
+      <input type="checkbox" id="discussion-search-within-board-${discussion_id}" class="discussion-search-within-board" checked/>
+      <label for="discussion-search-within-board-${discussion_id}" class="discussion-search-within-board">Search within board</label>
+    </div>
+
     <div class="discussion-new-post control-button" href="javascript:void(0)">New Post</div>
   </div>
   % for thread in threads:

lms/templates/discussion/_inline.html

@@ -2,10 +2,9 @@
 
 <section class="discussion" _id="${discussion_id}">
   <div class="discussion-non-content">
-    <div class="discussion-title-wrapper">
-      <a class="discussion-title" href="javascript:void(0)">Discussion</a>
+    <div class="search-wrapper-inline">
+      ${search_bar}
     </div>
-    ${search_bar}
     <div class="discussion-new-post control-button" href="javascript:void(0)">New Post</div>
   </div>
   % for thread in threads:

lms/templates/discussion/_search_bar.html

@@ -8,8 +8,4 @@ def url_for_search():
 <form action="${url_for_search()}" method="get" class="discussion-search-form">
   <input class="search-input" type="text" value="${text}" id="keywords" autocomplete="off"/>
   <div class="discussion-link" href="javascript:void(0)">Search posts</div>
-  <div class="search-within">
-    <input type="checkbox" id="discussion-search-within-board-${discussion_id}" class="discussion-search-within-board" checked/>
-    <label for="discussion-search-within-board-${discussion_id}" class="discussion-search-within-board">Search within board</label>
-  </div>
 </form>

lms/templates/discussion/thread.html

@@ -0,0 +1,105 @@
+<%! from django.core.urlresolvers import reverse %>
+<%! from datehelper import time_ago_in_words %>
+<%! from dateutil.parser import parse %>
+<%! import urllib %>
+
+<%def name="render_thread(course_id, thread, edit_thread=False, show_comments=False)">
+  <div class="thread" _id="${thread['id']}">
+    ${render_content(thread, "thread", edit_thread=edit_thread, show_comments=show_comments)}
+    % if show_comments:
+      ${render_comments(thread['children'])}
+    % endif
+  </div>
+</%def>
+
+<%def name="render_comments(comments)">
+  <div class="comments">
+    % for comment in comments:
+      <div class="comment" _id="${comment['id']}">
+        ${render_content(comment, "comment")}
+        <div class="comments">
+          ${render_comments(comment['children'])}
+        </div>
+      </div>
+    % endfor
+  </div>
+</%def>
+
+<%def name="render_content(content, type, **kwargs)">
+  <div class="discussion-content">
+    <div class="discussion-content-wrapper clearfix">
+      ${render_vote(content)}
+      <div class="discussion-right-wrapper clearfix">
+        ${render_title(content, type, **kwargs)}
+        <div class="discussion-content-view">
+          <div class="content-body ${type}-body">${content['body'] | h}</div>
+          <div class="content-raw-body ${type}-raw-body" style="display: none">${content['body'] | h}</div>
+          ${render_tags(content, type, **kwargs)}
+          ${render_bottom_bar(content, type, **kwargs)}
+        </div>
+      </div>
+    </div>
+  </div>
+</%def>
+
+<%def name="render_title(content, type, **kwargs)">
+  <%
+    if type == "thread":
+      if kwargs.get('show_comments', False):
+        url_for_thread = ""
+      else:
+        url_for_thread = reverse('django_comment_client.forum.views.single_thread', args=[course_id, content['commentable_id'], content['id']])
+  %>
+  % if type == "thread":
+    <a class="thread-title" name="${content['id']}" href="${url_for_thread}">${content['title'] | h}</a>
+  % endif
+</%def>
+
+<%def name="render_tags(content, type, **kwargs)">
+  <%
+    def url_for_tags(tags):
+      return reverse('django_comment_client.forum.views.search', args=[course_id]) + '?' + urllib.urlencode({'tags': ",".join(tags)})
+  %>
+  % if type == "thread":
+    <div class="thread-tags">
+      % for tag in content['tags']:
+        <a class="thread-tag" href="${url_for_tags([tag])}">${tag | h}</a>
+      % endfor
+    </div>
+    <div class="thread-raw-tags" style="display: none">${",".join(content['tags']) | h}</div>
+  % endif
+</%def>
+
+<%def name="render_bottom_bar(content, type, **kwargs)">
+  <div class="info">
+    ${render_info(content)}
+    % if type == "thread" and kwargs['edit_thread'] or type == "comment":
+      ${render_link("discussion-link discussion-reply", "Reply")}
+      ${render_link("discussion-link discussion-edit", "Edit")}
+    % endif
+  </div>
+</%def>
+
+<%def name="render_info(content)">
+  ${time_ago_in_words(parse(content['updated_at']))} ago by
+  % if content['anonymous']:
+    anonymous
+  % else:
+    user No.${content['user_id']}
+  % endif
+  % if content.get('comments_count', -1) >= 0:
+    , ${content['comments_count']} comment(s)
+  % endif
+</%def>
+
+<%def name="render_link(cls, html)">
+  <a class="${cls}" href="javascript:void(0)">${html}</a>
+</%def>
+
+<%def name="render_vote(content)">
+  <div class="discussion-votes">
+    ${render_link("discussion-vote discussion-vote-up", "&#x2C4;")}
+    ${content['votes']['point']}
+    ${render_link("discussion-vote discussion-vote-down", "&#x2C5;")}
+  </div>
+</%def>