Skip to content

E
edx-platform
Commit da413f6d by Tom Giannattasio
Options

added sticky sidebar

parent 7ece39f3
Showing with 163 additions and 17 deletions
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>');
}
\ 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; }');
}
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;
}
}
......
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">
......
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