Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brian Talbot
2013-03-13 10:50:34 -04:00
parent 1b5f040021
commit 66a8735a58
4 changed files with 497 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cms/static/sass/_base.scss
View File

@@ -327,7 +327,8 @@ h1 {
}
}
.nav-related {
// navigation
.nav-related, .nav-page {
.nav-item {
margin-bottom: ($baseline/4);

273
cms/static/sass/_checklists.scss Normal file
View File

@@ -0,0 +1,273 @@
// 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);
}
}

1
cms/static/sass/_variables.scss
View File

@@ -24,6 +24,7 @@ $gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);

303
cms/templates/ux-checklists.html
View File

@@ -26,13 +26,14 @@
<ul class="list list-tasks">
<li class="task">
<div class="task-details">
<div class="field">
<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>
<label for="course-checklist1-task1">
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-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>
<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>
@@ -40,29 +41,16 @@
</li>
</ul>
</li>
<li class="task is-completed">
<div class="task-details">
<div class="field">
<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>
<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>
<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">
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Dates</a>
</li>
</ul>
</li>
<li class="task">
<div class="task-details">
<div class="field">
<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>
<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>
@@ -70,48 +58,128 @@
</li>
</ul>
</li>
<li class="task is-completed">
<div class="task-details">
<div class="field">
<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>
<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>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Dates</a>
</li>
</ul>
</li>
<li class="task">
<div class="task-details">
<div class="field">
<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>
</div>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li>
<li class="task is-not-available">
<div class="task-details">
<div class="field">
<input 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>
<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">
<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>
<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>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Dates</a>
<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>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</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">
<label for="course-checklist1-task1">
<input type="checkbox" class="task-input" name="course-checklist1-task1" id="course-checklist1-task1" value="course-checklist1-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 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>
</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-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">
<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 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>
</label>
<ul class="list-actions task-actions">
<li>
<a href="#" class="action action-primary">Edit Team Members</a>
</li>
</ul>
</li>
@@ -138,29 +206,68 @@
<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>
</header>
<ul class="list list-tasks">
<li class="task">
</li>
<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">
<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 class="task is-not-available">
<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>
</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>
</ul>
<nav class="course-checklist-actions">
<ul class="list-actions course-checklist-actions">
<h5 class="sr">Edit This Checklist</h5>
<ul class="list-actions">
<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>
</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>
</nav>
<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>
<hr class="divider" />
@@ -233,12 +340,44 @@
<script type="text/javascript">
// checklists - prototype/basic js
$(document).ready(function() {
function toggleChecklist(e) {
(e).preventDefault();
$(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').click(function(e){
(e).preventDefault();
$(this).closest('.course-checklist').toggleClass('is-collapsed');
});
$(this).addClass('is-selectable').attr('title','Collapse/Expand this Checklist').bind('click', toggleChecklist);
});
$('.course-checklist .task label').each(function(e){
$(this).bind('click', toggleTask);
});
});