diff --git a/lms/static/js/discussions-temp.js b/lms/static/js/discussions-temp.js
index ef85df9152..78add011cf 100644
--- a/lms/static/js/discussions-temp.js
+++ b/lms/static/js/discussions-temp.js
@@ -11,9 +11,15 @@ var $sidebar;
var $sidebarWidthStyles;
var $formTopicDropBtn;
var $formTopicDropMenu;
+var $postListWrapper;
var sidebarWidth;
+var sidebarHeight;
+var sidebarHeaderHeight;
+var sidebarXOffset;
+var scrollTop;
var tooltipTimer;
var tooltipCoords;
+var SIDEBAR_PADDING = -1;
$(document).ready(function() {
@@ -26,12 +32,15 @@ $(document).ready(function() {
$tooltip = $('');
$newPost = $('.new-post-article');
$sidebar = $('.sidebar');
+ $postListWrapper = $('.post-list-wrapper');
$formTopicDropBtn = $('.new-post-article .topic-drop-btn');
$formTopicDropMenu = $('.new-post-article .topic-drop-menu');
$sidebarWidthStyles = $('');
$body.append($sidebarWidthStyles);
sidebarWidth = $('.sidebar').width();
+ sidebarHeaderHeight = $sidebar.find('.browse-search').height() + $sidebar.find('.sort-bar').height();
+ sidebarXOffset = $sidebar.offset().top;
$browse.bind('click', showTopicDrop);
$search.bind('click', showSearch);
@@ -48,8 +57,10 @@ $(document).ready(function() {
'click': hideTooltip
});
- $(window).bind('resize', updateSidebarWidth);
- updateSidebarWidth();
+ $(window).bind('resize', updateSidebarDimensions);
+ $(window).bind('scroll', updateSidebarCoordinates);
+ updateSidebarCoordinates();
+ updateSidebarDimensions();
});
function showTooltip(e) {
@@ -149,13 +160,6 @@ function setTopic(e) {
showBrowse();
}
-function updateSidebarWidth(e) {
- sidebarWidth = $sidebar.width();
- var titleWidth = sidebarWidth - 115;
- console.log(titleWidth);
- $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
-}
-
function newPost(e) {
$newPost.slideDown(300);
}
@@ -194,4 +198,40 @@ function setFormTopic(e) {
boardName = $(this).siblings('a').html() + ' / ' + boardName;
});
$formTopicDropBtn.html(boardName + ' ▾');
-}
\ No newline at end of file
+}
+
+
+
+
+
+function updateSidebarCoordinates(e) {
+ scrollTop = $(window).scrollTop();
+
+ var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
+
+ var discussionColumnHeight = $('.discussion-column').height();
+ marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop;
+
+ $sidebar.css('margin-top', marginTop);
+ updateSidebarDimensions();
+}
+
+function updateSidebarDimensions(e) {
+ sidebarWidth = $sidebar.width();
+
+ var visibleHeader = sidebarXOffset - scrollTop > 0 ? sidebarXOffset - scrollTop : 0;
+ sidebarHeight = $(window).height() - (visibleHeader + SIDEBAR_PADDING * 2);
+ sidebarHeight = sidebarHeight > 500 ? sidebarHeight : 500;
+
+ var titleWidth = sidebarWidth - 115;
+
+ $sidebar.css('height', sidebarHeight + 'px');
+ $postListWrapper.css('height', (sidebarHeight - sidebarHeaderHeight - 4) + 'px');
+ $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
+}
+
+
+
+
+
+
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 388d42f88c..0235a3a95c 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -9,7 +9,7 @@
font-weight: 700;
line-height: 32px;
color: #fff;
- text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
+ text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
&:hover {
@@ -39,6 +39,15 @@
+@-webkit-keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+
+
+
+
body.discussion {
.course-tabs .right {
@@ -46,6 +55,7 @@ body.discussion {
.new-post-btn {
@include blue-button;
+ font-size: 13px;
margin-right: 4px;
}
@@ -259,13 +269,30 @@ body.discussion {
}
}
-.discussion-body {
+
+
+
+
+
+
+
+
+.container .discussion-body {
+ display: block;
line-height: 1.4;
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ @include clearfix;
.sidebar {
- display: table-cell;
- vertical-align: top;
+ float: left;
+ @include box-sizing(border-box);
width: 32%;
+ height: 550px;
+ border: 1px solid #aaa;
+ border-right: none !important;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
background: #f6f6f6;
border-radius: 3px 0 0 3px;
border-right: 1px solid #bcbcbc;
@@ -555,6 +582,7 @@ body.discussion {
.post-list-wrapper {
overflow-y: scroll;
+ border-right: 1px solid transparent;
}
.post-list {
@@ -692,8 +720,12 @@ body.discussion {
.discussion-column {
- display: table-cell;
- vertical-align: top;
+ float: left;
+ @include box-sizing(border-box);
+ border: 1px solid #aaa;
+ border-radius: 0 3px 3px 0;
+ background: #fff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
width: 68%;
}
@@ -710,6 +742,7 @@ body.discussion {
}
.posted-details {
+ margin-left: 8px;
font-size: 12px;
font-style: italic;
color: #888;
@@ -760,6 +793,7 @@ body.discussion {
border-radius: 3px;
border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+ @include animation(fadeIn .3s);
&.staff {
padding-top: 38px;
@@ -781,6 +815,11 @@ body.discussion {
color: #fff;
text-transform: uppercase;
}
+
+ &.loading {
+ border: none;
+ box-shadow: none;
+ }
}
.posted-by {
@@ -1026,6 +1065,61 @@ body.discussion {
margin-left: 4px;
}
}
+
+
+
+
+
+ .discussion-reply-new {
+ padding: 20px;
+ @include clearfix;
+
+ h4 {
+ font-size: 20px;
+ font-weight: 700;
+ }
+ }
+
+ #wmd-button-bar {
+ border: none;
+ }
+
+ #wmd-input {
+ width: 100%;
+ height: 240px;
+ margin-top: 0;
+ padding: 10px;
+ box-sizing: border-box;
+ border: 1px solid #aaa;
+ border-radius: 3px 3px 0 0;
+ background: #fff;
+ font-family: 'Monaco', monospace;
+ font-size: 13px;
+ line-height: 1.6;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+ }
+
+ #wmd-preview {
+ width: 100%;
+ min-height: 40px;
+ padding: 10px;
+ box-sizing: border-box;
+ border: 1px solid #aaa;
+ border-top: none;
+ border-radius: 0 0 3px 3px;
+ background: #eee;
+ color: #333;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+ }
+
+ .reply-post-control {
+ margin-top: 20px;
+ }
+
+ .discussion-submit-post {
+ @include blue-button;
+ float: left;
+ }
}
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index ee46c08361..b971e3a654 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -135,3 +135,14 @@ span.edx {
margin-top: 20px;
}
}
+
+.loading-animation {
+ width: 20px;
+ height: 20px;
+ margin: auto;
+ background: url(../images/spinner.gif) no-repeat;
+}
+
+
+
+
diff --git a/lms/templates/discussion/single_thread.html b/lms/templates/discussion/single_thread.html
index aa67fabcb3..2365b893f5 100644
--- a/lms/templates/discussion/single_thread.html
+++ b/lms/templates/discussion/single_thread.html
@@ -184,8 +184,10 @@
+