studio - checklists: revised task completion styles, added in checklist visual…

studio - checklists: revised task completion styles, added in checklist visual progress UI and demo/PoC JS and cleaned up some content/status states

cms/static/sass/_checklists.scss

@@ -21,6 +21,32 @@ body.course.checklists {
       margin-bottom: 0;
     }
 
+    // visual status
+    .viz-checklist-status {
+      @include text-hide();
+      @include size(100%,($baseline/4));
+      position: relative;
+      display: block;
+      margin: 0;
+      background: $gray-l4;
+
+      .viz-checklist-status-value {
+        @include transition(width 2s ease-in-out .25s);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: ($baseline/4);
+        background: $green;
+
+        .int {
+          @include text-sr();
+        }
+      }
+    }
+    // <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
+    // header/title
     header {
       @include clearfix();
       @include box-shadow(inset 0 -1px 1px $shadow-l1);
@@ -127,6 +153,13 @@ body.course.checklists {
     // state - completed
     &.is-completed {
       
+      .viz-checklist-status {
+
+        .viz-checklist-status-value {
+          width: 100%;
+        }
+      }
+
       header {
 
         .checklist-title, .icon-confirm {
@@ -273,10 +306,20 @@ body.course.checklists {
           color: $gray-l2;
         }
 
+        .task-actions {
+
+          .action-primary {
+            @include grey-button;
+            @include font-size(12);
+            font-weight: 600;
+            text-align: center;
+          }
+        }
+
         &:hover {
-          background: $blue-l5;
-          border-bottom-color: $blue-l4;
-          border-top-color: $blue-l4;
+          background: $gray-l5;
+          border-bottom-color: $gray-l4;
+          border-top-color: $gray-l4;
 
           .task-details {
             opacity:1.0;

cms/templates/ux-checklists.html

@@ -14,11 +14,17 @@
 
 <div class="wrapper-content wrapper">
   <section class="content">
+    <div class="introduction">
+      <p class="copy">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<a href="" class="demo-checklistviz">Test Checklist Progress Visualization</a></p>
+    </div>
+
     <article class="content-primary" role="main">
       <form id="course-checklists" class="course-checklists" method="post" action="">
         <h2 class="title title-3 sr">Current Checklists</h2>
 
         <section class="course-checklist" id="course-checklist1">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <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>
@@ -100,6 +106,8 @@
         </section>
 
         <section class="course-checklist" id="course-checklist2">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <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>
@@ -238,6 +246,8 @@
         </section>
 
         <section class="course-checklist" id="course-checklist3">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <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>
@@ -319,9 +329,10 @@
         </section>
 
         <section class="course-checklist" id="course-checklist4">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <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">
@@ -330,7 +341,7 @@
                 <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>
+                  <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>
@@ -342,7 +353,7 @@
               </ul>
             </li>
 
-            <li class="task is-completed">
+            <li class="task">
               <label for="course-checklist4-task2">
                 <input type="checkbox" class="task-input" name="course-checklist4-task2" id="course-checklist4-task2" value="course-checklist4-task2 complete">
 
@@ -410,6 +421,8 @@
         <h2 class="title title-3 sr">Completed Checklists</h2>
 
         <section class="course-checklist is-completed" id="course-checklist5">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <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>
@@ -558,6 +571,12 @@
       $(this).bind('click', toggleTask);
     });
 
+    // demo/proof of concept for visual progress
+    $('.demo-checklistviz').click(function(e){
+      (e).preventDefault();
+      $('#course-checklist1 .viz-checklist-status .viz-checklist-status-value').css('width','25%');
+    });
+
     function toggleChecklist(e) {
       (e).preventDefault();
       $(this).closest('.course-checklist').toggleClass('is-collapsed');