From 845ca43ea1cbf9bfc52e5d4992d70e2696509f0b Mon Sep 17 00:00:00 2001 From: Brittany Cheng Date: Wed, 1 Aug 2012 16:42:09 -0400 Subject: [PATCH] inline and forum styles --- .../lib/xmodule/xmodule/discussion_module.py | 2 +- lms/static/sass/_discussion.scss | 57 +++++++--- lms/templates/discussion/_forum.html | 5 + lms/templates/discussion/_inline.html | 5 +- lms/templates/discussion/_search_bar.html | 4 - lms/templates/discussion/thread.html | 105 ++++++++++++++++++ 6 files changed, 156 insertions(+), 22 deletions(-) create mode 100644 lms/templates/discussion/thread.html diff --git a/common/lib/xmodule/xmodule/discussion_module.py b/common/lib/xmodule/xmodule/discussion_module.py index e3531468ba..c3388a968c 100644 --- a/common/lib/xmodule/xmodule/discussion_module.py +++ b/common/lib/xmodule/xmodule/discussion_module.py @@ -15,7 +15,7 @@ class DiscussionModule(XModule): context = { 'discussion_id': self.discussion_id, } - return self.system.render_template('discussion/_show_discussion.html', context) + return self.system.render_template('discussion/_discussion_module.html', context) def __init__(self, system, location, definition, instance_state=None, shared_state=None, **kwargs): XModule.__init__(self, system, location, definition, instance_state, shared_state, **kwargs) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index f7dae9bc89..101c1f54c2 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -24,8 +24,13 @@ $discussion_input_width: 90%; } .discussion { + .search-wrapper-inline { + width: 80%; + display: inline-block; + margin-top: 2%; + } .discussion-search-form { - margin-bottom: flex-gutter(4); + margin-bottom: 1%; display: inline-block; width: flex-grid(12); .discussion-link { @@ -47,24 +52,51 @@ $discussion_input_width: 90%; float: left; width: 72%; } - .search-within { - display: block; - margin-top: flex-gutter(); - } - .discussion-search-within-board { - font-style: normal; - font: inherit; - } + } + .search-within { + display: block; + margin-bottom: 3%; + } + .discussion-search-within-board { + font-style: normal; + font: inherit; } .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); + background-image: -moz-linear-gradient(top, #959595,#7B7B7B); + background-image: -ms-linear-gradient(top, #959595,#7B7B7B); + background-image: -o-linear-gradient(top, #959595,#7B7B7B); + background-image: linear-gradient(top, #959595,#7B7B7B); + 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); + background-image: -moz-linear-gradient(top, #A2A2A2,#7B7B7B); + background-image: -ms-linear-gradient(top, #A2A2A2,#7B7B7B); + background-image: -o-linear-gradient(top, #A2A2A2,#7B7B7B); + background-image: linear-gradient(top, #A2A2A2,#7B7B7B); + border: 1px solid #555; + } } .discussion-title { @include discussion-font; @@ -122,7 +154,7 @@ $discussion_input_width: 90%; float: left; width: 85%; } - .new-post-form, .discussion-thread-edit{ + .new-post-form, .discussion-thread-edit { .title-input, .body-input { font-style: normal; font: inherit; @@ -177,8 +209,6 @@ $discussion_input_width: 90%; } .thread { //display: none; - margin-top: 30px; - margin-bottom: 30px; .thread-title { @include discussion-font; @include discussion-clickable; @@ -240,10 +270,9 @@ $discussion_input_width: 90%; } } .discussion-content { - margin-top: 10px; overflow: hidden; border-top: lightgray 1px solid; - padding-top: 20px; + padding: 3% 0; .discussion-reply-new { margin-left: $comment_margin_left; .reply-body { diff --git a/lms/templates/discussion/_forum.html b/lms/templates/discussion/_forum.html index 967ebb9994..6176ee2dfb 100644 --- a/lms/templates/discussion/_forum.html +++ b/lms/templates/discussion/_forum.html @@ -6,6 +6,11 @@ Discussion ${search_bar} +
+ + +
+
New Post
% for thread in threads: diff --git a/lms/templates/discussion/_inline.html b/lms/templates/discussion/_inline.html index 967ebb9994..c701acf017 100644 --- a/lms/templates/discussion/_inline.html +++ b/lms/templates/discussion/_inline.html @@ -2,10 +2,9 @@
-
- Discussion +
+ ${search_bar}
- ${search_bar}
New Post
% for thread in threads: diff --git a/lms/templates/discussion/_search_bar.html b/lms/templates/discussion/_search_bar.html index 869f83556f..c295e14b54 100644 --- a/lms/templates/discussion/_search_bar.html +++ b/lms/templates/discussion/_search_bar.html @@ -8,8 +8,4 @@ def url_for_search():
Search posts
-
- - -
diff --git a/lms/templates/discussion/thread.html b/lms/templates/discussion/thread.html new file mode 100644 index 0000000000..e49d555d59 --- /dev/null +++ b/lms/templates/discussion/thread.html @@ -0,0 +1,105 @@ +<%! from django.core.urlresolvers import reverse %> +<%! from datehelper import time_ago_in_words %> +<%! from dateutil.parser import parse %> +<%! import urllib %> + +<%def name="render_thread(course_id, thread, edit_thread=False, show_comments=False)"> +
+ ${render_content(thread, "thread", edit_thread=edit_thread, show_comments=show_comments)} + % if show_comments: + ${render_comments(thread['children'])} + % endif +
+ + +<%def name="render_comments(comments)"> +
+ % for comment in comments: +
+ ${render_content(comment, "comment")} +
+ ${render_comments(comment['children'])} +
+
+ % endfor +
+ + +<%def name="render_content(content, type, **kwargs)"> +
+
+ ${render_vote(content)} +
+ ${render_title(content, type, **kwargs)} +
+
${content['body'] | h}
+ + ${render_tags(content, type, **kwargs)} + ${render_bottom_bar(content, type, **kwargs)} +
+
+
+
+ + +<%def name="render_title(content, type, **kwargs)"> + <% + if type == "thread": + if kwargs.get('show_comments', False): + url_for_thread = "" + else: + url_for_thread = reverse('django_comment_client.forum.views.single_thread', args=[course_id, content['commentable_id'], content['id']]) + %> + % if type == "thread": + ${content['title'] | h} + % endif + + +<%def name="render_tags(content, type, **kwargs)"> + <% + def url_for_tags(tags): + return reverse('django_comment_client.forum.views.search', args=[course_id]) + '?' + urllib.urlencode({'tags': ",".join(tags)}) + %> + % if type == "thread": +
+ % for tag in content['tags']: + ${tag | h} + % endfor +
+ + % endif + + +<%def name="render_bottom_bar(content, type, **kwargs)"> +
+ ${render_info(content)} + % if type == "thread" and kwargs['edit_thread'] or type == "comment": + ${render_link("discussion-link discussion-reply", "Reply")} + ${render_link("discussion-link discussion-edit", "Edit")} + % endif +
+ + +<%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 + + +<%def name="render_link(cls, html)"> + ${html} + + +<%def name="render_vote(content)"> +
+ ${render_link("discussion-vote discussion-vote-up", "˄")} + ${content['votes']['point']} + ${render_link("discussion-vote discussion-vote-down", "˅")} +
+