Align attribute

done/done.py

@@ -20,6 +20,12 @@ class DoneXBlock(XBlock):
            default = False
         )
 
+    align = String(
+           scope = Scope.settings, 
+           help = "Align left/right/center",
+           default = "left"
+        )
+
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
         data = pkg_resources.resource_string(__name__, path)
@@ -48,6 +54,13 @@ class DoneXBlock(XBlock):
         #frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
         frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
         frag.add_css(self.resource_string("static/css/done.css"))
+        grow_left = 1
+        grow_right = 1
+        if self.align.lower() == "left":
+            grow_left = 0
+        if self.align.lower() == "right":
+            grow_right = 0
+        frag.add_css(".done_left_spacer {{ flex-grow:{l}; }} .done_right_spacer {{ flex-grow:{r}; }}".format(r=grow_right, l=grow_left))
         frag.add_javascript("var done_done = "+("true" if self.done else "false")+";")
         frag.add_javascript(self.resource_string("static/js/src/done.js"))
         frag.initialize_js('DoneXBlock')
@@ -61,7 +74,7 @@ class DoneXBlock(XBlock):
         return [
             ("DoneXBlock",
              """<vertical_demo>
-                  <done> </done>
+                  <done align="left"> </done>
                 </vertical_demo>
              """),
         ]

done/static/css/done.css

 /* CSS for DoneXBlock */
 
 .done_block {
-    width:200px; 
+    width:100%; 
     height:35px;
-    cursor: pointer;
-    border: 1px solid #0d72a2;
-    border-radius: 3px;
-    font-family: 'Open Sans', Verdana, Geneva, sans-serif, sans-serif;
-    font-size: 13.333333015441895px;
-    font-weight : bold;
-    letter-spacing: normal;
+    display:flex;
+    flex-direction: row;
     //padding: 5 0 -5 0;
     //margin: -5 0 5 0;
 }
 
 .wipe {
-  -webkit-transition: width 0.2s;
-  transition: width 0.2s;
-  text-align:center;
-  vertical-align:-10;
+    -webkit-transition: width 0.2s;
+    transition: width 0.2s;
+    text-align:center;
+    vertical-align:-10;
 }
 
 .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;
+    -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 {
-  height:100%;
+    cursor: pointer;
+    width:200px; 
+    height:100%;
+    border: 1px solid #0d72a2;
+    border-radius: 3px;
+    font-family: 'Open Sans', Verdana, Geneva, sans-serif, sans-serif;
+    font-size: 13.333333015441895px;
+    font-weight : bold;
+    letter-spacing: normal;
 }
 
 .windshield_on { // "Mark as complete"

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>
+  <div class="done_right_spacer"> </div>
 </div>