Skip to content

E
edx-platform
Commit 80a9620a by Arjun Singh
Options

Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into… 

Merge branch 'feature/tomg/new-discussions' of github.com:MITx/mitx into feature/tomg/new-discussions
parents 9d222469 4f4f35f5
Showing with 209 additions and 72 deletions
lms/static/coffee/src/discussion/discussion_module_view.coffee
......@@ -16,13 +16,15 @@ if Backbone?
else
@page = 1
toggleNewPost: (event) ->
event.preventDefault()
if @newPostForm.is(':hidden')
@newPostForm.slideDown(300)
else
@newPostForm.slideUp(300)
hideNewPost: (event) ->
event.preventDefault()
@newPostForm.slideUp(300)
toggleDiscussion: (event) ->
......
lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee
......@@ -195,8 +195,8 @@ class @DiscussionThreadInlineView extends DiscussionContentView
@expanded = true
@$el.find('.post-body').html(@model.get('body'))
@convertMath()
@$el.find('.expand-post').hide()
@$el.find('.collapse-post').show()
@$el.find('.expand-post').css('display', 'none')
@$el.find('.collapse-post').css('display', 'block')
@$el.find('.post-extended-content').show()
@makeWmdEditor "reply-body"
if @$el.find('.loading').length
......@@ -206,6 +206,6 @@ class @DiscussionThreadInlineView extends DiscussionContentView
@expanded = false
@$el.find('.post-body').html(@model.get('abbreviatedBody'))
@convertMath()
@$el.find('.collapse-post').hide()
@$el.find('.collapse-post').css('display', 'none')
@$el.find('.post-extended-content').hide()
@$el.find('.expand-post').show()
@$el.find('.expand-post').css('display', 'block')
lms/static/sass/_discussion.scss
......@@ -23,7 +23,7 @@
height: 35px;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #444;
border: 1px solid #aaa;
@include linear-gradient(top, #eee, #ccc);
font-size: 13px;
font-weight: 700;
......@@ -37,6 +37,25 @@
}
}
@mixin dark-grey-button {
display: block;
height: 35px;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #222;
background: -webkit-linear-gradient(top, #777, #555);
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
&:hover {
background: -webkit-linear-gradient(top, #888, #666);
}
}
@mixin discussion-wmd-input {
width: 100%;
height: 240px;
......@@ -291,6 +310,7 @@ body.discussion {
@include white-button;
height: 40px;
margin-top: 15px;
border-color: #444;
line-height: 36px;
.drop-arrow {
......@@ -488,6 +508,7 @@ body.discussion {
.new-post-cancel {
@include white-button;
bordre-color: #444;
float: left;
margin: 10px 0 0 15px;
}
......@@ -1198,27 +1219,32 @@ body.discussion {
padding: 10px 20px;
> header .vote-btn {
position: relative;
z-index: 100;
margin-top: 5px;
}
.post-tools {
@include clearfix;
margin-top: 15px;
.ui-icon {
display: inline;
float: right;
}
a {
display: inline;
float: left;
height: 26px;
padding: 0 12px;
border-radius: 3px;
border: 1px solid #b2b2b2;
@include linear-gradient(top, #fff 35%, #ebebeb);
font-size: 13px;
line-height: 24px;
color: #737373;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
width: 6em;
width: 13px;
height: 13px;
margin-right: 4px;
background: url(../images/small-grey-arrows.png) no-repeat;
&.expand {
margin-top: 5px;
background-position: 0 0;
}
&.collapse {
margin-top: 6px;
background-position: -13px 0;
}
}
}
}
......@@ -1275,6 +1301,8 @@ body.discussion {
}
.vote-btn {
position: relative;
z-index: 100;
float: right;
display: block;
height: 27px;
......@@ -1420,7 +1448,6 @@ body.discussion {
padding: 0;
@include clearfix;
li {
float: left;
margin-right: 8px;
......@@ -1541,38 +1568,90 @@ body.discussion {
.discussion-module {
@extend .discussion-body;
.discussion-show {
@include white-button;
display: inline-block;
}
.new-post-btn {
display: inline-block;
}
section.discussion {
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
margin-top: 20px;
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
.discussion-thread {
padding: 0.5em;
padding: 0.5em 0;
p {
margin-bottom: 0em;
}
.discussion-article {
border: 1px solid;
border: 1px solid #b2b2b2;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
min-height: 0;
padding: 1em;
padding: 10px 10px 40px;
.discussion-post {
@include clearfix;
header {
padding-bottom: 0.1em;
margin-bottom: 10px;
padding-bottom: 0;
margin-bottom: 15px;
h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 0px;
}
}
.post-body {
font-size: 14px;
clear: both;
}
}
.post-tools {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-radius: 0 0 3px 3px;
border-top: 1px solid #ddd;
@include linear-gradient(top, #f2f2f2, #e2e2e2);
a {
display: block;
width: 100%;
text-align: center;
font-size: 12px;
line-height: 30px;
&.expand-post:before {
content: '▾ ';
}
&.collapse-post:before {
content: '▴ ';
}
&.collapse-post {
display: none;
}
}
}
.responses {
margin-top: 10px;
header {
padding-bottom: 0em;
margin-bottom: 5px;
.posted-by {
font-size: 0.8em;
}
......@@ -1581,20 +1660,20 @@ body.discussion {
margin-bottom: 0.2em;
font-size: 14px;
}
}
.discussion-reply-new {
.wmd-input {
height: 120px;
}
}
// Content that is hidden by default in the inline view
.post-extended-content{
display: none;
}
.collapse-post{
display:none;
}
}
}
}
......@@ -1612,11 +1691,13 @@ body.discussion {
.new-post-form {
width: 100%;
margin-bottom: 20px;
padding: 30px;
border-radius: 3px;
background: rgba(0, 0, 0, .55);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5);
box-shadow: none;
@include clearfix;
@include box-sizing(border-box);
.form-row {
margin-bottom: 20px;
......@@ -1681,6 +1762,22 @@ body.discussion {
font-weight: 700;
}
.tagsinput {
padding: 10px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 3px;
background: #fff;
font-family: 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
span.tag {
margin-bottom: 0;
}
}
.submit {
@include blue-button;
float: left;
......@@ -1698,10 +1795,11 @@ body.discussion {
@include white-button;
float: left;
margin: 10px 0 0 15px;
border-color: #444;
}
.options {
margin-top: 40px;
margin-top: 5px;
label {
display: inline;
......@@ -1744,6 +1842,7 @@ body.discussion {
.new-post-btn {
@include blue-button;
display: inline-block;
font-size: 13px;
margin-right: 4px;
}
......@@ -1756,28 +1855,42 @@ body.discussion {
margin: 8px 7px 0 0;
background: url(../images/new-post-icon.png) no-repeat;
}
.moderator-actions {
padding-left: 0 !important;
}
section.pagination {
margin-top: 30px;
nav.discussion-paginator {
ol{
li{
float: right;
ol {
li {
list-style: none;
display: inline-block;
padding-right: 0.5em;
a {
@include white-button
@include white-button;
}
}
li.current-page{
height: 35px;
padding: 0 15px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
}
}
}
}
}
lms/static/sass/course.scss
......@@ -12,6 +12,7 @@
// Course base / layout styles
@import 'course/layout/courseware_header';
@import 'course/layout/footer';
@import 'course/base/mixins';
@import 'course/base/base';
@import 'course/base/extends';
@import 'module/module-styles.scss';
......
lms/static/sass/course/base/_base.scss
......@@ -39,11 +39,6 @@ a {
}
}
form {
label {
display: block;
......@@ -132,6 +127,9 @@ img {
}
}
.test-class {
border: 1px solid #f00;
}
.toast-notification {
......@@ -143,13 +141,16 @@ img {
padding: 15px 20px 17px;
border-radius: 3px;
border: 1px solid #333;
@include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
background-color: rgba(30, 30, 30, .92);
@include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
font-size: 13px;
color: #fff;
opacity: 0;
@include transition(all .2s);
-webkit-transition: all .2s;
p, span {
color: #fff;
}
.error-icon {
display: block;
......@@ -191,5 +192,4 @@ img {
margin-top: 10px;
text-align: center;
}
}
}
\ No newline at end of file
lms/static/sass/course/base/_mixins.scss
......@@ -35,4 +35,23 @@
&:hover {
@include linear-gradient(top, #fff, #ddd);
}
}
@mixin dark-grey-button {
display: block;
height: 35px;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #222;
background: -webkit-linear-gradient(top, #777, #555);
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
&:hover {
background: -webkit-linear-gradient(top, #888, #666);
}
}
\ No newline at end of file
lms/templates/discussion/mustache/_inline_discussion.mustache
......@@ -7,24 +7,22 @@
<div class="new-post-form-errors">
</div>
<form class="new-post-form">
<div class="right-column">
<div class="form-row">
<input type="text" class="new-post-title" name="title" placeholder="Title">
</div>
<div class="form-row">
<div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div>
<!---<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>-->
</div>
<div class="form-row">
<input type="text" class="new-post-tags" name="tags" placeholder="Tags">
</div>
<input type="submit" class="submit" value="Add post">
<a href="#" class="new-post-cancel">Cancel</a>
<div class="options">
<input type="checkbox" name="follow" class="discussion-follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<br>
<input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous"><label for="new-post-anonymous">post anonymously</label>
</div>
<div class="form-row">
<input type="text" class="new-post-title" name="title" placeholder="Title">
</div>
<div class="form-row">
<div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div>
<!---<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>-->
</div>
<div class="form-row">
<input type="text" class="new-post-tags" name="tags" placeholder="Tags">
</div>
<input type="submit" class="submit" value="Add post">
<a href="#" class="new-post-cancel">Cancel</a>
<div class="options">
<input type="checkbox" name="follow" class="discussion-follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<br>
<input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous"><label for="new-post-anonymous">post anonymously</label>
</div>
</form>
</div>
......
lms/templates/discussion/mustache/_inline_thread.mustache
......@@ -3,7 +3,7 @@
<div class="discussion-post local">
<header>
<a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote"><span class="plus-icon">+</span> <span class='votes-count-number'>{{votes.up_count}}</span></a>
<h1>{{title}}</h1>
<h3>{{title}}</h3>
<p class="posted-details">
<span class="timeago" title="{{created_at}}">{{created_at}}</span> by
<a href="{{user_url}}">{{username}}</a>
......@@ -11,12 +11,9 @@
&bull; This thread is closed.
</span>
</p>
<div class="local post-tools">
<a href="javascript:void(0)" class="expand-post">Expand<span class="ui-icon ui-icon-triangle-1-e" /></a>
<a href="javascript:void(0)" class="collapse-post">Collapse<span class="ui-icon ui-icon-triangle-1-s" /></a>
</div>
</header>
<div class="post-body">{{abbreviatedBody}}</div>
<ul class="moderator-actions post-extended-content">
<li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
<li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
......@@ -35,4 +32,9 @@
</div>
</form>
<div class="local post-tools">
<a href="javascript:void(0)" class="expand-post">View discussion</a>
<a href="javascript:void(0)" class="collapse-post">Hide discussion</a>
</div>
</article>
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