diff --git a/lms/static/images/search-icon.png b/lms/static/images/search-icon.png new file mode 100644 index 0000000000..22b0d2d3c2 Binary files /dev/null and b/lms/static/images/search-icon.png differ diff --git a/lms/static/js/jquery.gradebook.js b/lms/static/js/jquery.gradebook.js index 087cb01da7..f674a42976 100644 --- a/lms/static/js/jquery.gradebook.js +++ b/lms/static/js/jquery.gradebook.js @@ -1,49 +1,66 @@ -/* -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'); + var $element = $element; + var $grades = $element.find('.grades'); + var $gradeTable = $element.find('.grade-table'); + var $leftShadow = $('
'); + var $rightShadow = $('
'); + var tableHeight = $gradeTable.height(); + var maxScroll = $gradeTable.width() - $element.find('.grades').width(); + var $body = $('body'); + var mouseOrigin; + var tableOrigin; - _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); + var startDrag = function(e) { + mouseOrigin = e.pageX; + tableOrigin = $gradeTable.position().left; + $body.bind('mousemove', moveDrag); + $body.bind('mouseup', stopDrag); }; - _this.moveDrag = function(e) { - var offset = e.pageX - _this.mouseOrigin; - var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0); + var moveDrag = function(e) { + var offset = e.pageX - mouseOrigin; + var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0); - console.log(offset); - - _this.$grades.css({ + $gradeTable.css({ 'left': targetLeft + 'px' - }) + }); + + setShadows(targetLeft); }; - _this.stopDrag = function(e) { - _this.body.unbind('mousemove', _this.moveDrag); - _this.body.unbind('mouseup', _this.stopDrag); + var stopDrag = function(e) { + $body.unbind('mousemove', moveDrag); + $body.unbind('mouseup', stopDrag); }; - _this.clamp = function(val, min, max) { + 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 clamp = function(val, min, max) { if(val > max) return max; if(val < min) return min; return val; - } + }; - _this.$element.bind('mousedown', _this.startDrag); + $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); } \ No newline at end of file diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index 438af58e4a..e0f11bda83 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -1,12 +1,43 @@ +$cell-border-color: #e1e1e1; +$table-border-color: #c8c8c8; + div.gradebook-wrapper { @extend .table-wrapper; section.gradebook-content { @extend .content; + .student-search { + padding: 0 15px; + } + + .student-search-field { + width: 230px; + height: 27px; + padding: 0 15px; + box-sizing: border-box; + border-radius: 13px; + border: 1px solid $table-border-color; + background: url(../images/search-icon.png) no-repeat 205px center #f6f6f6; + font-family: $sans-serif; + font-size: 11px; + @include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset); + outline: none; + @include transition(border-color .15s); + + &::-webkit-input-placeholder, + &::-moz-input-placeholder { + font-style: italic; + } + + &:focus { + border-color: #1d9dd9; + } + } + .student-table { float: left; - width: 265px; + width: 264px; border-radius: 3px 0 0 3px; color: #3c3c3c; @@ -15,20 +46,20 @@ div.gradebook-wrapper { } tr:first-child td { - border-top: 1px solid #c8c8c8; + border-top: 1px solid $table-border-color; border-radius: 5px 0 0 0; } tr:last-child td { - border-bottom: 1px solid #c8c8c8; + border-bottom: 1px solid $table-border-color; border-radius: 0 0 0 5px; } td { height: 50px; padding-left: 20px; - border-bottom: 1px solid #e9e9e9; - border-left: 1px solid #c8c8c8; + border-bottom: 1px solid $cell-border-color; + border-left: 1px solid $table-border-color; background: #f6f6f6; font-size: 13px; line-height: 50px; @@ -43,8 +74,26 @@ div.gradebook-wrapper { position: relative; float: left; width: 800px; - height: 712px; overflow: hidden; + + .left-shadow, + .right-shadow { + position: absolute; + top: 0; + z-index: 9999; + width: 20px; + pointer-events: none; + } + + .left-shadow { + left: 0; + background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + } + + .right-shadow { + right: 0; + background: -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + } } .grade-table { @@ -64,35 +113,39 @@ div.gradebook-wrapper { } thead th { + position: relative; height: 50px; - background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2); + background: -webkit-linear-gradient(top, $cell-border-color, #e2e2e2); font-size: 10px; line-height: 10px; font-weight: bold; text-align: center; - box-shadow: 0 1px 0 #c8c8c8 inset, 0 2px 0 rgba(255, 255, 255, .7) inset; + box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset; - &:after { + &:before { content: ''; display: block; position: absolute; - right: 0; + left: 0; top: 0; z-index: 9999; width: 1px; - height: 50px; - background: #000; - + height: 100%; + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15)); } &:first-child { border-radius: 5px 0 0 0; - box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; + box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; + + &:before { + display: hidden; + } } &:last-child { border-radius: 0 3px 0 0; - box-shadow: -1px 1px 0 #c8c8c8 inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; + box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; } .assignment { @@ -114,20 +167,25 @@ div.gradebook-wrapper { } } + tr { + border-right: 1px solid $table-border-color; + } + tr:first-child td { - border-top: 1px solid #c8c8c8; + border-top: 1px solid $table-border-color; } tr:last-child td { - border-bottom: 1px solid #c8c8c8; + border-bottom: 1px solid $table-border-color; } td { height: 50px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid $cell-border-color; background: #f6f6f6; font-size: 13px; line-height: 50px; + border-left: 1px solid $cell-border-color; } tr:nth-child(even) td { diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html index 812141c44c..787fc23c9a 100644 --- a/lms/templates/gradebook.html +++ b/lms/templates/gradebook.html @@ -20,6 +20,12 @@ .grade_None {color:LightGray;} + + <%include file="course_navigation.html" args="active_page=''" /> @@ -32,7 +38,11 @@ - + @@ -84,7 +94,7 @@ %for section in student['grade_summary']['section_breakdown']: ${percent_data( section['percent'] )} %endfor - + %endfor @@ -97,8 +107,3 @@ - \ No newline at end of file
+
+ +
+
${percent_data( student['grade_summary']['percent'])}${percent_data( student['grade_summary']['percent'])}