studio - checklists: finished static styling, initial checklist content import, and some basic JS
This commit is contained in:
Brian Talbot
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">✓</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 & 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>
|
||||
|
||||
<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">+</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"></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">✓</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>
|
||||
|
||||
<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">✓</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">+</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"></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">✓</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 & 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 & 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 & 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 & 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">✓</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">✓</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>
|
||||
|
||||
Reference in New Issue
Block a user