Skip to content

E
edx-platform
Commit a6d5edce by Tom Giannattasio
Options

polished grade range slider

parent ef4b2f04
Showing with 128 additions and 56 deletions
cms/static/sass/_settings.scss
......@@ -32,10 +32,8 @@
margin-left: 10px;
}
&.cutoff {
float: left;
width: 90px;
line-height: 38px;
&.ranges {
margin-bottom: 20px;
}
}
......@@ -115,16 +113,43 @@
}
h3 {
margin-bottom: 20px;
margin-bottom: 30px;
font-size: 15px;
font-weight: 700;
line-height: 34px;
color: $blue;
}
.grade-controls {
@include clearfix;
}
.new-grade-button {
position: relative;
float: left;
display: block;
width: 29px;
height: 29px;
margin: 4px 10px 0 0;
border-radius: 20px;
border: 1px solid $darkGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #6d788b;
.plus-icon {
position: absolute;
top: 50%;
left: 50%;
margin-left: -6px;
margin-top: -6px;
}
}
.grade-slider {
float: left;
width: 500px;
width: 560px;
height: 60px;
.grade-bar {
position: relative;
......@@ -197,26 +222,46 @@
top: 0;
height: 40px;
text-align: right;
color: rgba(0, 0, 0, .5);
&.bar-a {
&:hover,
&.is-dragging {
.remove-button {
display: block;
}
}
.remove-button {
display: none;
position: absolute;
top: -17px;
right: 1px;
height: 17px;
font-size: 10px;
}
&:nth-child(1) {
background: #4fe696;
width: 100%;
}
&.bar-b {
&:nth-child(2) {
background: #ffdf7e;
width: 80%;
}
&.bar-c {
background: #ef68a6;
width: 70%;
&:nth-child(3) {
background: #ffb657;
}
&:nth-child(4) {
background: #fb336c;
}
&:nth-child(5) {
background: #ef54a1;
}
.letter-grade {
display: block;
margin: 6px 5px 0 0;
margin: 7px 5px 0 0;
font-size: 14px;
font-weight: 700;
line-height: 14px;
......@@ -225,7 +270,7 @@
.range {
display: block;
margin-right: 5px;
font-size: 10px;
font-size: 9px;
line-height: 12px;
}
......
cms/templates/settings.html
......@@ -13,15 +13,31 @@
var barOrigin;
var barWidth;
var gradeThresholds;
var GRADES = ['A', 'B', 'C', 'D', 'E'];
(function() {
$body = $('body');
$gradeBar = $('.grade-bar');
gradeThresholds = [100, 80, 70];
$('.settings-page-menu a').bind('click', showSettingsTab);
$('.drag-bar').bind('mousedown', startDragBar);
$body.on('mousedown', '.drag-bar', startDragBar);
$('.new-grade-button').bind('click', addNewGrade);
$body.on('click', '.remove-button', removeGrade);
})();
function addNewGrade(e) {
e.preventDefault();
var $newGradeBar = $('<li style="width: 10%;"><span class="letter-grade" contenteditable>' + GRADES[$('.grades li').length] + '</span><span class="range"></span><a href="#" class="drag-bar"></a><a href="#" class="remove-button">remove</a></li>');
$('.grades').append($newGradeBar);
}
function removeGrade(e) {
e.preventDefault();
var index = $(this).closest('li').index();
gradeThresholds.splice(index, 1);
$(this).closest('li').remove();
}
function showSettingsTab(e) {
e.preventDefault();
$('.settings-page-section > section').hide();
......@@ -34,28 +50,33 @@
e.preventDefault();
barOrigin = $gradeBar.offset().left;
barWidth = $gradeBar.width();
$draggingBar = $(e.target).closest('li');
$draggingBar = $(e.target).closest('li').addClass('is-dragging');
$body.bind('mousemove', moveBar);
$body.bind('mouseup', stopDragBar);
}
function moveBar(e) {
var percentage = (e.pageX - barOrigin) / barWidth * 100;
var barIndex = $draggingBar.index();
console.log(barIndex);
var min = gradeThresholds[barIndex + 1] || 0;
var max = gradeThresholds[barIndex - 1] || 100;
var percentage = Math.min(Math.max((e.pageX - barOrigin) / barWidth * 100, min), max);
$draggingBar.css('width', percentage + '%');
gradeThresholds[$draggingBar.index()] = Math.round(percentage);
renderGradeRanges();
}
function stopDragBar(e) {
$draggingBar.removeClass('is-dragging');
$body.unbind('mousemove', moveBar);
$body.unbind('mouseup', stopDragBar);
}
function renderGradeRanges() {
$('.range').each(function(i) {
var min = gradeThresholds[i + 1] || 0;
var min = gradeThresholds[i + 1] + 1 || 0;
var max = gradeThresholds[i];
$(this).text(min + '–' + max);
$(this).text(min + '-' + max);
});
}
</script>
......@@ -76,7 +97,7 @@
</nav>
</div>
<div class="settings-page-section main-column">
<section class="settings-details">
<section class="is-shown settings-details">
<h2>Course Details</h2>
<div class="row">
<label>Course Name:</label>
......@@ -99,41 +120,47 @@
<input type="text" class="start-date-input date">
</div>
</section>
<section class="is-shown settings-grading">
<section class="settings-grading">
<h2>Grading</h2>
<section>
<label class="cutoff">Cutoffs:</label>
<div class="grade-slider">
<div class="grade-bar">
<ol class="increments">
<li class="increment-0">0</li>
<li class="increment-10">10</li>
<li class="increment-20">20</li>
<li class="increment-30">30</li>
<li class="increment-40">40</li>
<li class="increment-50">50</li>
<li class="increment-60">60</li>
<li class="increment-70">70</li>
<li class="increment-80">80</li>
<li class="increment-90">90</li>
<li class="increment-100">100</li>
</ol>
<ol class="grades">
<li class="bar-a">
<span class="letter-grade">A</span>
<span class="range">80–100</span>
</li>
<li class="bar-b">
<span class="letter-grade">B</span>
<span class="range">70–80</span>
<a href="#" class="drag-bar"></a>
</li>
<li class="bar-c">
<span class="letter-grade">C</span>
<span class="range">0–70</span>
<a href="#" class="drag-bar"></a>
</li>
</ol>
<label class="ranges">Grade Ranges:</label>
<div class="grade-controls">
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
<div class="grade-slider">
<div class="grade-bar">
<ol class="increments">
<li class="increment-0">0</li>
<li class="increment-10">10</li>
<li class="increment-20">20</li>
<li class="increment-30">30</li>
<li class="increment-40">40</li>
<li class="increment-50">50</li>
<li class="increment-60">60</li>
<li class="increment-70">70</li>
<li class="increment-80">80</li>
<li class="increment-90">90</li>
<li class="increment-100">100</li>
</ol>
<ol class="grades">
<li class="bar-a" style="width: 100%;">
<span class="letter-grade" contenteditable>A</span>
<span class="range">81-100</span>
<a href="#" class="remove-button">remove</a>
</li>
<li class="bar-b" style="width: 80%;">
<span class="letter-grade" contenteditable>B</span>
<span class="range">71-80</span>
<a href="#" class="drag-bar"></a>
<a href="#" class="remove-button">remove</a>
</li>
<li class="bar-c" style="width: 70%;">
<span class="letter-grade" contenteditable>C</span>
<span class="range">0-70</span>
<a href="#" class="drag-bar"></a>
<a href="#" class="remove-button">remove</a>
</li>
</ol>
</div>
</div>
</div>
</section>
......
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