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 65 additions and 78 deletions
common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee
......@@ -112,6 +112,10 @@ if Backbone?
@renderResponses()
collapsePost: (event) ->
curScroll = $(window).scrollTop()
postTop = @$el.offset().top
if postTop < curScroll
$('html, body').animate({scrollTop: postTop})
@expanded = false
@$el.removeClass('expanded')
@$el.find('.post-body').html(@model.get('abbreviatedBody'))
......
lms/static/sass/_discussion.scss
// forums - main styling
// ====================
// mixins and extends
@mixin blue-button {
display: block;
height: 35px;
......@@ -107,7 +111,9 @@
100% { opacity: 1.0; }
}
// ===============
// main styling
body.discussion {
.new-post-form-errors {
......@@ -1412,7 +1418,7 @@ body.discussion {
.discussion-post {
padding: $baseline*2 $baseline*2 $baseline $baseline*2;
box-shadow: 0 1px 3px $shadow;
box-shadow: 0 2px 2px $shadow;
> header .vote-btn {
position: relative;
......@@ -1426,25 +1432,6 @@ body.discussion {
.post-tools {
@include clearfix;
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 {
}
}
.responses {
margin-top: $baseline*2;
> li {
padding: 26px 30px $baseline !important;
}
}
div.add-response.post-extended-content {
margin-top: $baseline;
margin-bottom: 20px;
button.add-response-btn {
@include white-button;
position: relative;
......@@ -1957,9 +1933,9 @@ body.discussion {
margin-top: $baseline;
}
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
.discussion-thread {
padding: 0;
margin-bottom: $baseline;
@include transition(all .25s linear 0s);
.dogear {
......@@ -1967,17 +1943,9 @@ body.discussion {
}
&.expanded {
padding: $baseline 0;
.dogear{
display: block;
}
.discussion-article {
border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
}
p {
......@@ -1985,16 +1953,25 @@ body.discussion {
}
.discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid #ddd;
border-bottom-width: 0;
background: $white;
border-radius: 3px;
min-height: 0;
padding: $baseline/2 $baseline/2 15px $baseline/2;
box-shadow: 0 1px 0 #ddd;
@include transition(all .2s linear 0s);
background: $white;
.thread-wrapper {
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
.group-visibility-label {
margin: $baseline ($baseline*1.5) ($baseline*-0.5);
}
.discussion-post {
padding: 12px 30px 0px;
margin: $baseline 0 0;
padding: 0 ($baseline*1.5) $baseline;
@include clearfix;
.inline-comment-count {
......@@ -2044,32 +2021,7 @@ body.discussion {
}
}
.post-tools {
margin-left: $baseline;
margin-top: 5px;
a {
display: block;
font-size: 12px;
line-height: 30px;
&.expand-post:before {
content: '▾ ';
}
&.collapse-post:before {
content: '▴ ';
}
&.collapse-post {
display: none;
}
}
}
.responses {
margin-top: $baseline/2;
header {
padding-bottom: 0;
margin-bottom: 15px;
......@@ -2097,8 +2049,36 @@ body.discussion {
.post-extended-content{
display: none;
}
}
.post-tools {
box-shadow: 0 1px 1px $shadow inset;
background: #f6f6f6;
&:hover {
background: #fcfcfc;
.icon {
color: $link-hover;
}
}
a {
display: block;
padding: ($baseline*0.25) $baseline;
font-size: 12px;
line-height: 30px;
&.collapse-post {
display: none;
}
.icon {
color: $link-color;
margin-right: ($baseline*0.25);
}
}
}
}
}
}
......@@ -2389,7 +2369,7 @@ body.discussion {
.wmd-button-row {
// this is being hidden now because the inline styles to position the icons are not being written
position: relative;
height: 12px;
height: 25px;
}
.wmd-button {
......
lms/templates/discussion/mustache/_inline_thread.mustache
<%! from django.utils.translation import ugettext as _ %>
<article class="discussion-article" data-id="{{id}}">
<div class="thread-wrapper">
<div class="thread-content-wrapper"></div>
<div class="add-response post-extended-content">
<button class="button add-response-btn">
......@@ -19,10 +20,11 @@
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div>
</form>
</div>
<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>
<a href="javascript:void(0)" class="expand-post"><span class="icon icon-plus"/> ${_("Expand discussion")}</a>
<a href="javascript:void(0)" class="collapse-post"><span class="icon icon-minus"/> ${_("Collapse discussion")}</a>
</div>
</article>
lms/templates/discussion/mustache/_inline_thread_cohorted.mustache
<%! from django.utils.translation import ugettext as _ %>
<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="add-response post-extended-content">
<button class="button add-response-btn">
......@@ -21,10 +21,11 @@
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div>
</form>
</div>
<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>
<a href="javascript:void(0)" class="expand-post"><span class="icon icon-plus"/> ${_("Expand discussion")}</a>
<a href="javascript:void(0)" class="collapse-post"><span class="icon icon-minus"/> ${_("Collapse 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