diff --git a/lms/static/images/vote-arrows.png b/lms/static/images/vote-arrows.png new file mode 100644 index 0000000000..6f84cdb271 Binary files /dev/null and b/lms/static/images/vote-arrows.png differ diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 9c04201e0c..c6e51c4617 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1,10 +1,17 @@ $comment_margin_left: 30px; $discussion_title_size: 1.6em; $comment_title_size: 1.0em; -$comment_body_size: 0.9em; +$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; + + + @mixin discussion-font { font-family: inherit; } @@ -16,67 +23,96 @@ $discussion_input_width: 100%; } } -form label { - @include discussion-font; - font-size: 14px; - font-style: normal; - font-weight: normal; - text-shadow: none; -} - -div.recent-activity { - margin: 20% 4%; - - div.recent-activity-title { - font-weight: bold; - } - - a.recent-active-post { - display: block; - font-size: $comment_body_size; - line-height: 120%; - margin-top: 8px; - - &:hover { - color: #1C71DD; - text-decoration: none; - font-weight: normal; - } - } -} - -div.trending-tags { - font-weight: bold; - margin: 15% 0 0 0; - - .trending-tag { - margin-top: 5px; - } - - .trending-tag-link { - @include discussion-font; - background: #CDE69C; - border: 1px solid #A5D24A; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - color: #638421; - display: block; - float: left; - font-size: 13px; - margin-right: 4px; - padding: 5px 7px; +@mixin standard-discussion-link { + text-decoration: none; + &:hover { + color: #1C71DD; text-decoration: none; - - &:hover { - border-color: #1E4612; - color: #1E4612; - text-decoration: none; - } } } .discussion { - + + #open_close_accordion { + display: none; + } + + .sidebar-module { + @include clearfix; + padding: 0 24px 24px 0; + margin-bottom: 24px; + border-bottom: 1px solid #d3d3d3; + font-size: 0.8em; + + header { + margin-bottom: 14px; + @include clearfix; + } + + h4 { + float: left; + font-size: 1.1em; + font-weight: bold; + } + + .sidebar-new-post-button { + @include button; + 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-view-all { + float: right; + font-size: 0.9em; + line-height: 1.6em; + @include standard-discussion-link; + } + + .discussion-sidebar-following-list { + li { + @include clearfix; + margin-bottom: 8px; + } + + a { + @include standard-discussion-link; + } + } + + .discussion-sidebar-tags-list li { + @include clearfix; + } + + .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; + } + + + } + .discussion-non-content { margin-left: flex-gutter(); } @@ -91,7 +127,7 @@ div.trending-tags { font-weight: bold; margin-bottom: flex-gutter(6); } - + .discussion-title-wrapper { .discussion-watch-discussion, .discussion-unwatch-discussion { @include discussion-font; @@ -100,32 +136,43 @@ div.trending-tags { margin-left: 5px; } } - + .blank { margin: 2%; } - + //SORTING .discussion-sort { float: right; - font-size: $comment_body_size; - margin-top: -2.5%; - + 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: #1C71DD; - font-weight: bold; + color: #000; + border-bottom: 2px solid #000; } } - + //SEARCH .search-wrapper-inline { @@ -134,14 +181,18 @@ div.trending-tags { margin-top: 3%; width: 80%; } - + + .search-wrapper { + height: 110px; + } + .discussion-search-form { display: inline-block; margin-bottom: 1%; width: flex-grid(12); - + .discussion-link { - @include button; + @include button(simple, #999); color: white; display: inline-block; font-size: inherit; @@ -150,30 +201,32 @@ div.trending-tags { padding-top: 9px; text-decoration: none; } - + .discussion-search-text { @include discussion-font; } - + .search-input { float: left; font: inherit; font-style: normal; - width: 72%; + // width: 72%; + width: flex-grid(8); + margin-left: flex-grid(1); } } - + .search-within { display: block; margin-bottom: 3%; } - + .discussion-search-within-board { font: inherit; - font-size: $comment_body_size; + font-size: $post_font_size; font-style: normal; } - + //BASIC BUTTON STYLES .control-button { @@ -199,7 +252,7 @@ div.trending-tags { width: inherit; text-decoration: none; text-shadow: none; - + &:hover { background-color: #A2A2A2; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A2A2A2),color-stop(100%, #7B7B7B)); @@ -214,83 +267,86 @@ div.trending-tags { box-shadow: inset 0 1px 0 #BBB,0 0 3px #CCC; } } - + //FOLLOW BUTTON .follow-wrapper { - float: right; - - .discussion-link { - @include button; - 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; - text-shadow: none; - - &:hover { - background-color: #AAA; - background-image: none; - border: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - } + display: inline; } //VOTES .discussion-votes { float: left; - height: flex-grid(3); - margin: 1% 2%; + width: 60px; + margin-top: 18px; text-align: center; - - .discussion-vote-count { - @include discussion-font; - font-size: $comment_body_size; - } - - a.discussion-vote { - color: black; - display: block; + + .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 { - color: #1C71DD; - text-decoration: none; + background-position: -50px -5px; + @include transition-duration(0.05s); } - - &.discussion-vote-up { - margin-bottom: 3px; - } - - &.discussion-vote-down { - margin-top: 5px; - } - + &.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; + } } //CREATE NEW AND EDIT POSTS .discussion-right-wrapper { - float: left; min-height: 40px; - width: 90%; + // width: flex-grid(11); + margin: 24px 0 24px 68px; } - + .new-post-form, .discussion-thread-edit { .title-input, .body-input { @@ -299,32 +355,17 @@ div.trending-tags { font-style: normal; width: $discussion_input_width !important; } - - .new-post-similar-posts-wrapper { - @include border-radius(3px); - border: 1px solid #EEE; - font-size: $comment_body_size; - line-height: 150%; - margin-top: 1%; - padding: 1% 1.5%; + + .discussion-errors { + color: #8F0E0E; + display: block; + margin-left: -5%; } - - .hide-similar-posts { - float: right; - } - - .new-post-similar-posts { - font: inherit; - .similar-post { - display: block; - line-height: 150%; - } - } - + .new-post-body { margin-top: flex-gutter(); } - + .tagsinput { background: #FAFAFA; border: 1px solid #C8C8C8; @@ -352,7 +393,7 @@ div.trending-tags { color: #8F0E0E; display: block; font: inherit; - font-size: $comment_body_size; + font-size: $post_font_size; list-style: none; margin-left: -3%; padding-left: 2em; @@ -362,30 +403,55 @@ div.trending-tags { color: #1C71DD; text-decoration: none; }; - + + &.collapsed { + .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; + } + + .reply-post-control { + height: 0; + } + } + .new-post-control { margin-left: 80%; margin-top: 1%; } - + .reply-post-control { - margin-left: 73%; + // margin-left: 73%; } - + .edit-post-control { margin-left: 79%; margin-top: 1%; } - + .control-button { @include button; @include discussion-font; + margin-right: 16px; + padding-top: 9px; color: white; display: inline-block; font-size: inherit; font-weight: bold; - margin-left: 5%; - padding-top: 9px; text-decoration: none; width: inherit; @@ -393,12 +459,19 @@ div.trending-tags { color: white; } } + + label { + font-family: $sans-serif; + font-size: .8em; + font-style: normal; + font-weight: 400; + } } .new-post-form { margin: 10px 0 40px 0; } - + .discussion-reply-new { .discussion-auto-watch { @@ -406,6 +479,25 @@ div.trending-tags { } } + .thread-tag { + background: $tag_background_color; + border: 1px solid $tag_border_color; + -moz-border-radius: 2px; + -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 { + border-color: #7b8761; + color: #2f381c; + text-decoration: none; + } + } + //THREAD STYLES .thread { @@ -416,49 +508,30 @@ div.trending-tags { font-weight: bold; background-color: lightyellow; } - + .thread-title { @include discussion-font; @include discussion-clickable; display: block; + margin-bottom: $body-line-height; font-size: $comment_title_size; font-weight: bold; + line-height: 1.4em; } - + .thread-body, .content-body { @include discussion-font; - font-size: $comment_body_size; + font-size: $post_font_size; margin-bottom: 4px; margin-top: 3px; - min-height: 35px; - + p { @include discussion-font; - margin: 0; } } .thread-tags { 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; - - &:hover { - border-color: #1E4612; - color: #1E4612; - } - } } .info { @@ -467,101 +540,113 @@ div.trending-tags { font-size: $comment_info_size; font-style: italic; margin-top: 2%; - - a { - - &:hover { + + a:hover { text-decoration: none; color: #1C71DD; - } } .comment-time { display: inline; float: right; - margin-right: -4%; } - + .comment-count { display: inline; + margin-right: 20px; } - - .discussion-reply { - margin-left: 4px; + + .discussion-actions { + display: inline; + margin: 0; + padding: 0; + + li { + display: inline; + margin-right: 20px; + } } - + .discussion-link { @include discussion-font; color: #1d9dd9; display: inline; - margin-left: 2px; - - &:hover { - text-decoration: none; - color: #1C71DD; + + &.discussion-unfollow-thread { + color: #dea03e; } } } - + .discussion-content { border-top: lightgray 1px solid; overflow: hidden; - padding: 1.5% 0; - + // padding: 1.5% 0; + .discussion-reply-new { @include discussion-font; - margin-left: 5%; - + margin-left: 68px; + .reply-body { @include discussion-font; display: block; - font-size: $comment_body_size; + font-size: $post_font_size; margin-top: 10px; width: 95%; } } } - + //COMMENT STYLES .comments { //display: none; - margin-left: $comment_margin_left; + // margin-left: $comment_margin_left; + // margin-left: flex-grid(1); + margin-left: 68px; overflow: hidden; - + + .discussion-votes { + margin-top: 8px; + } + + .discussion-right-wrapper { + margin: 10px 0 10px 68px; + } + .comment { .comment-body, .content-body { @include discussion-font; color: black; display: block; - font-size: $comment_body_size; + font-size: $comment_font_size; margin-top: 3px; } - + &.endorsed { > .discussion-content { - background-color: lightyellow; + background-color: #fcfcea; } } } } } - + //PAGES .discussion-paginator { - font-size: $comment_body_size; + 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 { background: #EEE; -webkit-border-radius: 3px; @@ -573,13 +658,28 @@ div.trending-tags { font-weight: normal; padding: 4px 10px; text-decoration: none; - + &:hover { background: #DDD; } } } } + + &.inline-discussion { + .new-post-form { + margin: 24px 60px; + + .post-options { + margin: 8px 0 16px 0; + overflow: hidden; + } + + .reply-post-control { + overflow: hidden; + } + } + } } //EDITOR STYLES @@ -596,22 +696,50 @@ div.trending-tags { background-color: Silver; } -.wmd-input -{ +.wmd-input { height: 150px; width: 100%; - background-color: Gainsboro; - border: 1px solid DarkGray; - font: inherit; + background-color: #e9e9e9; + border: 1px solid #c8c8c8; + 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 -{ - background-color: #c0e0ff; +.wmd-preview { + position: relative; + font-family: $sans-serif; + padding: 25px 20px 10px 20px; + margin-bottom: 5px; + box-sizing: border-box; + border: 1px solid #c8c8c8; + border-top-width: 0; + @include border-radius(0 0 3px 3px); + overflow: hidden; + @include transition(all, .2s, easeOut); + + &:before { + content: 'PREVIEW'; + position: absolute; + top: 3px; + left: 5px; + font-size: 11px; + color: #bbb; + } + + p { + font-family: $sans-serif; + } + background-color: #fafafa; } -.wmd-button-row -{ +.wmd-button-row { position: relative; margin-left: 5px; margin-right: 5px; @@ -619,6 +747,8 @@ div.trending-tags { margin-top: 10px; padding: 0px; height: 20px; + overflow: hidden; + @include transition(all, .2s, easeOut); } .wmd-spacer diff --git a/lms/templates/discussion/_accordion.html b/lms/templates/discussion/_accordion.html index c072705d55..c5db48e43b 100644 --- a/lms/templates/discussion/_accordion.html +++ b/lms/templates/discussion/_accordion.html @@ -1,23 +1,29 @@ <%! from django.core.urlresolvers import reverse %> -<% -def url_for(commentable): - return reverse('django_comment_client.forum.views.forum_form_discussion', args=[course.id, commentable['discussion_id']]) -%> + -<%def name="make_category(category, commentables)"> -

${category}

+ - - - -% for category, commentables in discussion_info.items(): - ${make_category(category, commentables)} -% endfor + \ No newline at end of file diff --git a/lms/templates/discussion/_forum.html b/lms/templates/discussion/_forum.html index cff3b6c1f9..e6bedb21c2 100644 --- a/lms/templates/discussion/_forum.html +++ b/lms/templates/discussion/_forum.html @@ -1,18 +1,11 @@ <%namespace name="renderer" file="_thread.html"/>
-
- + +
<%include file="_search_bar.html" /> -
-
- - -
-
New Post
+
% if len(threads) == 0:
diff --git a/lms/templates/discussion/_inline.html b/lms/templates/discussion/_inline.html index 306df5c0af..8cc46a7082 100644 --- a/lms/templates/discussion/_inline.html +++ b/lms/templates/discussion/_inline.html @@ -1,26 +1,38 @@ <%namespace name="renderer" file="_thread.html"/> + + + +
-
-
- <%include file="_search_bar.html" /> -
-
New Post
+ +
+
- % if len(threads) == 0: -
- <%include file="_blank_slate.html" /> -
-
- % else: - <%include file="_sort.html" /> -
- % for thread in threads: - ${renderer.render_thread(course_id, thread, show_comments=False)} - % endfor -
- <%include file="_paginator.html" /> - % endif + +
+ % for thread in threads: + ${renderer.render_thread(course_id, thread, show_comments=False)} + % endfor +
+ + <%include file="_paginator.html" />
<%! @@ -36,3 +48,5 @@ } $$annotated_content_info = $.extend($$annotated_content_info, JSON.parse("${annotated_content_info | escape_quotes}")); + + diff --git a/lms/templates/discussion/_sort.html b/lms/templates/discussion/_sort.html index 95dfcead4a..bcbac162ba 100644 --- a/lms/templates/discussion/_sort.html +++ b/lms/templates/discussion/_sort.html @@ -3,9 +3,9 @@ <%def name="link_to_sort(key, title)"> % if key == sort_key: % if sort_order.lower() == 'desc': - ${_link_to_sort(key, 'asc', title + ' ▼', 'sorted')} + ${_link_to_sort(key, 'asc', title + '', 'sorted')} % else: - ${_link_to_sort(key, 'desc', title + ' ▲', 'sorted')} + ${_link_to_sort(key, 'desc', title + '', 'sorted')} % endif % else: ${_link_to_sort(key, 'desc', title)} @@ -22,14 +22,14 @@ %> ${title} - -
- Sort by: + +
+ Sort by: + ${link_to_sort('top', 'top')} + ${link_to_sort('date', 'date')} - | - ${link_to_sort('activity', 'activity')} - | + ${link_to_sort('votes', 'votes')} - | + ${link_to_sort('comments', 'comments')}
diff --git a/lms/templates/discussion/_thread.html b/lms/templates/discussion/_thread.html index 4e93e514d1..e4ffe25e53 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -36,10 +36,10 @@ <%def name="render_content(content, type, **kwargs)">
- + ${render_vote(content)}
+ ${render_title(content, type, **kwargs)}
% if content.get('highlighted_body', None): @@ -83,18 +83,23 @@ <%def name="render_bottom_bar(content, type, **kwargs)"> -
- ${render_info(content)} - ${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")} - ${render_link("discussion-link discussion-edit", "Edit")} - % if type == "comment" and request.user.is_staff: - % if content['endorsed']: - - % else: - +
+ ${render_info(content)} +
    +
  • ${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")}
  • +
  • +
  • ${render_link("discussion-link discussion-edit", "Edit")}
  • +
  • + % if type == "comment" and request.user.is_staff: + % if content['endorsed']: + + % else: + + % endif + % endif - - % endif +
  • +
@@ -109,7 +114,13 @@
@@ -120,8 +131,8 @@ <%def name="render_vote(content)">
- ${render_link("discussion-vote discussion-vote-up", "˄")} + ${render_link("discussion-vote discussion-vote-up", "▲")}
${content['votes']['point']}
- ${render_link("discussion-vote discussion-vote-down", "˅")} + ${render_link("discussion-vote discussion-vote-down", "▼")}