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 475 additions and 60 deletions
cms/static/sass/_base.scss
......@@ -327,7 +327,8 @@ h1 {
}
}
.nav-related {
// navigation
.nav-related, .nav-page {
.nav-item {
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%);
$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%);
......
cms/templates/ux-checklists.html
......@@ -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,33 @@
</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>
<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>
<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">
<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>
<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>
<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,29 +75,54 @@
</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>
<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>
<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>
</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">
<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>
......@@ -100,18 +130,56 @@
</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">
<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>
</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>
<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>
......@@ -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">
<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-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-not-available">
<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);
});
});
......
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