basic gradebook template built; basic scroll functionality built

lms/static/js/jquery.gradebook.js

+/*
+var $gradebook;
+
+$(document).ready(function() {
+	console.log('gradebook');
+});
+*/
+
+
+
+
+var Gradebook = function($element) {
+	var _this = this;
+	_this.$element = $element;
+	_this.$grades = $element.find('.grade-table');
+	_this.maxScroll = _this.$grades.width() - _this.$element.find('.grades').width();
+	_this.body = $('body');
+
+	_this.startDrag = function(e) {
+		_this.mouseOrigin = e.pageX;
+		_this.tableOrigin = _this.$grades.position().left;
+		_this.body.bind('mousemove', _this.moveDrag);
+		_this.body.bind('mouseup', _this.stopDrag);
+	};
+
+	_this.moveDrag = function(e) {
+		var offset = e.pageX - _this.mouseOrigin;
+		var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0);
+
+		console.log(offset);
+
+		_this.$grades.css({
+			'left': targetLeft + 'px'
+		})
+	};
+
+	_this.stopDrag = function(e) {
+		_this.body.unbind('mousemove', _this.moveDrag);
+		_this.body.unbind('mouseup', _this.stopDrag);
+	};
+
+	_this.clamp = function(val, min, max) {
+	    if(val > max) return max;
+	    if(val < min) return min;
+	    return val;
+	}
+
+	_this.$element.bind('mousedown', _this.startDrag);
+}
\ No newline at end of file

lms/static/sass/course/_gradebook.scss

@@ -15,14 +15,20 @@ div.gradebook-wrapper {
 		}
 
 		tr:first-child td {
-			border-top-width: 1px;
+			border-top: 1px solid #c8c8c8;
+			border-radius: 5px 0 0 0;
+		}
+
+		tr:last-child td {
+			border-bottom: 1px solid #c8c8c8;
+			border-radius: 0 0 0 5px;
 		}
 
 		td {
 			height: 50px;
 			padding-left: 20px;
-			border: 1px solid #e9e9e9;
-			border-width: 0 1px 1px 1px;
+			border-bottom: 1px solid #e9e9e9;
+			border-left: 1px solid #c8c8c8;
 			background: #f6f6f6;
 			font-size: 13px;
 			line-height: 50px;
@@ -47,7 +53,7 @@ div.gradebook-wrapper {
 		left: 0;
 		width: 1000px;
 		cursor: move;
-		-webkit-transition: left .7s ease-in-out;
+		-webkit-transition: none;
 		-webkit-user-select: none;
 		user-select: none;
 
@@ -68,17 +74,19 @@ div.gradebook-wrapper {
 
 			&:after {
 				content: '';
+				display: block;
 				position: absolute;
 				right: 0;
 				top: 0;
 				z-index: 9999;
 				width: 1px;
 				height: 50px;
-				@includ linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+				background: #000;
+				
 			}
 
 			&:first-child {
-				border-radius: 3px 0 0 0;
+				border-radius: 5px 0 0 0;
 				box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
 			}
 
@@ -107,7 +115,11 @@ div.gradebook-wrapper {
 		}
 
 		tr:first-child td {
-			border-top: 1px solid #e9e9e9;
+			border-top: 1px solid #c8c8c8;
+		}
+
+		tr:last-child td {
+			border-bottom: 1px solid #c8c8c8;
 		}
 
 		td {

lms/templates/gradebook.html

@@ -6,7 +6,7 @@
   <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.stack.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/jquery.gradebook.js')}"></script>
 </%block>
 
 <%block name="headextra">
@@ -95,3 +95,10 @@
   </section>
 </div>
 </section>
+
+
+<script type="text/javascript">
+  $(document).ready(function() {
+    var gradebook = new Gradebook($('.gradebook-content'));
+  });
+</script>
\ No newline at end of file