Skip to content

E
edx-platform
Commit 10ff6af3 by Tom Giannattasio
Options

discussion sidebar additions; inline text editor example

parent d6e969a8
Showing with 180 additions and 49 deletions
lms/static/sass/_discussion.scss
......@@ -23,7 +23,95 @@ $tag_text_color: #5b614f;
}
}
@mixin standard-discussion-link {
text-decoration: none;
&:hover {
color: #1C71DD;
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();
}
......@@ -239,6 +327,7 @@ $tag_text_color: #5b614f;
color: #9a9a9a;
}
}
//CREATE NEW AND EDIT POSTS
.discussion-right-wrapper {
min-height: 40px;
......@@ -302,6 +391,14 @@ $tag_text_color: #5b614f;
padding: 0;
border-width: 0;
}
.post-options {
height: 0;
}
.reply-post-control {
height: 0;
}
}
.new-post-control {
......@@ -321,12 +418,12 @@ $tag_text_color: #5b614f;
.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;
}
......@@ -349,6 +446,25 @@ $tag_text_color: #5b614f;
}
}
.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 {
//display: none;
......@@ -376,25 +492,6 @@ $tag_text_color: #5b614f;
.thread-tags {
display: inline-block;
.thread-tag {
@include discussion-font;
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;
}
}
}
.info {
......@@ -526,9 +623,16 @@ $tag_text_color: #5b614f;
}
&.inline-discussion {
.discussion-new-post-inline {
textarea {
.new-post-form {
margin: 24px 60px;
.post-options {
margin: 8px 0 16px 0;
overflow: hidden;
}
.reply-post-control {
overflow: hidden;
}
}
}
......@@ -558,7 +662,6 @@ $tag_text_color: #5b614f;
font-size: 0.8em;
line-height: 1.6em;
@include border-radius(3px 3px 0 0);
// @include box-shadow(none);
}
.wmd-preview {
......@@ -571,7 +674,7 @@ $tag_text_color: #5b614f;
border-top-width: 0;
@include border-radius(0 0 3px 3px);
overflow: hidden;
@include transition(all, .1s, easeOut);
@include transition(all, .2s, easeOut);
&:before {
content: 'PREVIEW';
......@@ -581,7 +684,6 @@ $tag_text_color: #5b614f;
font-size: 11px;
color: #bbb;
}
p {
font-family: $sans-serif;
......@@ -598,7 +700,7 @@ $tag_text_color: #5b614f;
padding: 0px;
height: 20px;
overflow: hidden;
@include transition(all, .1s, easeOut);
@include transition(all, .2s, easeOut);
}
.wmd-spacer
......
lms/templates/discussion/_accordion.html
<%! 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']])
%>
<article class="sidebar-module">
<a href="#" class="sidebar-new-post-button">New Post</a>
</article>
<%def name="make_category(category, commentables)">
<h3><a href="#">${category}</a></h3>
<article class="discussion-sidebar-following sidebar-module">
<header>
<h4>Following</h4>
<a href="#" class="sidebar-view-all">view all &rsaquo;</a>
</header>
<ol class="discussion-sidebar-following-list">
<li><a href="#"><span class="sidebar-following-name">Hints on HW4</span> <span class="sidebar-vote-count">1348</span></a></li>
<li><a href="#"><span class="sidebar-following-name">Answers to Mi-term</span> <span class="sidebar-vote-count">-37</span></a></li>
<li><a href="#"><span class="sidebar-following-name">Summaries for Lectures 1 to 12 (more added, links fixed)</span> <span class="sidebar-vote-count">128</span></a></li>
<ol>
</article>
<ul>
% for commentable in commentables:
<li${' class="active"' if active == commentable['discussion_id'] else ''}>
<a href="${url_for(commentable)}">
<p>${commentable['title']}</p>
</a>
% endfor
</ul>
</%def>
% for category, commentables in discussion_info.items():
${make_category(category, commentables)}
% endfor
<article class="discussion-sidebar-tags sidebar-module">
<header>
<h4>Recent Tags</h4>
<a href="#" class="sidebar-view-all">view all &rsaquo;</a>
</header>
<ol class="discussion-sidebar-tags-list">
<li><a href="#" class="thread-tag">week-1</a><span class="sidebar-tag-count">&times;1348</span></li>
<li><a href="#" class="thread-tag">S2V8: Method 3</a><span class="sidebar-tag-count">&times;37</span></li>
<li><a href="#" class="thread-tag">artificial-intelligence</a><span class="sidebar-tag-count">&times;128</span></li>
<ol>
</article>
\ No newline at end of file
lms/templates/discussion/_inline.html
<%namespace name="renderer" file="_thread.html"/>
<script type="text/javascript">
$('#wmd-input-reply-body').bind('focus', function(e) {
$('.new-post-form').removeClass('collapsed');
});
</script>
<section class="discussion inline-discussion" _id="${discussion_id}">
<div class="discussion-non-content">
<div class="discussion-new-post-inline">
</div>
<form class="new-post-form collapsed" id="new-post-form" style="display: block; ">
<ul class="discussion-errors"></ul>
<div class="reply-body"><div class="wmd-panel"><div id="wmd-button-bar-reply-body-502021ba30e78e7d4d00031d"><ul id="wmd-button-row-reply-body-502021ba30e78e7d4d00031d" class="wmd-button-row"><li class="wmd-button" style="left: 0px; " id="wmd-bold-button-reply-body-502021ba30e78e7d4d00031d" title="Strong &lt;strong&gt; Ctrl+B"><span style="background-position: 0px 0px; "></span></li><li class="wmd-button" style="left: 25px; " id="wmd-italic-button-reply-body-502021ba30e78e7d4d00031d" title="Emphasis &lt;em&gt; Ctrl+I"><span style="background-position: -20px 0px; "></span></li><li class="wmd-spacer wmd-spacer1" id="wmd-spacer1-reply-body-502021ba30e78e7d4d00031d"></li><li class="wmd-button" style="left: 75px; " id="wmd-link-button-reply-body-502021ba30e78e7d4d00031d" title="Hyperlink &lt;a&gt; Ctrl+L"><span style="background-position: -40px 0px; "></span></li><li class="wmd-button" style="left: 100px; " id="wmd-quote-button-reply-body-502021ba30e78e7d4d00031d" title="Blockquote &lt;blockquote&gt; Ctrl+Q"><span style="background-position: -60px 0px; "></span></li><li class="wmd-button" style="left: 125px; " id="wmd-code-button-reply-body-502021ba30e78e7d4d00031d" title="Code Sample &lt;pre&gt;&lt;code&gt; Ctrl+K"><span style="background-position: -80px 0px; "></span></li><li class="wmd-button" style="left: 150px; " id="wmd-image-button-reply-body-502021ba30e78e7d4d00031d" title="Image &lt;img&gt; Ctrl+G"><span style="background-position: -100px 0px; "></span></li><li class="wmd-spacer wmd-spacer2" id="wmd-spacer2-reply-body-502021ba30e78e7d4d00031d"></li><li class="wmd-button" style="left: 200px; " id="wmd-olist-button-reply-body-502021ba30e78e7d4d00031d" title="Numbered List &lt;ol&gt; Ctrl+O"><span style="background-position: -120px 0px; "></span></li><li class="wmd-button" style="left: 225px; " id="wmd-ulist-button-reply-body-502021ba30e78e7d4d00031d" title="Bulleted List &lt;ul&gt; Ctrl+U"><span style="background-position: -140px 0px; "></span></li><li class="wmd-button" style="left: 250px; " id="wmd-heading-button-reply-body-502021ba30e78e7d4d00031d" title="Heading &lt;h1&gt;/&lt;h2&gt; Ctrl+H"><span style="background-position: -160px 0px; "></span></li><li class="wmd-button" style="left: 275px; " id="wmd-hr-button-reply-body-502021ba30e78e7d4d00031d" title="Horizontal Rule &lt;hr&gt; Ctrl+R"><span style="background-position: -180px 0px; "></span></li><li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-reply-body-502021ba30e78e7d4d00031d"></li><li class="wmd-button" style="left: 325px; " id="wmd-undo-button-reply-body-502021ba30e78e7d4d00031d" title="Undo - Ctrl+Z"><span style="background-position: -200px -20px; "></span></li><li class="wmd-button" style="left: 350px; " id="wmd-redo-button-reply-body-502021ba30e78e7d4d00031d" title="Redo - Ctrl+Shift+Z"><span style="background-position: -220px -20px; "></span></li></ul></div><textarea class="wmd-input" id="wmd-input-reply-body" placeholder="Post a question or comment…"></textarea><div id="wmd-preview-reply-body-502021ba30e78e7d4d00031d" class="wmd-panel wmd-preview"></div></div></div>
<div class="post-options">
<input type="checkbox" class="discussion-post-anonymously" id="discussion-post-anonymously-502021ba30e78e7d4d00031d">
<label for="discussion-post-anonymously-502021ba30e78e7d4d00031d">post anonymously</label>
<input type="checkbox" class="discussion-auto-watch" id="discussion-autowatch-502021ba30e78e7d4d00031d" checked="">
<label for="discussion-auto-watch-502021ba30e78e7d4d00031d">follow this thread</label>
</div>
<div class="reply-post-control">
<a class="discussion-submit-post control-button" href="javascript:void(0)">Submit</a>
</div>
</form>
</div>
<div class="threads">
% for thread in threads:
${renderer.render_thread(course_id, thread, show_comments=False)}
% endfor
</div>
<%include file="_paginator.html" />
</section>
......@@ -27,3 +47,5 @@
}
$$annotated_content_info = $.extend($$annotated_content_info, JSON.parse("${annotated_content_info | escape_quotes}"));
</script>
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