Skip to content

E
edx-platform
Commit bf71f099 by Brian Talbot
Options

studio - checklists: finished static styling, initial checklist content import, and some basic JS

parent 66a8735a
Showing with 300 additions and 67 deletions
cms/static/sass/_checklists.scss
......@@ -23,7 +23,9 @@ body.course.checklists {
header {
@include clearfix();
@include box-shadow(inset 0 -1px 1px $shadow-l1);
margin-bottom: 0;
border-bottom: 1px solid $gray-l3;
padding: $baseline ($baseline*1.5);
.checklist-title {
......@@ -32,6 +34,14 @@ body.course.checklists {
margin: 0 flex-gutter() 0 0;
float: left;
.icon-confirm {
@include font-size(20);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
color: $gray-l4;
}
&.is-selectable {
cursor: pointer;
......@@ -105,6 +115,10 @@ body.course.checklists {
// state - collapsed
&.is-collapsed {
header {
@include box-shadow(none);
}
.list-tasks {
height: 0;
}
......@@ -115,8 +129,8 @@ body.course.checklists {
header {
.checklist-title {
color: $gray-l1;
.checklist-title, .icon-confirm {
color: $green;
}
.checklist-status {
......@@ -147,7 +161,8 @@ body.course.checklists {
overflow: hidden;
.task {
@include transition(background .15s ease-in-out .25s, border .15s ease-in-out .25s);
@include transition(background .15s ease-in-out .25s);
@include transition(border .15s ease-in-out .25s);
@include clearfix();
position: relative;
border-top: 1px solid $white;
......@@ -169,13 +184,13 @@ body.course.checklists {
.task-input {
display: inline-block;
vertical-align: middle;
margin-right: flex-gutter();
vertical-align: text-top;
margin: ($baseline/2) flex-gutter() 0 0;
}
.task-details {
display: inline-block;
vertical-align: middle;
vertical-align: text-top;
width: flex-grid(6,7);
.task-name {
......@@ -234,6 +249,7 @@ body.course.checklists {
opacity: 1.0;
.task-details {
.task-support {
opacity: 1.0;
pointer-events: auto;
......@@ -253,14 +269,17 @@ body.course.checklists {
border-top-color: $gray-l5;
border-bottom-color: $gray-l5;
.task-details {
opacity: 0.50;
.task-name {
color: $gray-l2;
}
&:hover {
background: $blue-l5;
border-bottom-color: $blue-l4;
border-top-color: $blue-l4;
.task-details {
opacity: 1.0;
opacity:1.0;
}
}
}
......
cms/templates/ux-checklists.html
......@@ -20,8 +20,8 @@
<section class="course-checklist" id="course-checklist1">
<header>
<h3 class="checklist-title title-2">Getting Started with Studio</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">2</span>/<span class="status-amount">5</span></span>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Getting Started with Studio</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
......@@ -42,19 +42,19 @@
</ul>
</li>
<li class="task is-completed">
<li class="task">
<label for="course-checklist1-task2">
<input checked type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete">
<input type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Set Your Course's Important Dates</h4>
<p class="task-description">Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
......@@ -64,14 +64,14 @@
<input type="checkbox" class="task-input" name="course-checklist1-task3" id="course-checklist1-task3" value="course-checklist1-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Draft Your Course's Grading Policy</h4>
<p class="task-description">Regardless of whether you have all your course assignments written, you can immediately get started setting up assignment types and a grade computation scheme.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary">Edit Grading Settings</a>
</li>
</ul>
</li>
......@@ -81,16 +81,146 @@
<input type="checkbox" class="task-input" name="course-checklist1-task4" id="course-checklist1-task4" value="course-checklist1-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Explore the other Studio Checklists</h4>
<p class="task-description">They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.</p>
</div>
</label>
</li>
</ul>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<section class="course-checklist" id="course-checklist2">
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Draft a Rough Course Outline</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">7</span></span>
</header>
<a class="task-support" href="#">See Also: How manage your course team in edX101</a>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist2-task1">
<input type="checkbox" class="task-input" name="course-checklist2-task1" id="course-checklist2-task1" value="course-checklist2-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Create your first Section and Subsection</h4>
<p class="task-description">Walk through the mechanics of building your course's first section and subsection through your course outline to start.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task2">
<input type="checkbox" class="task-input" name="course-checklist2-task2" id="course-checklist2-task2" value="course-checklist2-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Set your 1st Section's Release Date</h4>
<p class="task-description">Sections are released sequentially to students, and you have complete control over they are released to students.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist2-task3">
<input type="checkbox" class="task-input" name="course-checklist2-task3" id="course-checklist2-task3" value="course-checklist2-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Designate a Subsection as Graded</h4>
<p class="task-description">Assignment types are defined in your grading settings but can be quickly associated with sections using your course outline.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task4">
<input type="checkbox" class="task-input" name="course-checklist2-task4" id="course-checklist2-task4" value="course-checklist2-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Reordering Course Content</h4>
<p class="task-description">From the Course Outline, you can easily reorder your course content based on the progression you'd like students to walk through.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task5">
<input type="checkbox" class="task-input" name="course-checklist2-task5" id="course-checklist2-task5" value="course-checklist2-task5 complete">
<div class="task-details">
<h4 class="task-name title title-3">Renaming Course Sections</h4>
<p class="task-description">Learn how to rename Sections by clicking on its name from the Course Outline; this should open the editing mode.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task6">
<input type="checkbox" class="task-input" name="course-checklist2-task6" id="course-checklist2-task6" value="course-checklist2-task6 complete">
<div class="task-details">
<h4 class="task-name title title-3">Deleting Course Content</h4>
<p class="task-description">Try out deleting on a section, subsection, or unit you don't need anymore. Be careful though, anything inside the course content you delete is also removed.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist2-task7">
<input type="checkbox" class="task-input" name="course-checklist2-task7" id="course-checklist2-task7" value="course-checklist2-task7 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add an Instructor-Only Section to Your Outline</h4>
<p class="task-description">Some course authors find creating a section for unsorted, in-progress work useful. To do this, create a section and set the release date to the distant future.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit in Course Outline</a>
</li>
</ul>
</li>
......@@ -107,79 +237,158 @@
</ul>
</section>
<section class="course-checklist" id="course-checklist1">
<section class="course-checklist" id="course-checklist3">
<header>
<h3 class="checklist-title title-2">Getting Started with Studio</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">2</span>/<span class="status-amount">5</span></span>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Explore edX's Support Tools</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist1-task1">
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete">
<label for="course-checklist3-task1">
<input type="checkbox" class="task-input" name="course-checklist3-task1" id="course-checklist3-task1" value="course-checklist3-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Explore the Studio Help Forum</h4>
<p class="task-description">Access the Studio Help forum from the menu that appears when you click your user name in the top right corner of Studio.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary">Visit edX Studio Help</a>
</li>
</ul>
</li>
<li class="task is-completed">
<label for="course-checklist1-task2">
<input checked type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete">
<label for="course-checklist3-task2">
<input type="checkbox" class="task-input" name="course-checklist3-task2" id="course-checklist3-task2" value="course-checklist3-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Enroll in edX101</h4>
<p class="task-description">Register for edX101, edX's primer for course creation.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary">Register for edX101</a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist1-task3">
<input type="checkbox" class="task-input" name="course-checklist1-task3" id="course-checklist1-task3" value="course-checklist1-task3 complete">
<label for="course-checklist3-task3">
<input type="checkbox" class="task-input" name="course-checklist3-task3" id="course-checklist3-task3" value="course-checklist3-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Download the Studio Documentation</h4>
<p class="task-description">View the searchable Studio documentation to find answers to your questions or information about how to do specific tasks. Once you download the PDF, you can view it offline.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary link-pdf">Download Documentation</a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist1-task4">
<input type="checkbox" class="task-input" name="course-checklist1-task4" id="course-checklist1-task4" value="course-checklist1-task4 complete">
<label for="course-checklist3-task4">
<input type="checkbox" class="task-input" name="course-checklist3-task4" id="course-checklist3-task4" value="course-checklist3-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<h4 class="task-name title title-3">Explore the other Studio Checklists</h4>
<p class="task-description">They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.</p>
</div>
</label>
</li>
</ul>
<a class="task-support" href="#">See Also: How manage your course team in edX101</a>
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<li>
<a href="#" class="action action-primary"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a>
</li>
<li>
<a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li>
</ul>
</section>
<section class="course-checklist" id="course-checklist4">
<header>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Draft your Course Introduction</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
</header>
<ul class="list list-tasks">
<li class="task">
<label for="course-checklist4-task1">
<input type="checkbox" class="task-input" name="course-checklist4-task1" id="course-checklist4-task1" value="course-checklist4-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Drafting a Course Description/h4>
<p class="task-description">Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task is-completed">
<label for="course-checklist4-task2">
<input type="checkbox" class="task-input" name="course-checklist4-task2" id="course-checklist4-task2" value="course-checklist4-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Adding Staff Bios</h4>
<p class="task-description">Showing prospective students who will be their instructor is helpful, so we recommend including staff bios in the Course introduction page.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task is-not-available">
<label for="course-checklist4-task3">
<input type="checkbox" class="task-input" name="course-checklist4-task3" id="course-checklist4-task3" value="course-checklist4-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course FAQs</h4>
<p class="task-description">Students often have questions about courses, and including a short list of frequently asked questions up front often reduces the number of students who are confused.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
<li class="task">
<label for="course-checklist4-task4">
<input type="checkbox" class="task-input" name="course-checklist4-task4" id="course-checklist4-task4" value="course-checklist4-task4 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Prerequisites</h4>
<p class="task-description">Before a student jumps into a course without the necessary preparation, we'd like them to understand the prerequisites that will make them more likely to succeed.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary link-pdf">Edit Course Schedule &amp; Details </a>
</li>
</ul>
</li>
......@@ -200,16 +409,16 @@
<h2 class="title title-3 sr">Completed Checklists</h2>
<section class="course-checklist is-completed" id="course-checklist1">
<section class="course-checklist is-completed" id="course-checklist5">
<header>
<h3 class="checklist-title title-2">Getting Started with Studio</h3>
<span class="checklist-status status"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Tasks Completed: <span class="status-count">5</span>/<span class="status-amount">5</span></span>
<h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Completed Checklist Example</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">3</span>/<span class="status-amount">3</span></span>
</header>
<ul class="list list-tasks">
<li class="task is-completed">
<label for="course-checklist2-task1">
<input checked type="checkbox" class="task-input" name="course-checklist2-task1" id="course-checklist2-task1" value="course-checklist2-task1 complete">
<label for="course-checklist5-task1">
<input checked type="checkbox" class="task-input" name="course-checklist5-task1" id="course-checklist5-task1" value="course-checklist5-task1 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
......@@ -225,8 +434,8 @@
</li>
<li class="task is-completed">
<label for="course-checklist2-task2">
<input checked type="checkbox" class="task-input" name="course-checklist2-task2" id="course-checklist2-task2" value="course-checklist2-task2 complete">
<label for="course-checklist5-task2">
<input checked type="checkbox" class="task-input" name="course-checklist5-task2" id="course-checklist5-task2" value="course-checklist5-task2 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
......@@ -242,8 +451,8 @@
</li>
<li class="task is-completed">
<label for="course-checklist2-task3">
<input checked type="checkbox" class="task-input" name="course-checklist2-task3" id="course-checklist2-task3" value="course-checklist2-task3 complete">
<label for="course-checklist5-task3">
<input checked type="checkbox" class="task-input" name="course-checklist5-task3" id="course-checklist5-task3" value="course-checklist5-task3 complete">
<div class="task-details">
<h4 class="task-name title title-3">Add Course Team Members</h4>
......@@ -341,6 +550,14 @@
// checklists - prototype/basic js
$(document).ready(function() {
$('.course-checklist .checklist-title').each(function(e){
$(this).addClass('is-selectable').attr('title','Collapse/Expand this Checklist').bind('click', toggleChecklist);
});
$('.course-checklist .task label').each(function(e){
$(this).bind('click', toggleTask);
});
function toggleChecklist(e) {
(e).preventDefault();
$(this).closest('.course-checklist').toggleClass('is-collapsed');
......@@ -349,16 +566,21 @@
function toggleTask(e) {
(e).preventDefault();
if ($(this).attr('checked')) {
$(this).removeAttr('checked');
var $taskInput = $(this).find('.task-input');
if ($taskInput.attr('checked')) {
$taskInput.removeAttr('checked');
console.log('removing check');
}
else {
$(this).attr('checked');
$taskInput.attr('checked', 'checked');
console.log('adding check');
}
$(this).closest('.task').toggleClass('is-completed');
}
// in-progress update checklist progress (based on checkbox check/uncheck events)
function updateChecklistProgress() {
var $statusCount = $(this).closest('.course-checklist').find('.status-count');
var $statusAmount = $(this).closest('.course-checklist').find('.status-amount');
......@@ -371,14 +593,6 @@
console.log('subtracting');
}
}
$('.course-checklist .checklist-title').each(function(e){
$(this).addClass('is-selectable').attr('title','Collapse/Expand this Checklist').bind('click', toggleChecklist);
});
$('.course-checklist .task label').each(function(e){
$(this).bind('click', toggleTask);
});
});
</script>
......
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