studio - checklists: revised input/label HTML and adjusted styling for each

cms/static/sass/_checklists.scss

@@ -56,7 +56,7 @@ body.course.checklists {
 
       .checklist-title {
         @include transition(color .15s .25s ease-in-out);
-        width: flex-grid(7, 9);
+        width: flex-grid(6, 9);
         margin: 0 flex-gutter() 0 0;
         float: left;
 
@@ -64,14 +64,6 @@ body.course.checklists {
           @include font-size(14);
           display: inline-block;
           vertical-align: middle;
-          margin-right: $baseline;
-          color: $gray-l4;
-        }
-
-        .icon-confirm {
-          @include font-size(20);
-          display: inline-block;
-          vertical-align: middle;
           margin-right: ($baseline/2);
           color: $gray-l4;
         }
@@ -91,12 +83,21 @@ body.course.checklists {
 
       .checklist-status {
         @include font-size(13);
-        width: flex-grid(2, 9);
+        width: flex-grid(3, 9);
         float: right;
         margin-top: ($baseline/2);
         text-align: right;
         color: $gray-l2;
         
+
+        .icon-confirm {
+          @include font-size(20);
+          display: inline-block;
+          vertical-align: middle;
+          margin-left: ($baseline/2);
+          color: $gray-l4;
+        }
+
         .status-count {
           @include font-size(16);
           margin-left: ($baseline/4);
@@ -192,13 +193,6 @@ body.course.checklists {
             color: $green;          
           }
         }
-
-        .checklist-status .icon-confirm {
-          @include font-size(12);
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: ($baseline/4);
-        }
       }
     }
 
@@ -230,21 +224,19 @@ body.course.checklists {
         border-bottom: none;
       }
 
-      label {
-        float: left;
-        width: flex-grid(7,9);
-        font-weight: 500;
-
       .task-input {
         display: inline-block;
         vertical-align: text-top;
+        float: left;
         margin: ($baseline/2) flex-gutter() 0 0;
       }
 
       .task-details {
         display: inline-block;
         vertical-align: text-top;
-          width: flex-grid(6,7);
+        float: left;
+        width: flex-grid(6,9);
+        font-weight: 500;
 
         .task-name {
           @include transition(color .15s .25s ease-in-out);
@@ -266,14 +258,13 @@ body.course.checklists {
           pointer-events: none;
         }
       }
-      }
 
       .task-actions {
         @include transition(opacity .15s .25s ease-in-out);
         @include clearfix();
         display: inline-block;
         vertical-align: middle;
-        float: left;
+        float: right;
         width: flex-grid(2,9);
         margin: ($baseline/2) 0 0 flex-gutter();
         opacity: 0;

cms/templates/checklists.html

@@ -48,27 +48,25 @@
         <section class="course-checklist" id=${'course-checklist' + str(loop.index)}>
           <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" title="Collapse/Expand this Checklist">
+            <h3 class="checklist-title title-2 is-selectable" title="Collapse/Expand this Checklist">
               <i class="ss-icon ss-symbolicons-standard icon-arrow ui-toggle-expansion">&#x25BE;</i>
-
-              <i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>${checklist['short_description']}</h3>
-              
-              <span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
+              ${checklist['short_description']}</h3>
+              <span class="checklist-status status">
+                Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span>
+                <i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>
+              </span>
           </header>
         
           <ul class="list list-tasks">
           
             % for item in checklist['items']:
             <li class="task">
-              <label for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
               <input type="checkbox" class="task-input" name=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
                id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
                value=${item['is_checked']}>
-
-                <div class="task-details">
+              <label class="task-details" for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
                 <h4 class="task-name title title-3">${item['short_description']}</h4>
                 <p class="task-description">${item['long_description']}</p>
-                </div>
               </label>
 
               % if item['action_text'] is not '' and item['action_url'] is not '':