added fluid widths

lms/static/js/jquery.gradebook.js

@@ -9,7 +9,7 @@ var Gradebook = function($element) {
 	var $leftShadow = $('<div class="left-shadow"></div>');
 	var $rightShadow = $('<div class="right-shadow"></div>');
 	var tableHeight = $gradeTable.height();
-	var maxScroll = $gradeTable.width() - $element.find('.grades').width();
+	var maxScroll = $gradeTable.width() - $grades.width();
 	var $body = $('body');
 	var mouseOrigin;
 	var tableOrigin;
@@ -17,6 +17,7 @@ var Gradebook = function($element) {
 	var startDrag = function(e) {
 		mouseOrigin = e.pageX;
 		tableOrigin = $gradeTable.position().left;
+		$body.css('-webkit-user-select', 'none');
 		$body.bind('mousemove', moveDrag);
 		$body.bind('mouseup', stopDrag);
 	};
@@ -25,14 +26,13 @@ var Gradebook = function($element) {
 		var offset = e.pageX - mouseOrigin;
 		var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0);
 
-		$gradeTable.css({
-			'left': targetLeft + 'px'
-		});
+		updateHorizontalPosition(targetLeft);
 
 		setShadows(targetLeft);
 	};
 
 	var stopDrag = function(e) {
+		$body.css('-webkit-user-select', 'auto');
 		$body.unbind('mousemove', moveDrag);
 		$body.unbind('mouseup', stopDrag);
 	};
@@ -40,15 +40,11 @@ var Gradebook = function($element) {
 	var setShadows = function(left) {
 		var padding = 30;
 
-		if(left > -padding) {
-			var percent = -left / padding;
-			$leftShadow.css('opacity', percent);
-		}
-
-		if(left < -maxScroll + padding) {
-			var percent = (maxScroll + left) / padding;
-			$rightShadow.css('opacity', percent);
-		}
+		var leftPercent = clamp(-left / padding, 0, 1);
+		$leftShadow.css('opacity', leftPercent);
+	
+		var rightPercent = clamp((maxScroll + left) / padding, 0, 1);
+		$rightShadow.css('opacity', rightPercent);
 	};
 
 	var clamp = function(val, min, max) {
@@ -57,10 +53,24 @@ var Gradebook = function($element) {
 	    return val;
 	};
 
+	var updateWidths = function(e) {
+		maxScroll = $gradeTable.width() - $grades.width();
+		var targetLeft = clamp($gradeTable.position().left, -maxScroll, 0);
+		updateHorizontalPosition(targetLeft);
+		setShadows(targetLeft);
+	}
+
+	var updateHorizontalPosition = function(left) {
+		$gradeTable.css({
+			'left': left + 'px'
+		});
+	}
+
 	$leftShadow.css('height', tableHeight + 'px');
 	$rightShadow.css('height', tableHeight + 'px');
 	$grades.append($leftShadow).append($rightShadow);
 	setShadows(0);
 	$grades.css('height', tableHeight);
 	$gradeTable.bind('mousedown', startDrag);
+	$(window).bind('resize', updateWidths);
 }

lms/static/sass/course/_gradebook.scss

@@ -8,17 +8,17 @@ div.gradebook-wrapper {
     @extend .content;
 
     .student-search {
-    	padding: 0 15px;
+    	padding: 0 20px 0 15px;
     }
 
     .student-search-field {
-    	width: 230px;
+    	width: 100%;
     	height: 27px;
-    	padding: 0 15px;
+    	padding: 0 15px 0 35px;
     	box-sizing: border-box;
     	border-radius: 13px;
     	border: 1px solid $table-border-color;
-    	background: url(../images/search-icon.png) no-repeat 205px center #f6f6f6;
+    	background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
     	font-family: $sans-serif;
     	font-size: 11px;
     	@include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset);
@@ -37,7 +37,8 @@ div.gradebook-wrapper {
 
     .student-table {
 		float: left;
-		width: 264px;
+		// width: 264px;
+		width: 24%;
 		border-radius: 3px 0 0 3px;
 		color: #3c3c3c;
 
@@ -73,7 +74,7 @@ div.gradebook-wrapper {
 	.grades {
 		position: relative;
 		float: left;
-		width: 800px;
+		width: 76%;
 		overflow: hidden;
 
 		.left-shadow,
@@ -115,7 +116,7 @@ div.gradebook-wrapper {
 		thead th {
 			position: relative;
 			height: 50px;
-			background: -webkit-linear-gradient(top, $cell-border-color, #e2e2e2);
+			background: -webkit-linear-gradient(top, $cell-border-color, #ddd);
 			font-size: 10px;
 			line-height: 10px;
 			font-weight: bold;