Skip to content

E
edx-platform
Commit 845ca43e by Brittany Cheng
Options

inline and forum styles

parent 07ebc833
Showing with 156 additions and 22 deletions
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 → 100644
<%! 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment