Skip to content

E
edx-platform
Commit d673895e by Tom Giannattasio
Options

added drag functionality

parent defa5b31
Showing with 137 additions and 57 deletions
lms/static/js/jquery.gradebook.js
/*
var $gradebook;
$(document).ready(function() {
console.log('gradebook');
});
*/
var Gradebook = function($element) { var Gradebook = function($element) {
var _this = this; var _this = this;
_this.$element = $element; var $element = $element;
_this.$grades = $element.find('.grade-table'); var $grades = $element.find('.grades');
_this.maxScroll = _this.$grades.width() - _this.$element.find('.grades').width(); var $gradeTable = $element.find('.grade-table');
_this.body = $('body'); var $leftShadow = $('<div class="left-shadow"></div>');
var $rightShadow = $('<div class="right-shadow"></div>');
_this.startDrag = function(e) { var tableHeight = $gradeTable.height();
_this.mouseOrigin = e.pageX; var maxScroll = $gradeTable.width() - $element.find('.grades').width();
_this.tableOrigin = _this.$grades.position().left; var $body = $('body');
_this.body.bind('mousemove', _this.moveDrag); var mouseOrigin;
_this.body.bind('mouseup', _this.stopDrag); var tableOrigin;
};
_this.moveDrag = function(e) { var startDrag = function(e) {
var offset = e.pageX - _this.mouseOrigin; mouseOrigin = e.pageX;
var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0); tableOrigin = $gradeTable.position().left;
$body.bind('mousemove', moveDrag);
$body.bind('mouseup', stopDrag);
};
console.log(offset); var moveDrag = function(e) {
var offset = e.pageX - mouseOrigin;
var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0);
_this.$grades.css({ $gradeTable.css({
'left': targetLeft + 'px' 'left': targetLeft + 'px'
}) });
setShadows(targetLeft);
}; };
_this.stopDrag = function(e) { var stopDrag = function(e) {
_this.body.unbind('mousemove', _this.moveDrag); $body.unbind('mousemove', moveDrag);
_this.body.unbind('mouseup', _this.stopDrag); $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 > max) return max;
if(val < min) return min; if(val < min) return min;
return val; 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
lms/static/sass/course/_gradebook.scss
$cell-border-color: #e1e1e1;
$table-border-color: #c8c8c8;
div.gradebook-wrapper { div.gradebook-wrapper {
@extend .table-wrapper; @extend .table-wrapper;
section.gradebook-content { section.gradebook-content {
@extend .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 { .student-table {
float: left; float: left;
width: 265px; width: 264px;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
color: #3c3c3c; color: #3c3c3c;
...@@ -15,20 +46,20 @@ div.gradebook-wrapper { ...@@ -15,20 +46,20 @@ div.gradebook-wrapper {
} }
tr:first-child td { tr:first-child td {
border-top: 1px solid #c8c8c8; border-top: 1px solid $table-border-color;
border-radius: 5px 0 0 0; border-radius: 5px 0 0 0;
} }
tr:last-child td { tr:last-child td {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid $table-border-color;
border-radius: 0 0 0 5px; border-radius: 0 0 0 5px;
} }
td { td {
height: 50px; height: 50px;
padding-left: 20px; padding-left: 20px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid $cell-border-color;
border-left: 1px solid #c8c8c8; border-left: 1px solid $table-border-color;
background: #f6f6f6; background: #f6f6f6;
font-size: 13px; font-size: 13px;
line-height: 50px; line-height: 50px;
...@@ -43,8 +74,26 @@ div.gradebook-wrapper { ...@@ -43,8 +74,26 @@ div.gradebook-wrapper {
position: relative; position: relative;
float: left; float: left;
width: 800px; width: 800px;
height: 712px;
overflow: hidden; 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 { .grade-table {
...@@ -64,35 +113,39 @@ div.gradebook-wrapper { ...@@ -64,35 +113,39 @@ div.gradebook-wrapper {
} }
thead th { thead th {
position: relative;
height: 50px; height: 50px;
background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2); background: -webkit-linear-gradient(top, $cell-border-color, #e2e2e2);
font-size: 10px; font-size: 10px;
line-height: 10px; line-height: 10px;
font-weight: bold; font-weight: bold;
text-align: center; 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: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
right: 0; left: 0;
top: 0; top: 0;
z-index: 9999; z-index: 9999;
width: 1px; width: 1px;
height: 50px; height: 100%;
background: #000; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
} }
&:first-child { &:first-child {
border-radius: 5px 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; box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
&:before {
display: hidden;
}
} }
&:last-child { &:last-child {
border-radius: 0 3px 0 0; 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 { .assignment {
...@@ -114,20 +167,25 @@ div.gradebook-wrapper { ...@@ -114,20 +167,25 @@ div.gradebook-wrapper {
} }
} }
tr {
border-right: 1px solid $table-border-color;
}
tr:first-child td { tr:first-child td {
border-top: 1px solid #c8c8c8; border-top: 1px solid $table-border-color;
} }
tr:last-child td { tr:last-child td {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid $table-border-color;
} }
td { td {
height: 50px; height: 50px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid $cell-border-color;
background: #f6f6f6; background: #f6f6f6;
font-size: 13px; font-size: 13px;
line-height: 50px; line-height: 50px;
border-left: 1px solid $cell-border-color;
} }
tr:nth-child(even) td { tr:nth-child(even) td {
......
lms/templates/gradebook.html
...@@ -20,6 +20,12 @@ ...@@ -20,6 +20,12 @@
.grade_None {color:LightGray;} .grade_None {color:LightGray;}
</style> </style>
<script type="text/javascript">
$(document).ready(function() {
var gradebook = new Gradebook($('.gradebook-content'));
});
</script>
</%block> </%block>
<%include file="course_navigation.html" args="active_page=''" /> <%include file="course_navigation.html" args="active_page=''" />
...@@ -32,7 +38,11 @@ ...@@ -32,7 +38,11 @@
<table class="student-table"> <table class="student-table">
<thead> <thead>
<tr> <tr>
<th><input type="search" /></th> <th>
<form class="student-search">
<input type="search" class="student-search-field" placeholder="Search students" />
</form>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -84,7 +94,7 @@ ...@@ -84,7 +94,7 @@
%for section in student['grade_summary']['section_breakdown']: %for section in student['grade_summary']['section_breakdown']:
${percent_data( section['percent'] )} ${percent_data( section['percent'] )}
%endfor %endfor
<th>${percent_data( student['grade_summary']['percent'])}</th> <td>${percent_data( student['grade_summary']['percent'])}</td>
</tr> </tr>
%endfor %endfor
</tbody> </tbody>
...@@ -97,8 +107,3 @@ ...@@ -97,8 +107,3 @@
</section> </section>
<script type="text/javascript">
$(document).ready(function() {
var gradebook = new Gradebook($('.gradebook-content'));
});
</script>
\ No newline at end of file
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