Skip to content

E
edx-platform
Commit ef4b2f04 by Tom Giannattasio
Options

basic settings framework – wip

parent d68945de
Showing with 396 additions and 44 deletions
cms/static/sass/_settings.scss
.settings {
.settings-overview {
@extend .window;
padding: 30px 40px;
@include clearfix;
display: table;
width: 100%;
.details {
margin-bottom: 20px;
font-size: 14px;
.sidebar {
display: table-cell;
float: none;
width: 20%;
padding: 30px 0 30px 20px;
border-radius: 3px 0 0 3px;
background: $lightGrey;
}
.row {
margin-bottom: 20px;
padding-bottom: 0;
border-bottom: none;
.main-column {
display: table-cell;
float: none;
width: 80%;
padding: 30px 40px 30px 60px;
}
label {
display: inline-block;
width: 200px;
font-size: 14px;
font-size: 15px;
font-weight: 400;
&.check-label {
display: inline;
margin-left: 10px;
}
&.cutoff {
float: left;
width: 90px;
line-height: 38px;
}
}
input {
font-size: 15px;
&.long {
width: 400px;
}
&.short {
width: 100px;
}
&.date {
width: 140px;
}
}
.settings-page-section {
> section {
display: none;
margin-bottom: 40px;
&.is-shown {
display: block;
}
.row {
margin-bottom: 20px;
padding: 0;
border-bottom: none;
&:last-child {
margin-bottom: 0;
}
}
&:last-child {
border-bottom: none;
}
> section {
padding-bottom: 40px;
margin-bottom: 40px;
border-radius: 3px;
border-bottom: 1px solid $mediumGrey;
@include clearfix;
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
}
}
.settings-page-menu {
a {
display: block;
padding-left: 20px;
line-height: 52px;
&.is-shown {
background: #fff;
border-radius: 5px 0 0 5px;
}
}
}
}
h2 {
margin-bottom: 30px;
font-size: 28px;
font-weight: 300;
color: $blue;
}
h3 {
margin-bottom: 20px;
font-size: 24px;
font-weight: 300;
font-size: 15px;
font-weight: 700;
line-height: 34px;
color: $blue;
}
section {
border-bottom: 1px solid $mediumGrey;
margin-bottom: 40px;
padding-bottom: 40px;
.grade-slider {
float: left;
width: 500px;
.grade-bar {
position: relative;
width: 100%;
height: 40px;
background: $lightGrey;
.increments {
position: relative;
li {
position: absolute;
top: 42px;
width: 30px;
margin-left: -15px;
font-size: 9px;
text-align: center;
&.increment-0 {
left: 0;
}
&.increment-10 {
left: 10%;
}
&.increment-20 {
left: 20%;
}
&.increment-30 {
left: 30%;
}
&.increment-40 {
left: 40%;
}
&.increment-50 {
left: 50%;
}
&.increment-60 {
left: 60%;
}
&.increment-70 {
left: 70%;
}
&.increment-80 {
left: 80%;
}
&.increment-90 {
left: 90%;
}
&.increment-100 {
left: 100%;
}
}
}
.grades {
position: relative;
li {
position: absolute;
top: 0;
height: 40px;
text-align: right;
color: rgba(0, 0, 0, .5);
&.bar-a {
background: #4fe696;
width: 100%;
}
&.bar-b {
background: #ffdf7e;
width: 80%;
}
&.bar-c {
background: #ef68a6;
width: 70%;
}
.letter-grade {
display: block;
margin: 6px 5px 0 0;
font-size: 14px;
font-weight: 700;
line-height: 14px;
}
.range {
display: block;
margin-right: 5px;
font-size: 10px;
line-height: 12px;
}
.drag-bar {
position: absolute;
top: 0;
right: -1px;
height: 40px;
width: 2px;
background-color: #fff;
cursor: ew-resize;
@include transition(none);
&:hover {
width: 4px;
right: -2px;
}
}
}
}
}
}
}
\ No newline at end of file
cms/templates/settings.html
......@@ -6,42 +6,181 @@
<%namespace name='static' file='static_content.html'/>
<%block name="jsextra">
<script type="text/javascript">
var $body;
var $gradeBar;
var $draggingBar;
var barOrigin;
var barWidth;
var gradeThresholds;
(function() {
$body = $('body');
$gradeBar = $('.grade-bar');
gradeThresholds = [100, 80, 70];
$('.settings-page-menu a').bind('click', showSettingsTab);
$('.drag-bar').bind('mousedown', startDragBar);
})();
function showSettingsTab(e) {
e.preventDefault();
$('.settings-page-section > section').hide();
$('.settings-' + $(this).attr('data-section')).show();
$('.settings-page-menu .is-shown').removeClass('is-shown');
$(e.target).addClass('is-shown');
}
function startDragBar(e) {
e.preventDefault();
barOrigin = $gradeBar.offset().left;
barWidth = $gradeBar.width();
$draggingBar = $(e.target).closest('li');
$body.bind('mousemove', moveBar);
$body.bind('mouseup', stopDragBar);
}
function moveBar(e) {
var percentage = (e.pageX - barOrigin) / barWidth * 100;
$draggingBar.css('width', percentage + '%');
gradeThresholds[$draggingBar.index()] = Math.round(percentage);
renderGradeRanges();
}
function stopDragBar(e) {
$body.unbind('mousemove', moveBar);
$body.unbind('mouseup', stopDragBar);
}
function renderGradeRanges() {
$('.range').each(function(i) {
var min = gradeThresholds[i + 1] || 0;
var max = gradeThresholds[i];
$(this).text(min + '–' + max);
});
}
</script>
</%block>
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="inner-wrapper">
<h1>Settings</h1>
<article class="settings-overview">
<section>
<h2>Details</h2>
<div class="row">
<label>Course Name:</label>
<input type="text" class="course-name-input">
</div>
<div class="row">
<label>Organization:</label>
<input type="text" class="course-organization-input">
</div>
<div class="row">
<label>Course Number:</label>
<input type="text" class="course-number-input">
</div>
</section>
<section>
<h2>Grading</h2>
<div class="row">
<label>Course Name:</label>
<input type="text" class="course-name-input">
</div>
</section>
<section>
<h2>Problems</h2>
<div class="row">
<input type="checkbox" id="randomize-problems"><label for="randomize-problems" class="check-label">Randomize Problems</label>
</div>
</section>
<div class="sidebar">
<nav class="settings-page-menu">
<ul>
<li><a href="#" class="is-shown" data-section="details">Course Details</a></li>
<li><a href="#" data-section="grading">Grading</a></li>
<li><a href="#" data-section="problems">Problems</a></li>
</ul>
</nav>
</div>
<div class="settings-page-section main-column">
<section class="settings-details">
<h2>Course Details</h2>
<div class="row">
<label>Course Name:</label>
<input type="text" class="course-name-input long">
</div>
<div class="row">
<label>Organization:</label>
<input type="text" class="course-organization-input long">
</div>
<div class="row">
<label>Course Number:</label>
<input type="text" class="course-number-input short">
</div>
<div class="row">
<label>Start Date:</label>
<input type="text" class="start-date-input date">
</div>
<div class="row">
<label>Enrollment End Date:</label>
<input type="text" class="start-date-input date">
</div>
</section>
<section class="is-shown 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>
</div>
</div>
</section>
<section>
<div class="row">
<label>Grace Period:</label>
<input type="text" class="grace-period">
</div>
</section>
<section>
<h3>Homework</h3>
<div class="row">
<label>Minimum Count:</label>
<input type="text" class="minimum-count-input short">
</div>
<div class="row">
<label>Drop Count:</label>
<input type="text" class="drop-count-input short">
</div>
<div class="row">
<label>Weight:</label>
<input type="text" class="weight-input short">
</div>
</section>
<section>
<h3>Lab</h3>
<div class="row">
<label>Minimum Count:</label>
<input type="text" class="minimum-count-input short">
</div>
<div class="row">
<label>Drop Count:</label>
<input type="text" class="drop-count-input short">
</div>
<div class="row">
<label>Weight:</label>
<input type="text" class="weight-input short">
</div>
</section>
</section>
<section class="settings-problems">
<h2>Problems</h2>
<div class="row">
<input type="checkbox" id="randomize-problems"><label for="randomize-problems" class="check-label">Randomize Problems</label>
</div>
</section>
</div>
</article>
</div>
</div>
......
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