Commit 210086fe by Brian Talbot

studio - settings: grading revamp WIP

parent 1b679750
...@@ -535,6 +535,10 @@ hr.divide { ...@@ -535,6 +535,10 @@ hr.divide {
@include text-sr(); @include text-sr();
} }
.fake-link {
cursor: pointer;
}
.non-list { .non-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
......
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="title">Grading</%block> <%block name="title">Grading</%block>
<%block name="bodyclass">is-signedin course settings</%block> <%block name="bodyclass">is-signedin course grading settings</%block>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%! <%!
from contentstore import utils from contentstore import utils
%> %>
<%block name="jsextra"> <%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script> <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
...@@ -23,6 +21,17 @@ from contentstore import utils ...@@ -23,6 +21,17 @@ from contentstore import utils
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
});
var editor = new CMS.Views.Settings.Details({
el: $('.settings-details'),
model: new CMS.Models.Settings.CourseDetails(${course_details|n},{parse:true})
});
var editor = new CMS.Views.Settings.Grading({ var editor = new CMS.Views.Settings.Grading({
el: $('.settings-grading'), el: $('.settings-grading'),
model : new CMS.Models.Settings.CourseGradingPolicy(${course_details|n},{parse:true}) model : new CMS.Models.Settings.CourseGradingPolicy(${course_details|n},{parse:true})
...@@ -35,24 +44,27 @@ from contentstore import utils ...@@ -35,24 +44,27 @@ from contentstore import utils
</%block> </%block>
<%block name="content"> <%block name="content">
<!-- --> <div class="wrapper-content wrapper">
<div class="main-wrapper"> <section class="content">
<div class="inner-wrapper"> <header>
<h1>Settings</h1> <span class="title-sub">Settings</span>
<article class="settings-overview"> <h1 class="title-1">Grading</h1>
<div class="settings-page-section main-column"> </header>
<section class="settings-grading is-shown"> <!-- <div class="introduction">
<h2 class="title">Grading</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div> -->
<section class="settings-grading-range"> <article class="content-primary" role="main">
<form id="settings_details" method="post" action="">
<section class="group-settings grade-range">
<header> <header>
<h3>Overall Grade Range</h3> <h2 class="title-2">Overall Grade Range</h2>
<span class="detail">Course grade ranges and their values</span> <span class="tip">Your overall grading scale for student final grades</span>
</header> </header>
<div class="row"> <ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<div class="grade-controls course-grading-range well"> <div class="grade-controls course-grading-range well">
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a> <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
<div class="grade-slider"> <div class="grade-slider">
...@@ -75,49 +87,73 @@ from contentstore import utils ...@@ -75,49 +87,73 @@ from contentstore import utils
</div> </div>
</div> </div>
</div> </div>
</li>
</div> </ol>
<span class="tip tip-stacked">Add different overall course grading scales and drag to set their cut-off points</span>
</section> </section>
<section class="settings-grading-general"> <hr class="divide" />
<section class="group-settings">
<header> <header>
<h3>General Grading</h3> <h2 class="title-2">Grading Rules &amp; Policies</h2>
<span class="detail">Deadlines and Requirements</span> <span class="tip">Deadlines, requirements, and logistics around grading student work</span>
</header> </header>
<div class="row row-col2"> <ol class="list-input">
<label for="course-grading-graceperiod">Grace Period on Deadline:</label> <li class="field text is-not-editable" id="field-course-organization">
<label for="course-organization">Organization</label>
<div class="field"> <input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled" />
<div class="input"> </li>
<input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes">
<span class="tip tip-inline">leeway on due dates</span> <li class="field text is-not-editable" id="field-course-number">
</div> <label for="course-number">Course Number</label>
</div> <input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
</div> </li>
<li class="field text is-not-editable" id="field-course-name">
<label for="course-name">Course Name</label>
<input type="text" class="long" id="course-name" value="[Course Name]" disabled="disabled" />
</li>
</ol>
<span class="tip tip-stacked">These are used in <a href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>
</section> </section>
<section class="setting-grading-assignment-types"> <hr class="divide" />
<section class="group-settings">
<header> <header>
<h3>Assignment Types</h3> <h2 class="title-2">Assignment Types</h2>
<span class="tip">Categories and labels for any exercises that are gradable</span>
</header> </header>
<div class="row"> <ol class="list-input">
<div class="field enum"> <li class="field text is-not-editable" id="field-course-organization">
<ul class="input-list course-grading-assignment-list"> <label for="course-organization">Organization</label>
</ul> <input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled" />
</li>
<a href="#" class="new-button new-course-grading-item add-grading-data"> </ol>
<span class="plus-icon white"></span>New Assignment Type <span class="tip tip-stacked">These are used in <a href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>
</a>
</div>
</div>
</section> </section>
</section><!-- .settings-grading --> </form>
</div>
</article> </article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">How will these settings be used</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div> </div>
<div class="bit">
<h3 class="title-3">Other Course Settings</h3>
<nav class="nav-related">
<ul>
<li class="nav-item"><a href="">Details &amp; Schedule</a></li>
<li class="nav-item"><a href="">Advanced Settings</a></li>
</ul>
</nav>
</div> </div>
<footer></footer> </aside>
</section>
</div>
</%block> </%block>
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