diff --git a/lms/static/coffee/src/customwmd.coffee b/lms/static/coffee/src/customwmd.coffee index 0590a0679b..7efcddb90a 100644 --- a/lms/static/coffee/src/customwmd.coffee +++ b/lms/static/coffee/src/customwmd.coffee @@ -105,7 +105,6 @@ $ -> replaceMath: (text) -> text = text.replace /@@(\d+)@@/g, ($0, $1) => @math[$1] @math = null - console.log text text @replaceMathWrapper: (_this) -> @@ -163,7 +162,6 @@ $ -> $('#file-upload').unbind('change').change(startUploadHandler) imageUploadHandler = (elem, input) -> - console.log "here" ajaxFileUpload(imageUploadUrl, input, imageUploadHandler) editor = new Markdown.Editor( diff --git a/lms/static/coffee/src/discussion/content.coffee b/lms/static/coffee/src/discussion/content.coffee index 69255b4c82..c9d5544059 100644 --- a/lms/static/coffee/src/discussion/content.coffee +++ b/lms/static/coffee/src/discussion/content.coffee @@ -330,15 +330,36 @@ initializeFollowThread = (thread) -> handleDelete(this) initializeContent: (content) -> + + unescapeHighlightTag = (text) -> + text.replace(/\<\;highlight\>\;/g, "") + .replace(/\<\;\/highlight\>\;/g, "") + + stripLatexHighlight = (text) -> + text + + markdownWithHighlight = (text) -> + converter = Markdown.getMathCompatibleConverter() + unescapeHighlightTag stripLatexHighlight converter.makeHtml text + $content = $(content) initializeVote $content if $content.hasClass("thread") initializeFollowThread $content $local = Discussion.generateLocal($content.children(".discussion-content")) + + $contentTitle = $local(".thread-title") + + if $contentTitle.length + $contentTitle.html unescapeHighlightTag stripLatexHighlight $contentTitle.html() + $contentBody = $local(".content-body") - raw_text = $contentBody.html() - converter = Markdown.getMathCompatibleConverter() - $contentBody.html(converter.makeHtml(raw_text)) + + console.log "raw html:" + console.log $contentBody.html() + + $contentBody.html markdownWithHighlight $contentBody.html() + MathJax.Hub.Queue ["Typeset", MathJax.Hub, $contentBody.attr("id")] id = $content.attr("_id") if not Discussion.getContentInfo id, 'editable' diff --git a/lms/static/coffee/src/discussion/discussion.coffee b/lms/static/coffee/src/discussion/discussion.coffee index 0b0b1e4bf1..0ee7ba0583 100644 --- a/lms/static/coffee/src/discussion/discussion.coffee +++ b/lms/static/coffee/src/discussion/discussion.coffee @@ -27,7 +27,7 @@ initializeFollowDiscussion = (discussion) -> bindDiscussionEvents: (discussion) -> $discussion = $(discussion) - $discussionNonContent = $discussion.children(".discussion-non-content") + $discussionNonContent = $discussion.children(".discussion-local") $local = Discussion.generateLocal($discussionNonContent) id = $discussion.attr("_id") @@ -127,5 +127,5 @@ initializeFollowDiscussion = (discussion) -> "click .discussion-sort-link": -> handleAjaxSort(this) - $discussion.children(".discussion-paginator").find(".discussion-inline-page-link").click -> + $discussion.children(".discussion-paginator").find(".discussion-page-link").click -> handleAjaxPage(this) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index f0189841d2..90e183c0a2 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -20,33 +20,67 @@ $discussion_input_width: 100%; .discussion-non-content { margin-left: flex-gutter(); } - .search-wrapper-inline { - width: 80%; + //TITLE + .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; + } + } + //SORTING + .discussion-sort { + float: right; + font-size: $comment_body_size; + margin-top: -2.5%; + .discussion-sort-link { + &:hover { + color: #1C71DD; + text-decoration: none; + } + } + .discussion-sort-link.sorted { + color: #1C71DD; + font-weight: bold; + } + } + //SEARCH + .search-wrapper-inline { display: inline-block; - margin-top: 3%; margin-bottom: 6%; + margin-top: 3%; + width: 80%; } .discussion-search-form { - margin-bottom: 1%; display: inline-block; + margin-bottom: 1%; width: flex-grid(12); .discussion-link { @include button; - display: inline-block; - margin-left: 1%; color: white; - font-weight: bold; - text-decoration: none; - padding-top: 9px; + 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; - float: left; width: 72%; } } @@ -55,25 +89,14 @@ $discussion_input_width: 100%; margin-bottom: 3%; } .discussion-search-within-board { - font-style: normal; font: inherit; font-size: $comment_body_size; + font-style: normal; } + //BASIC BUTTON STYLES .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); @@ -81,11 +104,20 @@ $discussion_input_width: 100%; background-image: -ms-linear-gradient(top, #959595,#7B7B7B); background-image: -o-linear-gradient(top, #959595,#7B7B7B); background-image: linear-gradient(top, #959595,#7B7B7B); + 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; + 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 { - -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); @@ -94,70 +126,55 @@ $discussion_input_width: 100%; background-image: -o-linear-gradient(top, #A2A2A2,#7B7B7B); background-image: linear-gradient(top, #A2A2A2,#7B7B7B); border: 1px solid #555; + -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; } } - .discussion-title { - @include discussion-font; - @include discussion-clickable; - font-size: $discussion_title_size; - font-weight: bold; - margin-bottom: flex-gutter(6); - display: block; - } - .discussion-title-wrapper { - .discussion-watch-discussion, .discussion-unwatch-discussion { - display: none; - @include discussion-font; - margin-left: 5px; - font-size: $comment_info_size; - } - .discussion-title { - display: inline-block; - } - } + //FOLLOW BUTTON .follow-wrapper { float: right; .discussion-link { - display: inline-block; @include button; - text-decoration: none; + background-color: #BEBEBE; + background-image: none; + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + display: inline-block; font-size: $comment_info_size; padding: 5px 8px; text-decoration: none; - border: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - background-color: #AAA; - background-image: none; text-shadow: none; &:hover { + background-color: #AAA; + background-image: none; border: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - background-color: #BEBEBE; - background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } } } + //VOTES .discussion-votes { - text-align: center; - height: flex-grid(3); float: left; + height: flex-grid(3); margin: 1% 2%; + text-align: center; .discussion-vote-count { - font-size: $comment_body_size; @include discussion-font; + font-size: $comment_body_size; } a.discussion-vote { - display: block; color: black; - font-weight: bold; + display: block; font-size: 15px; + font-weight: bold; &:hover { - text-decoration: none; color: #1C71DD; + text-decoration: none; } &.discussion-vote-up { margin-bottom: 3px; @@ -165,33 +182,33 @@ $discussion_input_width: 100%; &.discussion-vote-down { margin-top: 5px; } - &.voted { + &.voted { color: #1C71DD; } } } + //CREATE NEW AND EDIT POSTS .discussion-right-wrapper { - min-height: 40px; float: left; + min-height: 40px; width: 90%; } .new-post-form, .discussion-thread-edit { .title-input, .body-input { - font-style: normal; - font: inherit; display: block !important; + font: inherit; + font-style: normal; width: $discussion_input_width !important; } .discussion-errors { - display: block; color: #8F0E0E; + display: block; margin-left: -5%; } .new-post-body { margin-top: flex-gutter(); } .tagsinput { - margin-top: flex-gutter(); background: #FAFAFA; border: 1px solid #C8C8C8; -webkit-border-radius: 3px; @@ -205,26 +222,13 @@ $discussion_input_width: 100%; -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-sort { - font-size: $comment_body_size; - float: right; - margin-top: -2.5%; - .discussion-sort-link { - &:hover { - text-decoration: none; - color: #1C71DD; - } - } - .discussion-sort-link.sorted { - font-weight: bold; - color: #1C71DD; - } - } .discussion-content-edit, .discussion-reply-new, .new-post-form { + margin: 10px 0 10px 0; .new-post-control { margin-left: 80%; margin-top: 1%; @@ -240,15 +244,14 @@ $discussion_input_width: 100%; @include button; @include discussion-font; color: white; - font-weight: bold; - text-decoration: none; - margin-left: 5%; display: inline-block; - padding-top: 9px; font-size: inherit; + font-weight: bold; + margin-left: 5%; + padding-top: 9px; + text-decoration: none; width: inherit; } - margin: 10px 0 10px 0; } .new-post-form { margin: 10px 0 40px 0; @@ -258,20 +261,26 @@ $discussion_input_width: 100%; margin-left: 2%; } } + //THREAD STYLES .thread { //display: none; + .search-highlight { + display: inline; + font-weight: bold; + background-color: lightyellow; + } .thread-title { @include discussion-font; @include discussion-clickable; + display: block; font-size: $comment_title_size; font-weight: bold; - display: block; } .thread-body, .content-body { @include discussion-font; font-size: $comment_body_size; - margin-top: 3px; margin-bottom: 4px; + margin-top: 3px; p { @include discussion-font; margin: 0; @@ -281,54 +290,63 @@ $discussion_input_width: 100%; display: inline-block; .thread-tag { @include discussion-font; + background: #CDE69C; border: 1px solid #A5D24A; -moz-border-radius: 2px; -webkit-border-radius: 2px; + color: #638421; float: left; + font-size: 13px; + margin: 5px 7px 5px 0; padding: 5px 7px; text-decoration: none; - background: #CDE69C; - color: #638421; - margin-right: 7px; - margin-bottom: 4px; - font-size: 13px; &:hover { - color: #1E4612; border-color: #1E4612; + color: #1E4612; } } } .info { @include discussion-font; + color: gray; font-size: $comment_info_size; font-style: italic; - color: gray; + margin-top: 2%; + .comment-time { + display: inline; + float: right; + margin-right: -4%; + } + .comment-count { + display: inline; + } .discussion-reply { margin-left: 4px; } .discussion-link { @include discussion-font; - margin-left: 2px; color: #1d9dd9; display: inline; + margin-left: 2px; } } .discussion-content { - overflow: hidden; border-top: lightgray 1px solid; - padding: 2% 0; + overflow: hidden; + padding: 1.5% 0; .discussion-reply-new { @include discussion-font; margin-left: 5%; .reply-body { @include discussion-font; - width: 95%; + display: block; font-size: $comment_body_size; margin-top: 10px; - display: block; + width: 95%; } } } + //COMMENT STYLES .comments { //display: none; margin-left: $comment_margin_left; @@ -336,12 +354,11 @@ $discussion_input_width: 100%; .comment { .comment-body, .content-body { @include discussion-font; + color: black; + display: block; font-size: $comment_body_size; margin-top: 3px; - display: block; - color: black; } - &.endorsed { > .discussion-content { background-color: lightyellow; @@ -350,25 +367,26 @@ $discussion_input_width: 100%; } } } + //PAGES .discussion-paginator { - margin-top: 20px; - margin-bottom: 10px; font-size: $comment_body_size; + margin-bottom: 10px; + margin-top: 20px; text-align: center; div { display: inline-block; font-weight: bold; margin: 0 5px; a { + background: #EEE; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; - padding: 4px 10px; - background: #EEE; - font-weight: normal; color: black; + font-weight: normal; + padding: 4px 10px; text-decoration: none; &:hover { background: #DDD; @@ -378,6 +396,7 @@ $discussion_input_width: 100%; } } +//EDITOR STYLES .wmd-panel { diff --git a/lms/templates/discussion/_forum.html b/lms/templates/discussion/_forum.html index ea30bb6f4f..62ae3adb67 100644 --- a/lms/templates/discussion/_forum.html +++ b/lms/templates/discussion/_forum.html @@ -1,7 +1,7 @@ <%namespace name="renderer" file="_thread.html"/>
-
+
@@ -13,8 +13,8 @@
New Post
- <%include file="_sort.html" />
+ <%include file="_sort.html" />
% for thread in threads: ${renderer.render_thread(course_id, thread, show_comments=False)} diff --git a/lms/templates/discussion/_inline.html b/lms/templates/discussion/_inline.html index 66db888fe8..97573a91c1 100644 --- a/lms/templates/discussion/_inline.html +++ b/lms/templates/discussion/_inline.html @@ -1,7 +1,7 @@ <%namespace name="renderer" file="_thread.html"/>
-
+
<%include file="_search_bar.html" />
diff --git a/lms/templates/discussion/_sort.html b/lms/templates/discussion/_sort.html index f71fab2cc3..e23d87b718 100644 --- a/lms/templates/discussion/_sort.html +++ b/lms/templates/discussion/_sort.html @@ -23,7 +23,7 @@ ${title} -
+
Sort by: ${link_to_sort('date', 'date')} | diff --git a/lms/templates/discussion/_thread.html b/lms/templates/discussion/_thread.html index a7865604cb..573142083c 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -42,7 +42,11 @@
${render_title(content, type, **kwargs)}
-
${content['body'] | h}
+ % if content.get('highlighted_body', None): +
${content['highlighted_body'] | h}
+ % else: +
${content['body'] | h}
+ % endif ${render_tags(content, type, **kwargs)} ${render_bottom_bar(content, type, **kwargs)} @@ -54,7 +58,11 @@ <%def name="render_title(content, type, **kwargs)"> % if type == "thread": - ${content['title'] | h} + % if content.get('highlighted_title', None): + ${content['highlighted_title'] | h} + % else: + ${content['title'] | h} + % endif % endif @@ -102,15 +110,19 @@ <%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: - , Show ${content['comments_count']} comment(s) - % endif +
+ ${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: + Show ${content['comments_count']} comment(s) + % endif +
<%def name="render_link(cls, html)"> diff --git a/lms/templates/discussion/thread.html b/lms/templates/discussion/thread.html index 08b61fbbcc..beee18a4ca 100644 --- a/lms/templates/discussion/thread.html +++ b/lms/templates/discussion/thread.html @@ -79,15 +79,19 @@ <%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 +
+ ${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 name="render_link(cls, html)">