Skip to content

E
edx-platform
Commit 2a1ddab2 by Greg Price
Options

Improve inline discussion UI 

1. Add space between threads
2. Change Show/Hide to Expand/Collapse and visually separate it
3. Limit a thread to 700px high and scroll if longer

Co-authored-by: marco <marcotuts@gmail.com>
parent 8708c37a
Showing with 148 additions and 161 deletions
common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee
...@@ -112,6 +112,10 @@ if Backbone? ...@@ -112,6 +112,10 @@ if Backbone?
@renderResponses() @renderResponses()
collapsePost: (event) -> collapsePost: (event) ->
curScroll = $(window).scrollTop()
postTop = @$el.offset().top
if postTop < curScroll
$('html, body').animate({scrollTop: postTop})
@expanded = false @expanded = false
@$el.removeClass('expanded') @$el.removeClass('expanded')
@$el.find('.post-body').html(@model.get('abbreviatedBody')) @$el.find('.post-body').html(@model.get('abbreviatedBody'))
......
lms/static/sass/_discussion.scss
// forums - main styling
// ====================
// mixins and extends
@mixin blue-button { @mixin blue-button {
display: block; display: block;
height: 35px; height: 35px;
...@@ -107,7 +111,9 @@ ...@@ -107,7 +111,9 @@
100% { opacity: 1.0; } 100% { opacity: 1.0; }
} }
// ===============
// main styling
body.discussion { body.discussion {
.new-post-form-errors { .new-post-form-errors {
...@@ -1412,7 +1418,7 @@ body.discussion { ...@@ -1412,7 +1418,7 @@ body.discussion {
.discussion-post { .discussion-post {
padding: $baseline*2 $baseline*2 $baseline $baseline*2; padding: $baseline*2 $baseline*2 $baseline $baseline*2;
box-shadow: 0 1px 3px $shadow; box-shadow: 0 2px 2px $shadow;
> header .vote-btn { > header .vote-btn {
position: relative; position: relative;
...@@ -1426,25 +1432,6 @@ body.discussion { ...@@ -1426,25 +1432,6 @@ body.discussion {
.post-tools { .post-tools {
@include clearfix; @include clearfix;
margin-top: 15px; margin-top: 15px;
.ui-icon {
display: inline;
float: left;
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;
}
}
} }
} }
...@@ -1888,18 +1875,7 @@ body.discussion { ...@@ -1888,18 +1875,7 @@ body.discussion {
} }
} }
.responses {
margin-top: $baseline*2;
> li {
padding: 26px 30px $baseline !important;
}
}
div.add-response.post-extended-content { div.add-response.post-extended-content {
margin-top: $baseline;
margin-bottom: 20px;
button.add-response-btn { button.add-response-btn {
@include white-button; @include white-button;
position: relative; position: relative;
...@@ -1957,9 +1933,9 @@ body.discussion { ...@@ -1957,9 +1933,9 @@ body.discussion {
margin-top: $baseline; margin-top: $baseline;
} }
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
.discussion-thread { .discussion-thread {
padding: 0; padding: 0;
margin-bottom: $baseline;
@include transition(all .25s linear 0s); @include transition(all .25s linear 0s);
.dogear { .dogear {
...@@ -1967,17 +1943,9 @@ body.discussion { ...@@ -1967,17 +1943,9 @@ body.discussion {
} }
&.expanded { &.expanded {
padding: $baseline 0;
.dogear{ .dogear{
display: block; display: block;
} }
.discussion-article {
border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
} }
p { p {
...@@ -1985,120 +1953,132 @@ body.discussion { ...@@ -1985,120 +1953,132 @@ body.discussion {
} }
.discussion-article { .discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-width: 0; border-radius: 3px;
background: $white;
min-height: 0; min-height: 0;
padding: $baseline/2 $baseline/2 15px $baseline/2; background: $white;
box-shadow: 0 1px 0 #ddd;
@include transition(all .2s linear 0s);
.discussion-post { .thread-wrapper {
padding: 12px 30px 0px; position: relative;
@include clearfix; overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
.inline-comment-count { .group-visibility-label {
position: relative; margin: $baseline ($baseline*1.5) ($baseline*-0.5);
z-index: 100;
float: right;
display: block;
height: 27px;
margin-top: 6px;
margin-right: 8px;
padding: 0 8px;
border-radius: 5px;
font-size: 12px;
font-weight: 400;
line-height: 25px;
color: #888;
} }
header { .discussion-post {
padding-bottom: 0; margin: $baseline 0 0;
margin-bottom: 15px; padding: 0 ($baseline*1.5) $baseline;
@include clearfix;
.inline-comment-count {
position: relative;
z-index: 100;
float: right;
display: block;
height: 27px;
margin-top: 6px;
margin-right: 8px;
padding: 0 8px;
border-radius: 5px;
font-size: 12px;
font-weight: 400;
line-height: 25px;
color: #888;
}
header {
padding-bottom: 0;
margin-bottom: 15px;
.posted-details { .posted-details {
margin-top: 4px; margin-top: 4px;
.username { .username {
display: inline; display: inline;
font-size: 14px; font-size: 14px;
font-weight: 700;
}
}
h3 {
font-size: 19px;
font-weight: 700; font-weight: 700;
margin-bottom: 0px;
}
h4 {
font-size: 16px;
} }
} }
h3 { .post-body {
font-size: 19px; font-size: 14px;
font-weight: 700; clear: both;
margin-bottom: 0px;
} }
}
.responses {
header {
padding-bottom: 0;
margin-bottom: 15px;
h4 { .posted-by {
font-size: 16px; float: left;
margin-right: 5px;
font-size: 16px;
}
}
.response-body {
margin-bottom: 0.2em;
font-size: 14px;
} }
} }
.post-body { .discussion-reply-new {
font-size: 14px; .wmd-input {
clear: both; height: 120px;
}
}
// Content that is hidden by default in the inline view
.post-extended-content{
display: none;
} }
} }
.post-tools { .post-tools {
margin-left: $baseline; box-shadow: 0 1px 1px $shadow inset;
margin-top: 5px; background: #f6f6f6;
&:hover {
background: #fcfcfc;
.icon {
color: $link-hover;
}
}
a { a {
display: block; display: block;
padding: ($baseline*0.25) $baseline;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
&.expand-post:before {
content: '▾ ';
}
&.collapse-post:before {
content: '▴ ';
}
&.collapse-post { &.collapse-post {
display: none; display: none;
} }
}
}
.responses { .icon {
margin-top: $baseline/2; color: $link-color;
margin-right: ($baseline*0.25);
header {
padding-bottom: 0;
margin-bottom: 15px;
.posted-by {
float: left;
margin-right: 5px;
font-size: 16px;
} }
} }
.response-body {
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;
}
} }
} }
} }
...@@ -2389,7 +2369,7 @@ body.discussion { ...@@ -2389,7 +2369,7 @@ body.discussion {
.wmd-button-row { .wmd-button-row {
// this is being hidden now because the inline styles to position the icons are not being written // this is being hidden now because the inline styles to position the icons are not being written
position: relative; position: relative;
height: 12px; height: 25px;
} }
.wmd-button { .wmd-button {
......
lms/templates/discussion/mustache/_inline_thread.mustache
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<article class="discussion-article" data-id="{{id}}"> <article class="discussion-article" data-id="{{id}}">
<div class="thread-content-wrapper"></div> <div class="thread-wrapper">
<div class="add-response post-extended-content"> <div class="thread-content-wrapper"></div>
<button class="button add-response-btn"> <div class="add-response post-extended-content">
<i class="icon icon-reply"></i> <button class="button add-response-btn">
<span class="add-response-btn-text">${_('Add A Response')}</span> <i class="icon icon-reply"></i>
</button> <span class="add-response-btn-text">${_('Add A Response')}</span>
</div> </button>
<ol class="responses post-extended-content">
<li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")}</span></div></li>
</ol>
<form class="local discussion-reply-new post-extended-content" data-id="{{id}}">
<h4>${_("Post a response:")}</h4>
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="{{id}}"></div>
<div class="reply-post-control">
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div> </div>
</form> <ol class="responses post-extended-content">
<li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")}</span></div></li>
</ol>
<form class="local discussion-reply-new post-extended-content" data-id="{{id}}">
<h4>${_("Post a response:")}</h4>
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="{{id}}"></div>
<div class="reply-post-control">
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div>
</form>
</div>
<div class="local post-tools"> <div class="local post-tools">
<a href="javascript:void(0)" class="expand-post">${_("View discussion")}</a> <a href="javascript:void(0)" class="expand-post"><span class="icon icon-plus"/> ${_("Expand discussion")}</a>
<a href="javascript:void(0)" class="collapse-post">${_("Hide discussion")}</a> <a href="javascript:void(0)" class="collapse-post"><span class="icon icon-minus"/> ${_("Collapse discussion")}</a>
</div> </div>
</article> </article>
lms/templates/discussion/mustache/_inline_thread_cohorted.mustache
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<article class="discussion-article" data-id="{{id}}"> <article class="discussion-article" data-id="{{id}}">
<div class="group-visibility-label">{{group_string}}</div> <div class="thread-wrapper">
<div class="group-visibility-label">{{group_string}}</div>
<div class="thread-content-wrapper"></div> <div class="thread-content-wrapper"></div>
<div class="add-response post-extended-content"> <div class="add-response post-extended-content">
<button class="button add-response-btn"> <button class="button add-response-btn">
<i class="icon icon-reply"></i> <i class="icon icon-reply"></i>
<span class="add-response-btn-text">${_('Add A Response')}</span> <span class="add-response-btn-text">${_('Add A Response')}</span>
</button> </button>
</div>
<ol class="responses post-extended-content">
<li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")}</span></div></li>
</ol>
<form class="local discussion-reply-new post-extended-content" data-id="{{id}}">
<h4>${_("Post a response:")}</h4>
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="{{id}}"></div>
<div class="reply-post-control">
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div> </div>
</form> <ol class="responses post-extended-content">
<li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")}</span></div></li>
</ol>
<form class="local discussion-reply-new post-extended-content" data-id="{{id}}">
<h4>${_("Post a response:")}</h4>
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="{{id}}"></div>
<div class="reply-post-control">
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div>
</form>
</div>
<div class="local post-tools"> <div class="local post-tools">
<a href="javascript:void(0)" class="expand-post">${_("View discussion")}</a> <a href="javascript:void(0)" class="expand-post"><span class="icon icon-plus"/> ${_("Expand discussion")}</a>
<a href="javascript:void(0)" class="collapse-post">${_("Hide discussion")}</a> <a href="javascript:void(0)" class="collapse-post"><span class="icon icon-minus"/> ${_("Collapse discussion")}</a>
</div> </div>
</article> </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