Skip to content

E
edx-platform
Commit 00a72cf8 by Tom Giannattasio
Options

updated thread styles: voting, actions, comments, sort

parent 2135ed50
Showing with 86 additions and 45 deletions
lms/static/sass/_discussion.scss
$comment_margin_left: 30px; $comment_margin_left: 30px;
$discussion_title_size: 1.6em; $discussion_title_size: 1.6em;
$comment_title_size: 1.0em; $comment_title_size: 1.0em;
$comment_body_size: 0.9em; $post_font_size: 0.9em;
$comment_info_size: 0.75em; $comment_info_size: 0.75em;
$comment_font_size: 0.8em;
$discussion_input_width: 100%; $discussion_input_width: 100%;
$tag_background_color: #e7ecdd; $tag_background_color: #e7ecdd;
...@@ -49,9 +50,22 @@ $tag_text_color: #5b614f; ...@@ -49,9 +50,22 @@ $tag_text_color: #5b614f;
//SORTING //SORTING
.discussion-sort { .discussion-sort {
float: right; float: right;
font-size: $comment_body_size; font-size: 0.8em;
margin-top: -2.5%; margin-top: -36px;
.discussion-label {
display: block;
float: left;
padding: 0 14px;
line-height: 34px;
}
.discussion-sort-link { .discussion-sort-link {
display: block;
float: left;
padding: 0 14px;
line-height: 34px;
&:hover { &:hover {
color: #1C71DD; color: #1C71DD;
text-decoration: none; text-decoration: none;
...@@ -59,8 +73,8 @@ $tag_text_color: #5b614f; ...@@ -59,8 +73,8 @@ $tag_text_color: #5b614f;
} }
.discussion-sort-link.sorted { .discussion-sort-link.sorted {
color: #1C71DD; color: #000;
font-weight: bold; border-bottom: 2px solid #000;
} }
} }
...@@ -113,7 +127,7 @@ $tag_text_color: #5b614f; ...@@ -113,7 +127,7 @@ $tag_text_color: #5b614f;
.discussion-search-within-board { .discussion-search-within-board {
font: inherit; font: inherit;
font-size: $comment_body_size; font-size: $post_font_size;
font-style: normal; font-style: normal;
} }
...@@ -188,12 +202,13 @@ $tag_text_color: #5b614f; ...@@ -188,12 +202,13 @@ $tag_text_color: #5b614f;
.discussion-votes { .discussion-votes {
float: left; float: left;
width: flex-grid(1); width: flex-grid(1);
margin-top: 18px;
text-align: center; text-align: center;
.discussion-vote { .discussion-vote {
display: block; display: block;
width: 50px; width: 50px;
height: 19px; height: 17px;
margin: auto; margin: auto;
background: url(../images/vote-arrows.png) no-repeat; background: url(../images/vote-arrows.png) no-repeat;
font-size: 15px; font-size: 15px;
...@@ -204,23 +219,23 @@ $tag_text_color: #5b614f; ...@@ -204,23 +219,23 @@ $tag_text_color: #5b614f;
} }
.discussion-vote-up { .discussion-vote-up {
margin-bottom: 3px; margin-bottom: 5px;
background-position: -50px -1px; background-position: -50px -3px;
&:hover { &:hover {
background-position: -50px -3px; background-position: -50px -5px;
@include transition-duration(0.05s); @include transition-duration(0.05s);
} }
&.voted { &.voted {
background-position: 0 -1px; background-position: 0 -3px;
color: #1C71DD; color: #1C71DD;
@include transition-duration(0); @include transition-duration(0);
} }
} }
.discussion-vote-down { .discussion-vote-down {
margin-top: 5px; margin-top: 7px;
background-position: -50px -30px; background-position: -50px -30px;
&:hover { &:hover {
...@@ -233,25 +248,25 @@ $tag_text_color: #5b614f; ...@@ -233,25 +248,25 @@ $tag_text_color: #5b614f;
color: #1C71DD; color: #1C71DD;
@include transition-duration(0); @include transition-duration(0);
} }
} }
.discussion-vote-count { .discussion-vote-count {
@include discussion-font; @include discussion-font;
font-size: $comment_body_size; font-size: $post_font_size;
} }
.discussion-votes-point { .discussion-votes-point {
font-size: 1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
color: #9a9a9a;
} }
} }
//CREATE NEW AND EDIT POSTS //CREATE NEW AND EDIT POSTS
.discussion-right-wrapper { .discussion-right-wrapper {
float: left; float: left;
min-height: 40px; min-height: 40px;
// width: 90%;
width: flex-grid(11); width: flex-grid(11);
margin: 24px 0;
} }
.new-post-form, .discussion-thread-edit { .new-post-form, .discussion-thread-edit {
...@@ -344,11 +359,12 @@ $tag_text_color: #5b614f; ...@@ -344,11 +359,12 @@ $tag_text_color: #5b614f;
margin-bottom: $body-line-height; margin-bottom: $body-line-height;
font-size: $comment_title_size; font-size: $comment_title_size;
font-weight: bold; font-weight: bold;
line-height: 1.4em;
} }
.thread-body, .content-body { .thread-body, .content-body {
@include discussion-font; @include discussion-font;
font-size: $comment_body_size; font-size: $post_font_size;
margin-bottom: 4px; margin-bottom: 4px;
margin-top: 3px; margin-top: 3px;
...@@ -387,16 +403,31 @@ $tag_text_color: #5b614f; ...@@ -387,16 +403,31 @@ $tag_text_color: #5b614f;
font-style: italic; font-style: italic;
margin-top: 2%; margin-top: 2%;
a:hover {
text-decoration: none;
color: #1C71DD;
}
.comment-time { .comment-time {
display: inline; display: inline;
float: right; float: right;
margin-right: -4%;
} }
.comment-count { .comment-count {
display: inline; display: inline;
} }
.discussion-actions {
display: inline;
margin: 0;
padding: 0;
li {
display: inline;
margin-left: 20px;
}
}
.discussion-reply { .discussion-reply {
margin-left: 4px; margin-left: 4px;
} }
...@@ -412,7 +443,7 @@ $tag_text_color: #5b614f; ...@@ -412,7 +443,7 @@ $tag_text_color: #5b614f;
.discussion-content { .discussion-content {
border-top: lightgray 1px solid; border-top: lightgray 1px solid;
overflow: hidden; overflow: hidden;
padding: 1.5% 0; // padding: 1.5% 0;
.discussion-reply-new { .discussion-reply-new {
@include discussion-font; @include discussion-font;
...@@ -421,7 +452,7 @@ $tag_text_color: #5b614f; ...@@ -421,7 +452,7 @@ $tag_text_color: #5b614f;
.reply-body { .reply-body {
@include discussion-font; @include discussion-font;
display: block; display: block;
font-size: $comment_body_size; font-size: $post_font_size;
margin-top: 10px; margin-top: 10px;
width: 95%; width: 95%;
} }
...@@ -431,21 +462,26 @@ $tag_text_color: #5b614f; ...@@ -431,21 +462,26 @@ $tag_text_color: #5b614f;
//COMMENT STYLES //COMMENT STYLES
.comments { .comments {
//display: none; //display: none;
margin-left: $comment_margin_left; // margin-left: $comment_margin_left;
margin-left: flex-grid(1);
overflow: hidden; overflow: hidden;
.discussion-right-wrapper {
margin: 10px 0;
}
.comment { .comment {
.comment-body, .content-body { .comment-body, .content-body {
@include discussion-font; @include discussion-font;
color: black; color: black;
display: block; display: block;
font-size: $comment_body_size; font-size: $comment_font_size;
margin-top: 3px; margin-top: 3px;
} }
&.endorsed { &.endorsed {
> .discussion-content { > .discussion-content {
background-color: lightyellow; background-color: #fcfcea;
} }
} }
} }
...@@ -454,7 +490,7 @@ $tag_text_color: #5b614f; ...@@ -454,7 +490,7 @@ $tag_text_color: #5b614f;
//PAGES //PAGES
.discussion-paginator { .discussion-paginator {
font-size: $comment_body_size; font-size: $post_font_size;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
......
lms/templates/discussion/_sort.html
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<%def name="link_to_sort(key, title)"> <%def name="link_to_sort(key, title)">
% if key == sort_key: % if key == sort_key:
% if sort_order.lower() == 'desc': % if sort_order.lower() == 'desc':
${_link_to_sort(key, 'asc', title + ' &#x25BC;', 'sorted')} ${_link_to_sort(key, 'asc', title + '', 'sorted')}
% else: % else:
${_link_to_sort(key, 'desc', title + ' &#x25B2;', 'sorted')} ${_link_to_sort(key, 'desc', title + '', 'sorted')}
% endif % endif
% else: % else:
${_link_to_sort(key, 'desc', title)} ${_link_to_sort(key, 'desc', title)}
...@@ -24,12 +24,12 @@ ...@@ -24,12 +24,12 @@
</%def> </%def>
<div class="discussion-sort"> <div class="discussion-sort">
Sort by: <span class="discussion-label">Sort by:</span>
${link_to_sort('top', 'top')} ${link_to_sort('top', 'top')}
|
${link_to_sort('date', 'date')} ${link_to_sort('date', 'date')}
|
${link_to_sort('votes', 'votes')} ${link_to_sort('votes', 'votes')}
|
${link_to_sort('comments', 'comments')} ${link_to_sort('comments', 'comments')}
</div> </div>
lms/templates/discussion/_thread.html
...@@ -36,10 +36,11 @@ ...@@ -36,10 +36,11 @@
<%def name="render_content(content, type, **kwargs)"> <%def name="render_content(content, type, **kwargs)">
<div class="discussion-content"> <div class="discussion-content">
<div class="discussion-content-wrapper clearfix"> <div class="discussion-content-wrapper clearfix">
<div class="follow-wrapper">
</div>
${render_vote(content)} ${render_vote(content)}
<div class="discussion-right-wrapper clearfix"> <div class="discussion-right-wrapper clearfix">
<div class="follow-wrapper">
</div>
${render_title(content, type, **kwargs)} ${render_title(content, type, **kwargs)}
<div class="discussion-content-view"> <div class="discussion-content-view">
<div class="content-body ${type}-body" id="content-body-${content['id']}">${content['body'] | h}</div> <div class="content-body ${type}-body" id="content-body-${content['id']}">${content['body'] | h}</div>
...@@ -74,18 +75,22 @@ ...@@ -74,18 +75,22 @@
</%def> </%def>
<%def name="render_bottom_bar(content, type, **kwargs)"> <%def name="render_bottom_bar(content, type, **kwargs)">
<div class="info"> <div class="info">
${render_info(content)} ${render_info(content)}
${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")} <ul class="discussion-actions">
${render_link("discussion-link discussion-edit", "Edit")} <li>${render_link("discussion-link discussion-reply discussion-reply-" + type, "Reply")}</li>
% if type == "comment" and request.user.is_staff: <li>${render_link("discussion-link discussion-edit", "Edit")}</li>
% if content['endorsed']: <li>
<input type="checkbox" checked="checked" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}"> % if type == "comment" and request.user.is_staff:
% else: % if content['endorsed']:
<input type="checkbox" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}"> <input type="checkbox" checked="checked" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}">
% else:
<input type="checkbox" class="discussion-link discussion-endorse" id="discussion-endorse-${content['id']}">
% endif
<label class="discussion-link" for="discussion-endorse-${content['id']}">Endorsed</label>
% endif % endif
<label class="discussion-link" for="discussion-endorse-${content['id']}">Endorsed</label> </li>
% endif </ul>
</div> </div>
</%def> </%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