basic settings framework – wip
This commit is contained in:
Tom Giannattasio
@@ -1,39 +1,251 @@
|
||||
.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: 20px;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 30px;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
section {
|
||||
border-bottom: 1px solid $mediumGrey;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 40px;
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user