Skip to content

E
edx-platform
Commit 66a8735a by Brian Talbot
Options

studio - Checklists: initial design and front end proofing/firming up - WIP

parent 1b5f0400
Showing with 454 additions and 39 deletions
cms/static/sass/_base.scss
...@@ -327,7 +327,8 @@ h1 { ...@@ -327,7 +327,8 @@ h1 {
} }
} }
.nav-related { // navigation
.nav-related, .nav-page {
.nav-item { .nav-item {
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
......
cms/static/sass/_checklists.scss 0 → 100644
// Studio - Course Settings
// ====================
body.course.checklists {
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
width: flex-grid(9, 12);
margin-right: flex-gutter();
}
// checklists - general
.course-checklist {
@extend .window;
margin: 0 0 ($baseline*2) 0;
&:last-child {
margin-bottom: 0;
}
header {
@include clearfix();
margin-bottom: 0;
padding: $baseline ($baseline*1.5);
.checklist-title {
@include transition(color .15s .25s ease-in-out);
width: flex-grid(7, 9);
margin: 0 flex-gutter() 0 0;
float: left;
&.is-selectable {
cursor: pointer;
&:hover {
color: $blue;
}
}
}
.checklist-status {
@include font-size(13);
width: flex-grid(2, 9);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
.status-count {
@include font-size(16);
margin-left: ($baseline/4);
margin-right: ($baseline/4);
color: $gray-d3;
font-weight: 600;
}
.status-amount {
@include font-size(16);
margin-left: ($baseline/4);
color: $gray-d3;
font-weight: 600;
}
}
}
// checklist actions
.course-checklist-actions {
@include clearfix();
@include box-shadow(inset 0 1px 1px $shadow-l1);
@include transition(border .15s ease-in-out .25s);
border-top: 1px solid $gray-l2;
padding: $baseline ($baseline*1.5);
background: $gray-l4;
.action-primary {
@include green-button();
float: left;
.icon-add {
@include font-size(12);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
.action-secondary {
@include font-size(14);
@include grey-button();
font-weight: 400;
float: right;
.icon-delete {
@include font-size(12);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
// state - collapsed
&.is-collapsed {
.list-tasks {
height: 0;
}
}
// state - completed
&.is-completed {
header {
.checklist-title {
color: $gray-l1;
}
.checklist-status {
.status-count, .status-amount, .icon-confirm {
color: $green;
}
}
.checklist-status .icon-confirm {
@include font-size(12);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
// state - not available
.is-not-available {
}
}
// list of tasks
.list-tasks {
height: auto;
overflow: hidden;
.task {
@include transition(background .15s ease-in-out .25s, border .15s ease-in-out .25s);
@include clearfix();
position: relative;
border-top: 1px solid $white;
border-bottom: 1px solid $gray-l5;
padding: $baseline ($baseline*1.5);
background: $white;
opacity: 1.0;
&:last-child {
margin-bottom: 0;
border-bottom: none;
}
label {
float: left;
width: flex-grid(7,9);
font-weight: 500;
.task-input {
display: inline-block;
vertical-align: middle;
margin-right: flex-gutter();
}
.task-details {
display: inline-block;
vertical-align: middle;
width: flex-grid(6,7);
.task-name {
@include transition(color .15s .25s ease-in-out);
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
}
.task-description {
@include transition(color .15s .25s ease-in-out);
@include font-size(14);
color: $gray-l2;
}
.task-support {
@include transition(opacity .15s .25s ease-in-out);
@include font-size(12);
opacity: 0;
pointer-events: none;
}
}
}
.task-actions {
@include transition(opacity .15s .25s ease-in-out);
@include clearfix();
display: inline-block;
vertical-align: middle;
float: left;
width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0;
pointer-events: none;
text-align: right;
.action-primary {
@include blue-button;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
}
.action-secondary {
@include font-size(13);
margin-top: ($baseline/2);
}
}
// state - hover
&:hover {
background: $blue-l5;
border-bottom-color: $blue-l4;
border-top-color: $blue-l4;
opacity: 1.0;
.task-details {
.task-support {
opacity: 1.0;
pointer-events: auto;
}
}
.task-actions {
opacity: 1.0;
pointer-events: auto;
}
}
// state - completed
&.is-completed {
background: $gray-l6;
border-top-color: $gray-l5;
border-bottom-color: $gray-l5;
.task-details {
opacity: 0.50;
}
&:hover {
.task-details {
opacity: 1.0;
}
}
}
}
}
.content-supplementary {
width: flex-grid(3, 12);
}
}
\ No newline at end of file
cms/static/sass/_variables.scss
...@@ -24,6 +24,7 @@ $gray-l2: tint($gray,40%); ...@@ -24,6 +24,7 @@ $gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%); $gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%); $gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%); $gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-d1: shade($gray,20%); $gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%); $gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%); $gray-d3: shade($gray,60%);
......
cms/templates/ux-checklists.html
...@@ -26,13 +26,14 @@ ...@@ -26,13 +26,14 @@
<ul class="list list-tasks"> <ul class="list list-tasks">
<li class="task"> <li class="task">
<div class="task-details"> <label for="course-checklist1-task1">
<div class="field">
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete"> <input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete">
<label for="course-checklist1-task1" class="title title-3 task-name">Add Course Team Members</label>
</div> <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> <p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
</div> </div>
</label>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li>
...@@ -40,29 +41,33 @@ ...@@ -40,29 +41,33 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="task is-completed"> <li class="task is-completed">
<div class="task-details"> <label for="course-checklist1-task2">
<div class="field">
<input checked type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete"> <input checked type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete">
<label for="course-checklist1-task2" class="title title-3 task-name">Set Important Dates for Your Course</label>
</div> <div class="task-details">
<p class="task-description">Establish a course start and end date, course enrollment start and end dates, content release and due dates, and other important dates.</p> <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>
</div> </div>
</label>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li>
<a href="#" class="action action-primary">Edit Dates</a> <a href="#" class="action action-primary">Edit Team Members</a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="task">
<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">
<div class="task-details"> <div class="task-details">
<div class="field"> <h4 class="task-name title title-3">Add Course Team Members</h4>
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete">
<label for="course-checklist1-task1" class="title title-3 task-name">Add Course Team Members</label>
</div>
<p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p> <p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
</div> </div>
</label>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li>
...@@ -70,29 +75,71 @@ ...@@ -70,29 +75,71 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="task is-completed">
<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">
<div class="task-details"> <div class="task-details">
<div class="field"> <h4 class="task-name title title-3">Add Course Team Members</h4>
<input checked type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete"> <p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<label for="course-checklist1-task2" class="title title-3 task-name">Set Important Dates for Your Course</label>
</div> <a class="task-support" href="#">See Also: How manage your course team in edX101</a>
<p class="task-description">Establish a course start and end date, course enrollment start and end dates, content release and due dates, and other important dates.</p>
</div> </div>
</label>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li>
<a href="#" class="action action-primary">Edit Dates</a> <a href="#" class="action action-primary">Edit Team Members</a>
</li> </li>
</ul> </ul>
</li> </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-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>
</header>
<ul class="list list-tasks">
<li class="task"> <li class="task">
<div class="task-details"> <label for="course-checklist1-task1">
<div class="field">
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete"> <input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-task1 complete">
<label for="course-checklist1-task1" class="title title-3 task-name">Add Course Team Members</label>
<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>
</div> </div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</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">
<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> <p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
</div> </div>
</label>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li>
...@@ -100,18 +147,39 @@ ...@@ -100,18 +147,39 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="task is-not-available"> <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">
<div class="task-details"> <div class="task-details">
<div class="field"> <h4 class="task-name title title-3">Add Course Team Members</h4>
<input type="checkbox" class="task-input" name="course-checklist1-task2" id="course-checklist1-task2" value="course-checklist1-task2 complete"> <p class="task-description">Grant your collaborators permission to edit your course so you can work together.</p>
<label for="course-checklist1-task2" class="title title-3 task-name">Set Important Dates for Your Course</label>
</div> </div>
<p class="task-description">Establish a course start and end date, course enrollment start and end dates, content release and due dates, and other important dates.</p> </label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</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">
<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>
<a class="task-support" href="#">See Also: How manage your course team in edX101</a>
</div> </div>
</label>
<ul class="list-actions task-actions"> <ul class="list-actions task-actions">
<li> <li>
<a href="#" class="action action-primary">Edit Dates</a> <a href="#" class="action action-primary">Edit Team Members</a>
</li> </li>
</ul> </ul>
</li> </li>
...@@ -139,28 +207,67 @@ ...@@ -139,28 +207,67 @@
</header> </header>
<ul class="list list-tasks"> <ul class="list list-tasks">
<li class="task"> <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">
<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>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li> </li>
<li class="task is-completed"> <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">
<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>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li> </li>
<li class="task is-not-available"> </ul>
</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">
<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. Grant your collaborators permission to edit your course so you can work together. Grant your collaborators permission to edit your course so you can work together. Grant your collaborators permission to edit your course so you can work together.</p>
</div>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<nav class="course-checklist-actions"> <ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5> <h5 class="sr">Edit This Checklist</h5>
<ul class="list-actions">
<li> <li>
<a href="#" class="action action-primary action-create"><i class="ss-icon ss-symbolicons-standard icon-add">&#x002B;</i> Add a Task <span class="sr">to This Checklist</span></a> <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>
<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> <a href="#" class="action action-secondary action-delete"><i class="ss-icon ss-symbolicons-block icon-delete">&#xE0D0;</i> Delete This Checklist</a>
</li> </li>
</ul> </ul>
</nav>
</section> </section>
<hr class="divider" /> <hr class="divider" />
...@@ -234,11 +341,43 @@ ...@@ -234,11 +341,43 @@
// checklists - prototype/basic js // checklists - prototype/basic js
$(document).ready(function() { $(document).ready(function() {
$('.course-checklist .checklist-title').each(function(e){ function toggleChecklist(e) {
$(this).addClass('is-selectable').click(function(e){
(e).preventDefault(); (e).preventDefault();
$(this).closest('.course-checklist').toggleClass('is-collapsed'); $(this).closest('.course-checklist').toggleClass('is-collapsed');
}
function toggleTask(e) {
(e).preventDefault();
if ($(this).attr('checked')) {
$(this).removeAttr('checked');
}
else {
$(this).attr('checked');
}
$(this).closest('.task').toggleClass('is-completed');
}
function updateChecklistProgress() {
var $statusCount = $(this).closest('.course-checklist').find('.status-count');
var $statusAmount = $(this).closest('.course-checklist').find('.status-amount');
if ($(this).attr('checked')) {
console.log('adding');
}
else {
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);
}); });
}); });
......
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