Minor cleanups for code review with Ned

done/done.py

@@ -9,7 +9,7 @@ from xblock.fragment import Fragment
 
 class DoneXBlock(XBlock):
     """
-    This XBlock will play an MP3 file as an HTML5 audio element. 
+    Show a toggle which lets students mark things as done.
     """
 
     # Fields are defined on the class.  You can access them in your code as

done/static/css/done.css

@@ -9,19 +9,19 @@
     //margin: -5 0 5 0;
 }
 
-.wipe {
+.done_wipe {
     -webkit-transition: width 0.2s;
     transition: width 0.2s;
     text-align:center;
-    vertical-align:-10;
+    vertical-align:-10 !important; 
 }
 
-.windshield_animated {
+.done_windshield_animated {
     -webkit-transition: background-color 0.4s, box-shadow 0.4s, color 0.4s, text-shadow 0.4s, background-image 0.4s;
     transition: background-color 0.4s, box-shadow 0.4s, color 0.4s, text-shadow 0.4s, background-image 0.4s;
 }
 
-.windshield {
+.done_windshield {
     cursor: pointer;
     width:200px; 
     height:100%;
@@ -33,7 +33,7 @@
     letter-spacing: normal;
 }
 
-.windshield_on { // "Mark as complete"
+.done_windshield_on { // "Mark as complete"
     -webkit-font-smoothing: antialiased;
     background-color: #1e8bbe;
     background-image: linear-gradient(rgb(109, 204, 241), rgb(56, 168, 229));
@@ -44,7 +44,7 @@
     text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 0px;
 }
 
-.windshield_off { // Undo
+.done_windshield_off { // Undo
     -webkit-font-smoothing: antialiased;
     background-color: #e1e1e1;
     background-image: linear-gradient(rgb(225, 255, 225), rgb(202, 232, 202));
@@ -55,7 +55,7 @@
     text-shadow: rgb(248, 248, 248) 0px 1px 0px;
 }
 
-.windshield_on .wipe_on {
+.done_windshield_on .done_wipe_on {
   display:inline-block;
   width:80%;
   overflow:hidden;
@@ -63,7 +63,7 @@
   white-space:nowrap;
 }
 
-.windshield_off .wipe_on {
+.done_windshield_off .done_wipe_on {
   display:inline-block;
   width:0;
   overflow:hidden;
@@ -71,13 +71,13 @@
   white-space:nowrap;
 }
 
-.wiper {
+.done_wiper {
   display:inline-block;
   width:7%;
-  vertical-align:-10;
+  vertical-align:-10 !important;
 }
 
-.windshield_off .wipe_off {
+.done_windshield_off .done_wipe_off {
   display:inline-block;
   width:80%;
   overflow:hidden;
@@ -85,7 +85,7 @@
   white-space:nowrap;
 }
 
-.windshield_on .wipe_off {
+.done_windshield_on .done_wipe_off {
   display:inline-block;
   width:0;
   overflow:hidden;
@@ -93,6 +93,6 @@
   white-space: nowrap;
 }
 
-.ui_icon_white {
+.ui_icon_gray {
     background-image: url("//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/images/ui-icons_888888_256x240.png");
 }
\ No newline at end of file

done/static/html/done.html

 <div class="done_block">
   <div class="done_left_spacer"> </div>
-  <div class="windshield"> 
-    <div class="wipe wipe_off"> Undo </div>
-    <div class="wiper"> <span class="ui-icon ui-icon-circle-plus ui_icon_white"></span> </div>
-    <div class="wipe wipe_on"> Mark as complete </div>
+  <div class="done_windshield"> 
+    <div class="done_wipe done_wipe_off"> Undo </div>
+    <div class="done_wiper"> <span class="ui-icon ui-icon-circle-plus ui_icon_white"></span> </div>
+    <div class="done_wipe done_wipe_on"> Mark as complete </div>
   </div>
   <div class="done_right_spacer"> </div>
 </div>

done/static/js/src/done.js

 function DoneXBlock(runtime, element) {
-
-    function updateCount(result) {
-        console.log("Success");
-    }
-
     var handlerUrl = runtime.handlerUrl(element, 'toggle_button');
 
-    $('p', element).click(function(eventObject) {
-    });
+    function updateCount(result) {}
 
     $(function ($) {
 	if (done_done) {
-	    $('.windshield').addClass("windshield_off").removeClass("windshield_on");
+	    $('.done_windshield', element).addClass("done_windshield_off").removeClass("done_windshield_on");
 	} else {
-	    $('.windshield').addClass("windshield_on").removeClass("windshield_off");
+	    $('.done_windshield', element).addClass("done_windshield_on").removeClass("done_windshield_off");
 	}
 	// Don't have animations on for above class changes. This is probably not necessary. I 
 	// was seeing animations on page load. I did a few things to fix it. The line below 
 	// wasn't the one that fixed it, but I decided to keep it anyways. 
-	$('.windshield').addClass("windshield_animated")
-	$('.windshield').click(function(){
-            $(this).toggleClass("windshield_on");
-            $(this).toggleClass("windshield_off");
+	$('.done_windshield', element).addClass("done_windshield_animated")
+	$('.done_windshield', element).click(function(){
+            $(this).toggleClass("done_windshield_on");
+            $(this).toggleClass("done_windshield_off");
 	    $.ajax({
 		type: "POST",
 		url: handlerUrl,
 		data: JSON.stringify({"done":$(this).hasClass("windshield_off")}),
 		success: updateCount
-          
 	    });
 	});
     });