added sticky sidebar

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 = $('<div class="tooltip"></div>');
 	$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 = $('<style></style>');
 	$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);
+	$(window).bind('resize', updateSidebarDimensions);
-	updateSidebarWidth();
+	$(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 + ' <span class="drop-arrow">▾</span>');
-}
+}
+
+
+
+
+
+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; }');
+}
+
+
+
+
+
+

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;
+    float: left;
-    vertical-align: top;
+    @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;
+    float: left;
-    vertical-align: top;
+    @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;
+  }
 }
 
 

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;
+}
+
+
+
+

lms/templates/discussion/single_thread.html

@@ -184,8 +184,10 @@
       </div>
     </div>
     <ol class="responses">
+      <li class="loading"><div class="loading-animation"></div></li>
     </ol>
     <form class="discussion-reply-new">
+      <h4>Post a response:</h4>
       <ul class="discussion-errors"></ul>
       <div class="reply-body"></div>
       <div class="reply-post-control">