Skip to content

E
edx-platform
Commit 7dd4d6c7 by Matthew Mongeau
Options

Get voting hooked up

parent 505fb681
Showing with 923 additions and 1091 deletions
:w 0 → 100644
if Backbone?
class @Content extends Backbone.Model
template: -> DiscussionUtil.getTemplate('_content')
actions:
editable: '.admin-edit'
can_reply: '.discussion-reply'
can_endorse: '.admin-endorse'
can_delete: '.admin-delete'
can_openclose: '.admin-openclose'
urlMappers: {}
urlFor: (name) ->
@urlMappers[name].apply(@)
can: (action) ->
DiscussionUtil.getContentInfo @id, action
updateInfo: (info) ->
@set('ability', info.ability)
@set('voted', info.voted)
@set('subscribed', info.subscribed)
addComment: (comment, options) ->
options ||= {}
if not options.silent
thread = @get('thread')
comments_count = parseInt(thread.get('comments_count'))
thread.set('comments_count', comments_count + 1)
@get('children').push comment
model = new Comment $.extend {}, comment, { thread: @get('thread') }
@get('comments').add model
model
removeComment: (comment) ->
thread = @get('thread')
comments_count = parseInt(thread.get('comments_count'))
thread.set('comments_count', comments_count - 1 - comment.getCommentsCount())
resetComments: (children) ->
@set 'children', []
@set 'comments', new Comments()
for comment in (children || [])
@addComment comment, { silent: true }
initialize: ->
DiscussionUtil.addContent @id, @
@resetComments(@get('children'))
class @ContentView extends Backbone.View
$: (selector) ->
@$local.find(selector)
partial:
endorsed: (endorsed) ->
if endorsed
@$el.addClass("endorsed")
else
@$el.removeClass("endorsed")
closed: (closed) -> # we should just re-render the whole thread, or update according to new abilities
if closed
@$el.addClass("closed")
@$(".admin-openclose").text "Re-open Thread"
else
@$el.removeClass("closed")
@$(".admin-openclose").text "Close Thread"
voted: (voted) ->
@$(".discussion-vote-up").removeClass("voted") if voted != "up"
@$(".discussion-vote-down").removeClass("voted") if voted != "down"
@$(".discussion-vote-#{voted}").addClass("voted") if voted in ["up", "down"]
votes_point: (votes_point) ->
@$(".discussion-votes-point").html(votes_point)
comments_count: (comments_count) ->
@$(".comments-count").html(comments_count)
subscribed: (subscribed) ->
if subscribed
@$(".discussion-follow-thread").addClass("discussion-unfollow-thread").html("Unfollow")
else
@$(".discussion-follow-thread").removeClass("discussion-unfollow-thread").html("Follow")
ability: (ability) ->
for action, elemSelector of @model.actions
if not ability[action]
@$(elemSelector).parent().hide()
else
@$(elemSelector).parent().show()
$discussionContent: ->
@_discussionContent ||= @$el.children(".discussion-content")
$showComments: ->
@_showComments ||= @$(".discussion-show-comments")
updateShowComments: ->
if @showed
@$showComments().html @$showComments().html().replace "Show", "Hide"
else
@$showComments().html @$showComments().html().replace "Hide", "Show"
retrieved: ->
@$showComments().hasClass("retrieved")
hideSingleThread: (event) ->
@$el.children(".comments").hide()
@showed = false
@updateShowComments()
showSingleThread: (event) ->
if @retrieved()
@$el.children(".comments").show()
@showed = true
@updateShowComments()
else
$elem = $.merge @$(".thread-title"), @$showComments()
url = @model.urlFor('retrieve')
DiscussionUtil.safeAjax
$elem: $elem
$loading: @$(".discussion-show-comments")
type: "GET"
url: url
success: (response, textStatus) =>
@showed = true
@updateShowComments()
@$showComments().addClass("retrieved")
@$el.children(".comments").replaceWith response.html
@model.resetComments response.content.children
@initCommentViews()
DiscussionUtil.bulkUpdateContentInfo response.annotated_content_info
toggleSingleThread: (event) ->
if @showed
@hideSingleThread(event)
else
@showSingleThread(event)
initCommentViews: ->
@$el.children(".comments").children(".comment").each (index, elem) =>
model = @model.get('comments').find $(elem).attr("_id")
if not model.view
commentView = new CommentView el: elem, model: model
reply: ->
if @model.get('type') == 'thread'
@showSingleThread()
$replyView = @$(".discussion-reply-new")
if $replyView.length
$replyView.show()
else
view = {}
view.id = @model.id
view.showWatchCheckbox = not @model.get('thread').get('subscribed')
html = Mustache.render DiscussionUtil.getTemplate('_reply'), view
@$discussionContent().append html
DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "reply-body"
@$(".discussion-submit-post").click $.proxy(@submitReply, @)
@$(".discussion-cancel-post").click $.proxy(@cancelReply, @)
@$(".discussion-reply").hide()
@$(".discussion-edit").hide()
submitReply: (event) ->
url = @model.urlFor('reply')
body = DiscussionUtil.getWmdContent @$el, $.proxy(@$, @), "reply-body"
anonymous = false || @$(".discussion-post-anonymously").is(":checked")
autowatch = false || @$(".discussion-auto-watch").is(":checked")
DiscussionUtil.safeAjax
$elem: $(event.target)
$loading: $(event.target) if event
url: url
type: "POST"
dataType: 'json'
data:
body: body
anonymous: anonymous
auto_subscribe: autowatch
error: DiscussionUtil.formErrorHandler @$(".discussion-errors")
success: (response, textStatus) =>
DiscussionUtil.clearFormErrors @$(".discussion-errors")
$comment = $(response.html)
@$el.children(".comments").prepend $comment
DiscussionUtil.setWmdContent @$el, $.proxy(@$, @), "reply-body", ""
comment = @model.addComment response.content
commentView = new CommentView el: $comment[0], model: comment
comment.updateInfo response.annotated_content_info
if autowatch
@model.get('thread').set('subscribed', true)
@cancelReply()
cancelReply: ->
$replyView = @$(".discussion-reply-new")
if $replyView.length
$replyView.hide()
@$(".discussion-reply").show()
@$(".discussion-edit").show()
unvote: (event) ->
url = @model.urlFor('unvote')
$elem = @$(".discussion-vote")
DiscussionUtil.safeAjax
$elem: $elem
url: url
type: "POST"
success: (response, textStatus) =>
@model.set('voted', '')
@model.set('votes_point', response.votes.point)
vote: (event, value) ->
url = @model.urlFor("#{value}vote")
$elem = @$(".discussion-vote")
DiscussionUtil.safeAjax
$elem: $elem
url: url
type: "POST"
success: (response, textStatus) =>
@model.set('voted', value)
@model.set('votes_point', response.votes.point)
toggleVote: (event) ->
console.log("HERE")
$elem = $(event.target)
value = $elem.attr("value")
$elem.toggleClass("is-cast")
return false
# if @model.get("voted") == value
# @unvote(event)
# else
# @vote(event, value)
toggleEndorse: (event) ->
$elem = $(event.target)
url = @model.urlFor('endorse')
endorsed = @model.get('endorsed')
data = { endorsed: not endorsed }
DiscussionUtil.safeAjax
$elem: $elem
url: url
data: data
type: "POST"
success: (response, textStatus) =>
@model.set('endorsed', not endorsed)
toggleFollow: (event) ->
$elem = $(event.target)
subscribed = @model.get('subscribed')
if subscribed
url = @model.urlFor('unfollow')
else
url = @model.urlFor('follow')
DiscussionUtil.safeAjax
$elem: $elem
url: url
type: "POST"
success: (response, textStatus) =>
@model.set('subscribed', not subscribed)
toggleClosed: (event) ->
$elem = $(event.target)
url = @model.urlFor('close')
closed = @model.get('closed')
data = { closed: not closed }
DiscussionUtil.safeAjax
$elem: $elem
url: url
type: "POST"
data: data
success: (response, textStatus) =>
@model.set('closed', not closed)
@model.set('ability', response.ability)
edit: (event) ->
@$(".discussion-content-wrapper").hide()
$editView = @$(".discussion-content-edit")
if $editView.length
$editView.show()
else
view = {}
view.id = @model.id
if @model.get('type') == 'thread'
view.title = @model.get('title')
view.body = @model.get('body')
view.tags = @model.get('tags')
else
view.body = @model.get('body')
@$discussionContent().append Mustache.render DiscussionUtil.getTemplate("_edit_#{@model.get('type')}"), view
DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), "#{@model.get('type')}-body-edit"
@$(".thread-tags-edit").tagsInput DiscussionUtil.tagsInputOptions()
@$(".discussion-submit-update").unbind("click").click $.proxy(@submitEdit, @)
@$(".discussion-cancel-update").unbind("click").click $.proxy(@cancelEdit, @)
submitEdit: (event) ->
url = @model.urlFor('update')
data = {}
if @model.get('type') == 'thread'
data.title = @$(".thread-title-edit").val()
data.body = DiscussionUtil.getWmdContent @$el, $.proxy(@$, @), "thread-body-edit"
data.tags = @$(".thread-tags-edit").val()
else
data.body = DiscussionUtil.getWmdContent @$el, $.proxy(@$, @), "comment-body-edit"
DiscussionUtil.safeAjax
$elem: $(event.target)
$loading: $(event.target) if event
url: url
type: "POST"
dataType: 'json'
data: data
error: DiscussionUtil.formErrorHandler @$(".discussion-update-errors")
success: (response, textStatus) =>
DiscussionUtil.clearFormErrors @$(".discussion-update-errors")
@$discussionContent().replaceWith(response.html)
if @model.get('type') == 'thread'
@model = new Thread response.content
else
@model = new Comment $.extend {}, response.content, { thread: @model.get('thread') }
@reconstruct()
@model.updateInfo response.annotated_content_info, { forceUpdate: true }
cancelEdit: (event) ->
@$(".discussion-content-edit").hide()
@$(".discussion-content-wrapper").show()
delete: (event) ->
url = @model.urlFor('delete')
if @model.get('type') == 'thread'
c = confirm "Are you sure to delete thread \"#{@model.get('title')}\"?"
else
c = confirm "Are you sure to delete this comment? "
if not c
return
$elem = $(event.target)
DiscussionUtil.safeAjax
$elem: $elem
url: url
type: "POST"
success: (response, textStatus) =>
@$el.remove()
if @model.get('type') == 'comment'
@model.get('thread').removeComment(@model)
events:
"click .discussion-follow-thread": "toggleFollow"
"click .thread-title": "toggleSingleThread"
"click .discussion-show-comments": "toggleSingleThread"
"click .discussion-reply-thread": "reply"
"click .discussion-reply-comment": "reply"
"click .discussion-cancel-reply": "cancelReply"
"click .discussion-vote-up": "toggleVote"
"click .discussion-vote-down": "toggleVote"
"click .admin-endorse": "toggleEndorse"
"click .admin-openclose": "toggleClosed"
"click .admin-edit": "edit"
"click .admin-delete": "delete"
initLocal: ->
@$local = @$el.children(".local")
@$delegateElement = @$local
initTitle: ->
$contentTitle = @$(".thread-title")
if $contentTitle.length
$contentTitle.html DiscussionUtil.unescapeHighlightTag DiscussionUtil.stripLatexHighlight $contentTitle.html()
initBody: ->
$contentBody = @$(".content-body")
$contentBody.html DiscussionUtil.postMathJaxProcessor DiscussionUtil.markdownWithHighlight $contentBody.html()
MathJax.Hub.Queue ["Typeset", MathJax.Hub, $contentBody.attr("id")]
initTimeago: ->
@$("span.timeago").timeago()
renderPartial: ->
for attr, value of @model.changedAttributes()
if @partial[attr]
@partial[attr].apply(@, [value])
initBindings: ->
@model.view = @
@model.bind('change', @renderPartial, @)
initialize: ->
@initBindings()
@initLocal()
@initTimeago()
@initTitle()
@initBody()
@initCommentViews()
reconstruct: ->
@initBindings()
@initLocal()
@initTimeago()
@initTitle()
@initBody()
@delegateEvents()
class @Thread extends @Content
urlMappers:
'retrieve' : -> DiscussionUtil.urlFor('retrieve_single_thread', @discussion.id, @id)
'reply' : -> DiscussionUtil.urlFor('create_comment', @id)
'unvote' : -> DiscussionUtil.urlFor("undo_vote_for_#{@get('type')}", @id)
'upvote' : -> DiscussionUtil.urlFor("upvote_#{@get('type')}", @id)
'downvote' : -> DiscussionUtil.urlFor("downvote_#{@get('type')}", @id)
'close' : -> DiscussionUtil.urlFor('openclose_thread', @id)
'update' : -> DiscussionUtil.urlFor('update_thread', @id)
'delete' : -> DiscussionUtil.urlFor('delete_thread', @id)
'follow' : -> DiscussionUtil.urlFor('follow_thread', @id)
'unfollow' : -> DiscussionUtil.urlFor('unfollow_thread', @id)
initialize: ->
@set('thread', @)
super()
class @ThreadView extends @ContentView
class @Comment extends @Content
urlMappers:
'reply': -> DiscussionUtil.urlFor('create_sub_comment', @id)
'unvote': -> DiscussionUtil.urlFor("undo_vote_for_#{@get('type')}", @id)
'upvote': -> DiscussionUtil.urlFor("upvote_#{@get('type')}", @id)
'downvote': -> DiscussionUtil.urlFor("downvote_#{@get('type')}", @id)
'endorse': -> DiscussionUtil.urlFor('endorse_comment', @id)
'update': -> DiscussionUtil.urlFor('update_comment', @id)
'delete': -> DiscussionUtil.urlFor('delete_comment', @id)
getCommentsCount: ->
count = 0
@get('comments').each (comment) ->
count += comment.getCommentsCount() + 1
count
class @CommentView extends @ContentView
class @Comments extends Backbone.Collection
model: Comment
initialize: ->
@bind "add", (item) =>
item.collection = @
find: (id) ->
_.first @where(id: id)
lms/djangoapps/django_comment_client/forum/views.py
...@@ -182,6 +182,7 @@ def render_single_thread(request, discussion_id, course_id, thread_id): ...@@ -182,6 +182,7 @@ def render_single_thread(request, discussion_id, course_id, thread_id):
annotated_content_info = utils.get_annotated_content_infos(course_id, thread=thread, user=request.user, user_info=user_info) annotated_content_info = utils.get_annotated_content_infos(course_id, thread=thread, user=request.user, user_info=user_info)
log.debug(annotated_content_info)
context = { context = {
'discussion_id': discussion_id, 'discussion_id': discussion_id,
'thread': thread, 'thread': thread,
...@@ -191,6 +192,7 @@ def render_single_thread(request, discussion_id, course_id, thread_id): ...@@ -191,6 +192,7 @@ def render_single_thread(request, discussion_id, course_id, thread_id):
'discussion_data': json.dumps({ discussion_id: [utils.safe_content(thread)] }), 'discussion_data': json.dumps({ discussion_id: [utils.safe_content(thread)] }),
'threads': threads, 'threads': threads,
} }
return render_to_string('discussion/_single_thread.html', context) return render_to_string('discussion/_single_thread.html', context)
def single_thread(request, course_id, discussion_id, thread_id): def single_thread(request, course_id, discussion_id, thread_id):
...@@ -223,10 +225,18 @@ def single_thread(request, course_id, discussion_id, thread_id): ...@@ -223,10 +225,18 @@ def single_thread(request, course_id, discussion_id, thread_id):
course_id, course_id,
) )
user_info = cc.User.from_django_user(request.user).to_dict()
thread = cc.Thread.find(thread_id).retrieve(recursive=True)
annotated_content_info = utils.get_annotated_content_infos(course_id, thread=thread, user=request.user, user_info=user_info)
context = { context = {
'discussion_id': discussion_id, 'discussion_id': discussion_id,
'csrf': csrf(request)['csrf_token'], 'csrf': csrf(request)['csrf_token'],
'init': '', 'init': '',
'thread': json.dumps(utils.safe_content(thread)),
'annotated_content_info': json.dumps(annotated_content_info),
'content': render_single_thread(request, discussion_id, course_id, thread_id), 'content': render_single_thread(request, discussion_id, course_id, thread_id),
'course': course, 'course': course,
'recent_active_threads': recent_active_threads, 'recent_active_threads': recent_active_threads,
......
lms/static/coffee/src/discussion/content.coffee
...@@ -227,12 +227,15 @@ if Backbone? ...@@ -227,12 +227,15 @@ if Backbone?
@model.set('votes_point', response.votes.point) @model.set('votes_point', response.votes.point)
toggleVote: (event) -> toggleVote: (event) ->
console.log("HERE")
$elem = $(event.target) $elem = $(event.target)
value = $elem.attr("value") value = $elem.attr("value")
if @model.get("voted") == value $elem.toggleClass("is-cast")
@unvote(event) return false
else # if @model.get("voted") == value
@vote(event, value) # @unvote(event)
# else
# @vote(event, value)
toggleEndorse: (event) -> toggleEndorse: (event) ->
$elem = $(event.target) $elem = $(event.target)
......
lms/static/coffee/src/discussion/main.coffee
$ -> class @DiscussionUser
constructor: (content_info) ->
@content_info = content_info
following: (thread) ->
@content_info[thread.id]['subscribed'] == true
voted: (thread) ->
@content_info[thread.id]['voted'] == 'up'
class @DiscussionThreadView extends Backbone.View
events:
"click .discussion-vote-up": "toggleVote"
"click .dogear": "toggleFollowing"
initialize: (options) ->
@user = options['user']
@model.bind "change", @updateModelDetails
updateModelDetails: =>
@$(".votes-count-number").html(@model.get("votes")["up_count"])
render: ->
if @user.following(@model)
@$(".dogear").addClass("is-followed")
if @user.voted(@model)
@$(".vote-btn").addClass("is-cast")
toggleVote: ->
@$(".vote-btn").toggleClass("is-cast")
if @$(".vote-btn").hasClass("is-cast")
@vote()
else
@unvote()
toggleFollowing: ->
@$(".dogear").toggleClass("is-followed")
vote: ->
url = @model.urlFor("upvote")
@$(".votes-count-number").html(parseInt(@$(".votes-count-number").html()) + 1)
DiscussionUtil.safeAjax
$elem: @$(".discussion-vote")
url: url
type: "POST"
success: (response, textStatus) =>
if textStatus == 'success'
@model.set(response)
unvote: ->
url = @model.urlFor("unvote")
@$(".votes-count-number").html(parseInt(@$(".votes-count-number").html()) - 1)
DiscussionUtil.safeAjax
$elem: @$(".discussion-vote")
url: url
type: "POST"
success: (response, textStatus) =>
if textStatus == 'success'
@model.set(response)
$ ->
window.$$contents = {} window.$$contents = {}
window.$$discussions = {} window.$$discussions = {}
$(".discussion-module").each (index, elem) -> # $(".discussion-module").each (index, elem) ->
view = new DiscussionModuleView(el: elem) # view = new DiscussionModuleView(el: elem)
# $("section.discussion").each (index, elem) ->
# discussionData = DiscussionUtil.getDiscussionData($(elem).attr("_id"))
# discussion = new Discussion()
# discussion.reset(discussionData, {silent: false})
# view = new DiscussionView(el: elem, model: discussion)
$("section.discussion").each (index, elem) -> # if window.$$annotated_content_info?
discussionData = DiscussionUtil.getDiscussionData($(elem).attr("_id")) # DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info)
discussion = new Discussion()
discussion.reset(discussionData, {silent: false})
view = new DiscussionView(el: elem, model: discussion)
if window.$$annotated_content_info? # $userProfile = $(".discussion-sidebar>.user-profile")
DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info) # if $userProfile.length
# console.log "initialize user profile"
# view = new DiscussionUserProfileView(el: $userProfile[0])
$userProfile = $(".discussion-sidebar>.user-profile")
if $userProfile.length
console.log "initialize user profile"
view = new DiscussionUserProfileView(el: $userProfile[0])
lms/static/sass/_discussion.scss
.container { @mixin blue-button {
.discussion-wrapper { display: block;
display: table; height: 33px;
table-layout: fixed; margin: 12px;
width: 100%; padding: 0 15px;
height: 500px; border-radius: 3px;
background: #fff; border: 1px solid #4697c1;
border-radius: 3px; background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
border: 1px solid #aaa; font-size: 13px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-weight: 700;
ul { line-height: 30px;
list-style: none; color: #fff;
margin: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
padding: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.discussion { &:hover {
display: table-cell; border-color: #297095;
vertical-align: top; background: -webkit-linear-gradient(top, #4fbbe4, #2090d0);
width: 72.3%; }
padding: 40px; }
h1 { .discussion-body {
font-size: 28px;
font-weight: 700;
}
.posted-details { .vote-btn {
font-size: 12px; float: right;
font-style: italic; display: block;
color: #737373; height: 27px;
} padding: 0 8px;
border-radius: 5px;
border: 1px solid #b2b2b2;
background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
font-size: 12px;
font-weight: 700;
line-height: 25px;
color: #333;
.plus-icon {
float: left;
margin-right: 6px;
font-size: 18px;
color: #17b429;
}
p + p { &.is-cast {
margin-top: 20px; border-color: #379a42;
} background: -webkit-linear-gradient(top, #50cc5e, #3db84b);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2);
.plus-icon {
color: #336a39;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
} }
}
.discussion-sidebar {
display: table-cell; .new-post-btn {
vertical-align: top; @include blue-button;
width: 27.7%; float: right;
background: #f6f6f6; }
border-radius: 3px 0 0 3px;
border-right: 3px solid #bcbcbc;
.sort-bar { .new-post-icon {
height: 27px; display: block;
border-bottom: 1px solid #a3a3a3; float: left;
background: -webkit-linear-gradient(top, #cdcdcd, #b6b6b6); width: 16px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset; height: 17px;
margin: 7px 7px 0 0;
background: url(../images/new-post-icon.png) no-repeat;
}
a { .post-search {
display: block; float: right;
float: right; }
height: 27px;
margin-right: 10px;
font-size: 11px;
font-weight: bold;
line-height: 23px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
.sort-label { .post-search-field {
font-size: 9px; width: 280px;
text-transform: uppercase; height: 30px;
} padding: 0 15px 0 30px;
} margin-top: 14px;
} border: 1px solid #acacac;
border-radius: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
background: url(../images/search-icon.png) no-repeat 8px center #fff;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: 30px;
color: #333;
outline: 0;
-webkit-transition: border-color .1s;
.board-drop-btn { &:focus {
display: block; border-color: #4697c1;
height: 60px;
border-bottom: 1px solid #a3a3a3;
border-radius: 3px 0 0 0;
background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
font-size: 16px;
font-weight: 700;
line-height: 58px;
text-align: center;
color: #333 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
} }
}
h1, ul, li, a, ol {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
a {
text-decoration: none;
color: #009fe2;
}
display: table;
table-layout: fixed;
width: 100%;
height: 500px;
background: #fff;
border-radius: 3px;
border: 1px solid #aaa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
.sidebar {
display: table-cell;
vertical-align: top;
width: 27.7%;
background: #f6f6f6;
border-radius: 3px 0 0 3px;
border-right: 1px solid #bcbcbc;
.post-list { .post-list {
background-color: #ddd;
li:last-child a {
border-bottom: 1px solid #ddd;
}
a { a {
position: relative;
display: block; display: block;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid #ddd; margin-bottom: 1px;
background: #fff; background: #fff;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
...@@ -104,6 +153,40 @@ ...@@ -104,6 +153,40 @@
font-weight: 400; font-weight: 400;
color: #737373; color: #737373;
} }
&.followed:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
background: url(../images/following-flag.png) no-repeat;
}
&.active {
background: -webkit-linear-gradient(top, #96e0fd, #61c7fc);
border-color: #4697c1;
box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
.title {
color: #333;
}
.votes-count,
.comments-count {
background: -webkit-linear-gradient(top, #3994c7, #4da7d3);
color: #fff;
&:after {
color: #4da7d3;
}
}
&.followed:after {
background-position: 0 -12px;
}
}
} }
.title { .title {
...@@ -115,8 +198,8 @@ ...@@ -115,8 +198,8 @@
overflow: hidden; overflow: hidden;
} }
.votes, .votes-count,
.comments { .comments-count {
display: block; display: block;
float: right; float: right;
width: 32px; width: 32px;
...@@ -131,7 +214,7 @@ ...@@ -131,7 +214,7 @@
color: #767676; color: #767676;
} }
.comments { .comments-count {
position: relative; position: relative;
margin-left: 4px; margin-left: 4px;
...@@ -156,1037 +239,239 @@ ...@@ -156,1037 +239,239 @@
} }
} }
} }
}
/*** OLD STUFF ***/
/*** Variables ***/
$comment-margin-left: 30px;
$discussion-title-size: 1.6em;
$comment-title-size: 1.0em;
$post-font-size: 0.9em;
$comment-info-size: 0.75em;
$comment-font-size: 0.8em;
$discussion-input-width: 100%;
$tag-background-color: #e7ecdd;
$tag-border-color: #babdb3;
$tag-text-color: #5b614f;
/*** Mixins ***/
@mixin discussion-font {
font-family: inherit;
}
@mixin discussion-clickable {
color: black;
&:hover {
text-decoration: none;
}
}
@mixin standard-discussion-link {
text-decoration: none;
&:hover {
color: #1C71DD;
text-decoration: none;
}
}
.discussion-loading {
background-image: url(../images/discussion/loading.gif);
width: 15px;
height: 15px;
margin-left: 2px;
display: inline-block;
}
/*** Discussions ***/
.discussion {
#open_close_accordion {
display: none;
}
p + p, ul + p, ol + p { .board-drop-btn {
margin-top: 0; display: block;
height: 60px;
border-bottom: 1px solid #a3a3a3;
border-radius: 3px 0 0 0;
background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
font-size: 16px;
font-weight: 700;
line-height: 58px;
text-align: center;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
} }
/*** Sidebar ***/ .sort-bar {
height: 27px;
.sidebar-module { border-bottom: 1px solid #a3a3a3;
@include clearfix; background: -webkit-linear-gradient(top, #cdcdcd, #b6b6b6);
padding: 0 26px 24px; box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
margin-bottom: 24px;
border-bottom: 1px solid #d3d3d3;
font-size: 13px;
header { a {
margin-bottom: 14px;
@include clearfix;
}
h4 {
float: left;
font-size: 15px;
font-weight: bold;
}
.sidebar-new-post-button, .sidebar-promote-moderator-button {
@include button;
}
.sidebar-revoke-moderator-button {
@include button(simple, gray);
}
.sidebar-new-post-button, .sidebar-promote-moderator-button, .sidebar-revoke-moderator-button {
display: block; display: block;
box-sizing: border-box;
width: 100%;
margin: 20px 0;
padding: 11px;
font-size: 1.1em;
text-align: center;
&:hover {
text-decoration: none;
}
}
.sidebar-new-post-button {
margin: 40px 0 20px 0;
}
.sidebar-view-all {
float: right; float: right;
font-size: 13px; height: 27px;
line-height: 1.6em; margin-right: 10px;
@include standard-discussion-link; font-size: 11px;
}
.discussion-sidebar-following-list {
li {
@include clearfix;
margin-bottom: 8px;
border: none;
}
a {
@include standard-discussion-link;
background: none;
span {
line-height: 1.3;
}
}
}
.discussion-sidebar-tags-list li {
@include clearfix;
border-bottom: none;
}
.sidebar-tag-count {
color: #9a9a9a;
font-size: .85em;
line-height: 3em;
}
.sidebar-following-name {
float: left;
width: 80%;
}
.sidebar-vote-count {
float: right;
width: 20%;
text-align: right;
color: #9a9a9a;
}
//user profile
.user-profile {
@extend .sidebar;
margin-top: 24px;
}
.sidebar-username {
font-size: 1.5em;
font-weight: bold; font-weight: bold;
line-height: 1.5em; line-height: 23px;
margin-top: 20px; color: #333;
} text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
.sidebar-user-roles {
color: darkGray;
font-style: italic;
margin-bottom: 15px;
}
.sidebar-threads-count, .sidebar-comments-count {
span {
font-size: 1.5em;
font-weight: bold;
line-height: 1.5em;
margin-right: 10px;
}
}
}
.discussion-non-content {
margin-left: flex-gutter();
}
/*** Post ***/
.discussion-title {
@include discussion-font;
@include discussion-clickable;
display: inline-block;
font-size: $discussion-title-size;
font-weight: bold;
margin-bottom: flex-gutter(6);
}
.discussion-title-wrapper {
.discussion-watch-discussion, .discussion-unwatch-discussion {
@include discussion-font;
display: none;
font-size: $comment-info-size;
margin-left: 5px;
}
}
.discussion-right-wrapper {
min-height: 40px;
margin: 24px 0 24px 68px;
}
.admin-actions {
float: right;
margin: 0.4em 1em 0 2em;
padding: 0;
li {
margin-bottom: 6px !important;
}
a {
display: block;
height: 25px;
padding-left: 25px;
border-radius: 50%;
background: url(../images/admin-actions-sprite.png) no-repeat;
font-size: .8em;
line-height: 25px;
color: #b8b8b8;
@include transition(color, .1s);
&:hover {
text-decoration: none;
}
&.admin-endorse {
background-position: 0 0;
&:hover {
color: #63b141;
background-position: 0 -75px;
}
}
&.admin-edit {
background-position: 0 -25px;
&:hover {
color: #009fe2;
background-position: 0 -100px;
}
}
&.admin-delete {
background-position: 0 -50px;
&:hover {
color: #d45050;
background-position: 0 -125px;
}
}
}
}
.comments {
.admin-actions {
margin-top: 0;
li {
margin-bottom: 2px !important;
}
a {
width: 20px;
height: 20px;
padding-left: 0;
overflow: hidden;
text-indent: -9999px;
&.admin-endorse { .sort-label {
background-position: 0 -150px; font-size: 9px;
text-transform: uppercase;
&:hover {
background-position: 0 -225px;
}
}
&.admin-edit {
background-position: 0 -175px;
&:hover {
background-position: 0 -250px;
}
}
&.admin-delete {
background-position: 0 -200px;
&:hover {
background-position: 0 -275px;
}
}
} }
} }
} }
}
/*** thread ***/
.thread {
//display: none;
.search-highlight {
display: inline;
font-weight: bold;
background-color: lightyellow;
}
.thread-title {
@include discussion-font;
@include discussion-clickable;
display: block;
margin-bottom: 1em;
font-size: $comment-title-size;
font-weight: bold;
line-height: 1.4em;
}
.thread-body, .content-body {
@include discussion-font;
font-size: $post-font-size;
margin-bottom: 4px;
margin-top: 3px;
p {
@include discussion-font;
}
}
.thread-tags {
display: inline-block;
}
.info {
@include discussion-font;
color: gray;
font-size: $comment-info-size;
font-style: italic;
margin-top: 1em;
a:hover {
text-decoration: none;
color: #1C71DD;
}
.comment-time {
display: inline;
float: right;
margin-right: 1em;
}
.show-comments-wrapper {
display: inline;
margin-right: 20px;
}
.discussion-actions {
display: inline;
margin: 0;
padding: 0;
li {
display: inline;
margin-right: 20px;
}
}
.discussion-link {
@include discussion-font;
color: #1d9dd9;
display: inline;
&.discussion-unfollow-thread {
color: #dea03e;
}
}
}
.discussion-content {
border-top: lightgray 1px solid;
overflow: hidden;
// padding: 1.5% 0;
.discussion-reply-new {
@include discussion-font;
margin-left: 68px;
.reply-body {
@include discussion-font;
display: block;
font-size: $post-font-size;
margin-top: 10px;
width: 95%;
}
.reply-post-control {
margin-top: 1%;
}
}
}
//COMMENT STYLES
.comments {
overflow: hidden;
.discussion-votes {
margin-top: 8px;
}
.discussion-right-wrapper {
margin: 10px 0 10px 68px;
}
.comment { .global-discussion-actions {
margin-left: 68px; height: 60px;
.comment-body, .content-body { background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9);
@include discussion-font; border-radius: 0 3px 0 0;
color: black; border-bottom: 1px solid #bcbcbc;
display: block; }
font-size: $comment-font-size;
margin-top: 3px;
}
&.endorsed {
> .discussion-content {
background-color: #fcfcea;
}
}
}
}
}
/*** Sorting ***/
.discussion-sort {
float: right;
font-size: 0.8em;
margin-top: -36px;
.discussion-label {
display: block;
float: left;
padding: 0 14px;
line-height: 34px;
}
.discussion-sort-link {
display: block;
float: left;
padding: 0 14px;
line-height: 34px;
&:hover {
color: #1C71DD;
text-decoration: none;
}
}
.discussion-sort-link.sorted {
color: #000;
border-bottom: 2px solid #000;
}
}
/*** Search ***/ .discussion-article {
position: relative;
display: table-cell;
vertical-align: top;
width: 72.3%;
padding: 40px;
.search-wrapper-inline { h1 {
display: inline-block; font-size: 28px;
margin-top: 3%; font-weight: 700;
width: 80%;
} }
.search-wrapper { .posted-details {
margin-bottom: 50px; font-size: 12px;
margin-left: .5%; font-style: italic;
color: #888;
} }
.discussion-search-form { p + p {
display: inline-block; margin-top: 20px;
margin-bottom: 1%;
width: flex-grid(12);
.discussion-link {
@include button(simple, #999);
color: white;
display: inline-block;
font-size: inherit;
font-weight: bold;
margin-left: 1%;
padding-top: 9px;
text-decoration: none;
}
.discussion-search-text {
@include discussion-font;
}
.search-input {
float: left;
font: inherit;
font-style: normal;
// width: 72%;
width: flex-grid(8);
margin-left: flex-grid(1);
}
} }
.search-within { .dogear {
display: block; display: block;
margin-bottom: 3%; position: absolute;
} top: 0;
right: -1px;
.discussion-search-within-board { width: 52px;
font: inherit; height: 51px;
font-size: $post-font-size; background: url(../images/follow-dog-ear.png) 0 -51px no-repeat;
font-style: normal;
}
/*** buttons ***/
.control-button {
@include button;
@include discussion-font;
background-color: #959595;
@include background-image(linear-gradient(top, #959595, #7B7B7B));
border: 1px solid #6F6F6F;
@include box-shadow(inset 0 1px 0 #A2A2A2, 0 0 3px #CCC);
color: white;
display: inline-block;
font-size: inherit;
font-weight: bold;
margin-bottom: 3%;
padding-top: 9px;
width: inherit;
text-decoration: none;
text-shadow: none;
&:hover {
background-color: #A2A2A2;
@include background-image(linear-gradient(top, #A2A2A2, #7B7B7B));
border: 1px solid #555;
@include box-shadow(inset 0 1px 0 #BBB, 0 0 3px #CCC);
}
}
.follow-wrapper {
display: inline;
}
/*** votes ***/
.discussion-votes {
float: left;
width: 60px;
margin-top: 18px;
text-align: center;
.discussion-vote {
display: block;
width: 50px;
height: 17px;
margin: auto;
background: url(../images/vote-arrows.png) no-repeat;
font-size: 15px;
font-weight: bold;
color: black;
@include hide-text;
@include transition(all, 0, easeOut);
}
.discussion-vote-up {
margin-bottom: 5px;
background-position: -50px -3px;
&:hover {
background-position: -50px -5px;
@include transition-duration(0.05s);
}
&.voted {
background-position: 0 -3px;
color: #1C71DD;
@include transition-duration(0);
}
}
.discussion-vote-down {
margin-top: 7px;
background-position: -50px -30px;
&:hover {
background-position: -50px -28px;
@include transition-duration(0.05s);
}
&.voted {
background-position: 0 -30px;
color: #1C71DD;
@include transition-duration(0);
}
}
.discussion-vote-count {
@include discussion-font;
font-size: $post-font-size;
}
.discussion-votes-point {
font-size: 1.1em;
font-weight: bold;
color: #9a9a9a;
}
}
/*** new post ***/
.new-post-form, .discussion-thread-edit {
.title-input, .body-input {
display: block !important;
font: inherit;
font-style: normal;
//width: $discussion-input-width !important;
}
.new-post-similar-posts-wrapper {
@include border-radius(3px);
border: 1px solid #EEE;
font-size: $post-font-size;
line-height: 150%;
margin-top: 1%;
padding: 1% 1.5%;
}
.hide-similar-posts {
float: right;
}
.new-post-similar-posts {
font: inherit;
.similar-post {
display: block;
line-height: 150%;
}
}
.discussion-errors {
color: #8F0E0E;
display: block;
margin-left: -5%;
}
.new-post-body {
}
.tagsinput { &.is-followed {
background: #FAFAFA; background-position: 0 0;
border: 1px solid #C8C8C8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: flex-gutter();
vertical-align: top;
-webkit-font-smoothing: antialiased;
} }
} }
}
.discussion-content-edit, .discussion-reply-new, .new-post-form { .discussion-post header,
margin: 10px 0 10px 0; .responses li header {
margin-bottom: 20px;
.discussion-errors { }
color: #8F0E0E;
display: block;
font: inherit;
font-size: $post_font_size;
list-style: none;
margin-left: -3%;
padding-left: 2em;
}
a:hover {
color: #1C71DD;
text-decoration: none;
}
.new-post-title {
display: block;
padding: 5px 12px;
border-width: 1px;
width: 100%;
}
.thread-title-edit {
width: 100%;
}
&.collapsed {
.new-post-title {
display: none;
visibility: hidden;
}
.wmd-button-row {
height: 0;
}
.wmd-input {
height: 100px;
@include border-radius(3px);
}
.wmd-preview {
height: 0;
padding: 0;
border-width: 0;
}
.post-options {
height: 0;
}
.post-control {
display: none;
}
.tagsinput {
display: none;
}
}
.new-post-control {
margin-left: 75%;
margin-top: 1%;
.discussion-cancel-post {
margin-right: 1.5%;
}
}
.reply-post-control {
.discussion-cancel-post {
margin-right: 1.5%;
}
}
.edit-post-control {
margin-top: 1%;
.discussion-cancel-update {
margin-right: 1.5%;
}
}
.control-button {
@include button;
@include discussion-font;
margin-right: 16px;
padding-top: 9px;
color: white;
display: inline-block;
font-size: inherit;
font-weight: bold;
text-decoration: none;
width: inherit;
&:hover {
color: white;
}
}
label { .responses {
display: inline; margin-top: 40px;
font-family: $sans-serif;
font-size: .8em;
font-style: normal;
font-weight: 400;
}
}
.discussion-content-edit { > li {
margin: 3%; margin: 0 -10px;
padding: 30px;
border-radius: 3px;
border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
} }
.new-post-form { .posted-by {
margin: 10px 0 40px 0; font-weight: 700;
} }
}
.discussion-reply-new { .endorse-btn {
display: block;
.discussion-auto-watch { float: right;
margin-left: 2%; width: 27px;
} height: 27px;
margin-right: 10px;
border-radius: 27px;
border: 1px solid #a0a0a0;
background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
.check-icon {
display: block;
width: 13px;
height: 12px;
margin: 8px auto;
background: url(../images/endorse-icon.png) no-repeat;
} }
.thread-tag { &.is-endorsed {
background: $tag-background-color; border: 1px solid #4697c1;
border: 1px solid $tag-border-color; background: -webkit-linear-gradient(top, #6dccf1, #38a8e5);
-moz-border-radius: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset;
-webkit-border-radius: 2px;
color: $tag-text-color;
float: left;
font-size: 13px;
margin: 5px 7px 5px 0;
padding: 5px 7px;
text-decoration: none;
&:hover { .check-icon {
border-color: #7b8761; background-position: 0 -12px;
color: #2f381c;
text-decoration: none;
} }
} }
}
/*** pagination ***/ .comments {
margin-top: 20px;
.discussion-paginator { border-top: 1px solid #ddd;
font-size: $post-font-size;
margin-bottom: 10px;
margin-top: 20px;
text-align: center;
div {
display: inline-block;
font-weight: bold;
margin: 0 5px;
a { li {
background: #EEE; background: #f6f6f6;
-webkit-border-radius: 3px; border-bottom: 1px solid #ddd;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
color: black;
font-weight: normal;
padding: 4px 10px;
text-decoration: none;
&:hover {
background: #DDD;
}
}
}
} }
&.inline-discussion, .forum-discussion, .user-discussion { p {
.new-post-form { font-size: 13px;
margin: 24px 60px; padding: 10px 20px;
.post-options {
margin: 8px 0 16px 0;
overflow: hidden;
label {
margin-right: 15px;
display: inline;
}
}
.post-control { .posted-details {
overflow: hidden; font-size: 11px;
margin: 0 0 5% 0; white-space: nowrap;
}
} }
} }
} }
.comment-form {
padding: 8px 20px;
/*** base editor styles ***/
.wmd-panel {
width: 100%;
min-width: 500px;
}
.wmd-button-bar {
width: 100%;
background-color: Silver;
} }
.wmd-input { .comment-form-input {
height: 150px;
width: 100%; width: 100%;
background-color: #e9e9e9; height: 31px;
border: 1px solid #c8c8c8; padding: 0 10px;
font-family: Monaco, 'Lucida Console', monospace;
font-style: normal;
font-size: 0.8em;
line-height: 1.6em;
@include border-radius(3px 3px 0 0);
&::-webkit-input-placeholder {
color: #888;
}
}
.wmd-preview {
position: relative;
font-family: $sans-serif;
padding: 25px 20px 10px 20px;
margin-bottom: 5px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #c8c8c8; border: 1px solid #b2b2b2;
border-top-width: 0; border-radius: 3px;
@include border-radius(0 0 3px 3px); box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
overflow: hidden; -webkit-transition: border-color .1s;
@include transition(all, .2s, easeOut); outline: 0;
&:before {
content: 'PREVIEW';
position: absolute;
top: 3px;
left: 5px;
font-size: 11px;
color: #bbb;
}
p { &:focus {
font-family: $sans-serif; border-color: #4697c1;
} }
background-color: #fafafa;
}
.wmd-button-row {
position: relative;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 10px;
padding: 0px;
height: 20px;
overflow: hidden;
@include transition(all, .2s, easeOut);
}
.wmd-spacer {
width: 1px;
height: 20px;
margin-left: 14px;
position: absolute;
background-color: Silver;
display: inline-block;
list-style: none;
}
.wmd-button {
width: 20px;
height: 20px;
padding-left: 2px;
padding-right: 3px;
position: absolute;
display: inline-block;
list-style: none;
cursor: pointer;
}
.wmd-button > span {
background-image: url('/static/images/wmd-buttons.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 20px;
height: 20px;
display: inline-block;
}
.wmd-spacer1 {
left: 50px;
}
.wmd-spacer2 {
left: 175px;
}
.wmd-spacer3 {
left: 300px;
} }
.wmd-prompt-background { .moderator-actions {
background-color: Black; margin-top: 20px;
} @include clearfix;
.wmd-prompt-dialog { li {
border: 1px solid #999999; float: left;
background-color: #F5F5F5; margin-right: 8px;
} }
.wmd-prompt-dialog > div {
font-size: 0.8em;
font-family: arial, helvetica, sans-serif;
}
a {
display: block;
height: 26px;
padding: 0 12px;
border-radius: 3px;
border: 1px solid #b2b2b2;
background: -webkit-linear-gradient(top, #fff 35%, #ebebeb);
font-size: 13px;
line-height: 24px;
color: #737373;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
.wmd-prompt-dialog > form > input[type="text"] { .delete-icon {
border: 1px solid #999999; display: block;
color: black; float: left;
} width: 10px;
height: 10px;
margin: 8px 4px 0 0;
background: url(../images/moderator-delete-icon.png) no-repeat;
}
.wmd-prompt-dialog > form > input[type="button"] { .edit-icon {
border: 1px solid #888888; display: block;
font-family: trebuchet MS, helvetica, sans-serif; float: left;
font-size: 0.8em; width: 10px;
font-weight: bold; height: 10px;
margin: 7px 4px 0 0;
background: url(../images/moderator-edit-icon.png) no-repeat;
}
}
} }
lms/templates/discussion/_single_thread.html
<%namespace name="renderer" file="_content_renderer.html"/> <%namespace name="renderer" file="_content_renderer.html"/>
<section class="discussion" _id="${discussion_id | h}"> <article class="discussion-article" data-id="${discussion_id| h}">
<a class="discussion-title" href="javascript:void(0)">${thread['title'] | h}</a> <a href="#" class="dogear"></a>
<p class="posted-details"><span class="timeago" title="${thread['created_at'] | h}">sometime</span> by <a href="#">Foo</a></p> <div class="discussion-post">
<div class="threads"> <header>
${renderer.render_content_with_comments(thread)} <a href="#" class="vote-btn discussion-vote discussion-vote-up"><span class="plus-icon">+</span> <span class='votes-count-number'>${thread['votes']['up_count']}</span></a>
<h1>${thread['title']}</h1>
<p class="posted-details">
<span class="timeago" title="${thread['created_at'] | h}">sometime</span> by
<a href="${thread['user_id']}">${thread['username']}</a>
</p>
</header>
<div class="post-body">
${thread['body']}
</div>
</div> </div>
</section> <ol class="responses">
% for reply in thread.get("children", []):
<li>
<div class="response-body">${reply['body']}</div>
<ol class="comments">
% for comment in reply.get("children", []):
<li><p>${comment['body']}</p></li>
% endfor
</ol>
</li>
% endfor
</ol>
</article>
<%include file="_js_data.html" /> <%include file="_js_data.html" />
<script type="text/javascript">$(document).ready(function() { $("span.timeago").timeago() })</script> <script type="text/javascript">$(document).ready(function() { $("span.timeago").timeago() })</script>
lms/templates/discussion/single_thread.html
<%! import django_comment_client.helpers as helpers %> <%! import django_comment_client.helpers as helpers %>
<%! from django.template.defaultfilters import escapejs %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/> <%namespace name='static' file='../static_content.html'/>
<%block name="bodyclass">discussion</%block> <%block name="bodyclass">discussion</%block>
...@@ -16,48 +17,47 @@ ...@@ -16,48 +17,47 @@
<%include file="../courseware/course_navigation.html" args="active_page='discussion'" /> <%include file="../courseware/course_navigation.html" args="active_page='discussion'" />
<section class="container"> <div class="discussion container">
<div class="discussion-wrapper"> <div class="discussion-body">
<article class="discussion-sidebar"> <div class="sidebar">
<div class="board-selector"> <div class="board-selector">
<a href="#" class="board-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a> <a href="#" class="board-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<div class="board-drop-menu"> <div class="board-drop-menu">
</div> </div>
</div> </div>
<div class="sort-bar"> <div class="sort-bar">
<a href="#"><span class="sort-label">Sort by:</span> most recent <span class="drop-arrow">▾</span></a> <a href="#"><span class="sort-label">Sort by:</span> most recent <span class="drop-arrow">▾</span></a>
</div> </div>
<div class="post-list-wrapper"> <div class="post-list-wrapper">
<ul class="post-list"> <ul class="post-list">
% for thread in threads: % for discussion_thread in threads:
<li><a href="${helpers.permalink(thread) | h}"><span class="title">${thread['title'] | h}</span> <span class="comments">${thread['comments_count'] | h}</span><span class="votes">+${thread['votes']['up_count'] | h}</span></a></li> <li><a href="${helpers.permalink(discussion_thread) | h}"><span class="title">${discussion_thread['title'] | h}</span> <span class="comments-count">${discussion_thread['comments_count'] | h}</span><span class="votes-count">+${discussion_thread['votes']['up_count'] | h}</span></a></li>
% endfor % endfor
</ul> </ul>
</div> </div>
</article> </div>
<section class="discussion-content">
${content.decode('utf-8')} <div class="discussion-column">
</section> <div class="global-discussion-actions">
</div> <a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
<form class="post-search">
</section> <input type="text" placeholder="Search discussions" class="post-search-field">
</form>
<section class="container"> </div>
<div class="course-wrapper">
<section aria-label="Course Navigation" class="course-index">
<nav>
<article class="sidebar-module discussion-sidebar">
</article>
<%include file="_recent_active_posts.html" />
<%include file="_trending_tags.html" />
</nav>
</section>
<section class="course-content">
${content.decode('utf-8')} ${content.decode('utf-8')}
</section>
</div>
</div> </div>
</section> </div>
<script>
$$contents = {}
$$discussions = {}
$(document).ready(function() {
var user = new DiscussionUser(JSON.parse("${annotated_content_info | escapejs}"));
var thread = new Thread(JSON.parse("${thread | escapejs}"));
view = new DiscussionThreadView({el: $(".discussion-article"), model: thread, user: user})
view.render()
});
</script>
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