diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index f0189841d2..47962bfdda 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,21 @@ $discussion_input_width: 100%; margin-left: 2%; } } + //THREAD STYLES .thread { //display: none; .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 +285,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 +349,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 +362,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 +391,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..481c50838a 100644 --- a/lms/templates/discussion/_forum.html +++ b/lms/templates/discussion/_forum.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/_thread.html b/lms/templates/discussion/_thread.html index 9878cadc08..65e837751b 100644 --- a/lms/templates/discussion/_thread.html +++ b/lms/templates/discussion/_thread.html @@ -98,15 +98,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)">