From 00a72cf86a9e8b48d6ee4b9afcb87fd937033a7e Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 7 Aug 2012 11:27:13 -0400 Subject: [PATCH] updated thread styles: voting, actions, comments, sort --- lms/static/sass/_discussion.scss | 88 +++++++++++++++++++-------- lms/templates/discussion/_sort.html | 12 ++-- lms/templates/discussion/_thread.html | 31 ++++++---- 3 files changed, 86 insertions(+), 45 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 2bad08a601..66ba6b4e57 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1,8 +1,9 @@ $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; @@ -49,9 +50,22 @@ $tag_text_color: #5b614f; //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; @@ -59,8 +73,8 @@ $tag_text_color: #5b614f; } .discussion-sort-link.sorted { - color: #1C71DD; - font-weight: bold; + color: #000; + border-bottom: 2px solid #000; } } @@ -113,7 +127,7 @@ $tag_text_color: #5b614f; .discussion-search-within-board { font: inherit; - font-size: $comment_body_size; + font-size: $post_font_size; font-style: normal; } @@ -188,12 +202,13 @@ $tag_text_color: #5b614f; .discussion-votes { float: left; width: flex-grid(1); + margin-top: 18px; text-align: center; .discussion-vote { display: block; width: 50px; - height: 19px; + height: 17px; margin: auto; background: url(../images/vote-arrows.png) no-repeat; font-size: 15px; @@ -204,23 +219,23 @@ $tag_text_color: #5b614f; } .discussion-vote-up { - margin-bottom: 3px; - background-position: -50px -1px; + margin-bottom: 5px; + background-position: -50px -3px; &:hover { - background-position: -50px -3px; + background-position: -50px -5px; @include transition-duration(0.05s); } &.voted { - background-position: 0 -1px; + background-position: 0 -3px; color: #1C71DD; @include transition-duration(0); } } .discussion-vote-down { - margin-top: 5px; + margin-top: 7px; background-position: -50px -30px; &:hover { @@ -233,25 +248,25 @@ $tag_text_color: #5b614f; color: #1C71DD; @include transition-duration(0); } - } - + } .discussion-vote-count { @include discussion-font; - font-size: $comment_body_size; + font-size: $post_font_size; } .discussion-votes-point { - font-size: 1em; + 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; } .new-post-form, .discussion-thread-edit { @@ -344,11 +359,12 @@ $tag_text_color: #5b614f; 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; @@ -387,16 +403,31 @@ $tag_text_color: #5b614f; font-style: italic; margin-top: 2%; + a:hover { + text-decoration: none; + color: #1C71DD; + } + .comment-time { display: inline; float: right; - margin-right: -4%; } - .comment-count { + .comment-count { display: inline; } + .discussion-actions { + display: inline; + margin: 0; + padding: 0; + + li { + display: inline; + margin-left: 20px; + } + } + .discussion-reply { margin-left: 4px; } @@ -412,7 +443,7 @@ $tag_text_color: #5b614f; .discussion-content { border-top: lightgray 1px solid; overflow: hidden; - padding: 1.5% 0; + // padding: 1.5% 0; .discussion-reply-new { @include discussion-font; @@ -421,7 +452,7 @@ $tag_text_color: #5b614f; .reply-body { @include discussion-font; display: block; - font-size: $comment_body_size; + font-size: $post_font_size; margin-top: 10px; width: 95%; } @@ -431,21 +462,26 @@ $tag_text_color: #5b614f; //COMMENT STYLES .comments { //display: none; - margin-left: $comment_margin_left; + // margin-left: $comment_margin_left; + margin-left: flex-grid(1); overflow: hidden; + .discussion-right-wrapper { + margin: 10px 0; + } + .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; } } } @@ -454,7 +490,7 @@ $tag_text_color: #5b614f; //PAGES .discussion-paginator { - font-size: $comment_body_size; + font-size: $post_font_size; margin-bottom: 10px; margin-top: 20px; text-align: center; diff --git a/lms/templates/discussion/_sort.html b/lms/templates/discussion/_sort.html index d8df1e7e3d..b0c0b4b048 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)} @@ -24,12 +24,12 @@
- Sort by: + Sort by: ${link_to_sort('top', 'top')} - | + ${link_to_sort('date', 'date')} - | + ${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 269d65c608..389105aee8 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -36,10 +36,11 @@ <%def name="render_content(content, type, **kwargs)">
- + ${render_vote(content)}
+ ${render_title(content, type, **kwargs)}
${content['body'] | h}
@@ -74,18 +75,22 @@ <%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 +
    • +