Skip to content

E
edx-platform
Commit 74dec7f1 by Brian Talbot
Options

settings - wip

parent 6014a7a2
Showing with 266 additions and 156 deletions
cms/static/sass/_settings.scss
......@@ -522,185 +522,185 @@
// h3 {
// margin-bottom: 30px;
// font-size: 15px;
// font-weight: 700;
// color: $blue;
// }
h3 {
margin-bottom: 30px;
font-size: 15px;
font-weight: 700;
color: $blue;
}
// .grade-controls {
// @include clearfix;
// }
.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;
// }
// }
.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: 560px;
// height: 60px;
// .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;
// }
.grade-slider {
float: left;
width: 560px;
height: 60px;
// &.increment-10 {
// left: 10%;
// }
.grade-bar {
position: relative;
width: 100%;
height: 40px;
background: $lightGrey;
// &.increment-20 {
// left: 20%;
// }
.increments {
position: relative;
// &.increment-30 {
// left: 30%;
// }
li {
position: absolute;
top: 42px;
width: 30px;
margin-left: -15px;
font-size: 9px;
text-align: center;
// &.increment-40 {
// left: 40%;
// }
&.increment-0 {
left: 0;
}
// &.increment-50 {
// left: 50%;
// }
&.increment-10 {
left: 10%;
}
// &.increment-60 {
// left: 60%;
// }
&.increment-20 {
left: 20%;
}
// &.increment-70 {
// left: 70%;
// }
&.increment-30 {
left: 30%;
}
// &.increment-80 {
// left: 80%;
// }
&.increment-40 {
left: 40%;
}
// &.increment-90 {
// left: 90%;
// }
&.increment-50 {
left: 50%;
}
// &.increment-100 {
// left: 100%;
// }
// }
// }
&.increment-60 {
left: 60%;
}
// .grades {
// position: relative;
&.increment-70 {
left: 70%;
}
// li {
// position: absolute;
// top: 0;
// height: 40px;
// text-align: right;
&.increment-80 {
left: 80%;
}
// &:hover,
// &.is-dragging {
// .remove-button {
// display: block;
// }
// }
&.increment-90 {
left: 90%;
}
// .remove-button {
// display: none;
// position: absolute;
// top: -17px;
// right: 1px;
// height: 17px;
// font-size: 10px;
// }
&.increment-100 {
left: 100%;
}
}
}
// &:nth-child(1) {
// background: #4fe696;
// }
.grades {
position: relative;
// &:nth-child(2) {
// background: #ffdf7e;
// }
li {
position: absolute;
top: 0;
height: 40px;
text-align: right;
// &:nth-child(3) {
// background: #ffb657;
// }
&:hover,
&.is-dragging {
.remove-button {
display: block;
}
}
// &:nth-child(4) {
// background: #fb336c;
// }
.remove-button {
display: none;
position: absolute;
top: -17px;
right: 1px;
height: 17px;
font-size: 10px;
}
// &:nth-child(5) {
// background: #ef54a1;
// }
&:nth-child(1) {
background: #4fe696;
}
// .letter-grade {
// display: block;
// margin: 7px 5px 0 0;
// font-size: 14px;
// font-weight: 700;
// line-height: 14px;
// }
&:nth-child(2) {
background: #ffdf7e;
}
// .range {
// display: block;
// margin-right: 5px;
// font-size: 9px;
// line-height: 12px;
// }
&:nth-child(3) {
background: #ffb657;
}
// .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;
// }
// }
// }
// }
// }
// }
&:nth-child(4) {
background: #fb336c;
}
&:nth-child(5) {
background: #ef54a1;
}
.letter-grade {
display: block;
margin: 7px 5px 0 0;
font-size: 14px;
font-weight: 700;
line-height: 14px;
}
.range {
display: block;
margin-right: 5px;
font-size: 9px;
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
......@@ -445,6 +445,7 @@
<span class="detail">Individuals instructing and help with this course</span>
</header>
<div class="row">
<div class="field enum">
<ul class="input-list course-faculty-list">
<li class="input input-existing multi course-faculty-list-item">
......@@ -548,6 +549,7 @@
<span class="plus-icon"></span>New Faculty Member
</a>
</div>
</div>
</section>
</section><!-- .settings-staff -->
......@@ -555,6 +557,113 @@
<section class="settings-grading">
<h2 class="title">Grading</h2>
<section class="settings-grading-ranges">
<header>
<h3>Overall Grade Range</h3>
<span class="detail">Course grade ranges and their values</span>
</header>
<div class="row">
<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>
</div>
</section>
<section class="settings-grading-assignments">
<header>
<h3>Assignments</h3>
<span class="detail">Course grade ranges and their values</span>
</header>
</section>
<section class="settings-grading-assignments">
<header>
<h3>Assignments</h3>
<span class="detail">Course grade ranges and their values</span>
</header>
</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><!-- .settings-grading -->
<section class="settings-problems">
......
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