Skip to content

E
edx-platform
Commit a6d5edce by Tom Giannattasio
Options

polished grade range slider

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