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? ...@@ -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,16 +1953,25 @@ body.discussion { ...@@ -1985,16 +1953,25 @@ 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); .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 { .discussion-post {
padding: 12px 30px 0px; margin: $baseline 0 0;
padding: 0 ($baseline*1.5) $baseline;
@include clearfix; @include clearfix;
.inline-comment-count { .inline-comment-count {
...@@ -2044,32 +2021,7 @@ body.discussion { ...@@ -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 { .responses {
margin-top: $baseline/2;
header { header {
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 15px; margin-bottom: 15px;
...@@ -2097,8 +2049,36 @@ body.discussion { ...@@ -2097,8 +2049,36 @@ body.discussion {
.post-extended-content{ .post-extended-content{
display: none; 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 { ...@@ -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-wrapper">
<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">
...@@ -19,10 +20,11 @@ ...@@ -19,10 +20,11 @@
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a> <a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div> </div>
</form> </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">
...@@ -21,10 +21,11 @@ ...@@ -21,10 +21,11 @@
<a class="discussion-submit-post control-button" href="#">${_("Submit")}</a> <a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
</div> </div>
</form> </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