added sticky sidebar

2012-08-30 16:37:22 -04:00
parent 7ece39f345
commit da413f6de8
4 changed files with 163 additions and 16 deletions
--- 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 = $('<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);
-	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 + ' <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; }');
+}
+
+
+
+
+
+
--- 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;
+  }
 }


--- 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;
+}
+
+
+
+
--- a/lms/templates/discussion/single_thread.html
+++ b/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">