Cleaned up styling

animation/animation.py

@@ -52,7 +52,6 @@ class AnimationXBlock(XBlock):
 
     @XBlock.json_handler
     def update_position(self, data, suffix):
-        print data
         if 'position' in data:
             self.position = data['position']
         if 'max_position' in data:
@@ -82,7 +81,9 @@ class AnimationXBlock(XBlock):
                                     max_position = self.max_position))
 #        frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
         frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
+        frag.add_css(self.resource_string("static/css/jquery.ui.labeledslider.css"))
         frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
+        frag.add_javascript(self.resource_string("static/js/src/jquery.ui.labeledslider.js"))
         frag.add_css(self.resource_string("static/css/animation.css"))
         frag.add_javascript(self.resource_string("static/js/src/animation.js"))
         frag.initialize_js('AnimationXBlock')
@@ -125,7 +126,7 @@ class AnimationXBlock(XBlock):
         return [
             ("AnimationXBlock",
              """<vertical_demo>
-                <animation width="460" height="384" textheight="200">
+                <animation width="460" height="384" textheight="100">
 http://upload.wikimedia.org/wikipedia/commons/e/e8/Pin_tumbler_no_key.svg
 Without a key in the lock, the driver pins (blue) are pushed downwards, preventing the plug (yellow) from rotating.
 http://upload.wikimedia.org/wikipedia/commons/5/54/Pin_tumbler_bad_key.svg

animation/static/css/animation.css

 /* CSS for AnimationXBlock */
+/*div {
+    border-width:1px;
+    border-style:solid;
+    border-color:rgba(0,0,0,0.1);
+}
+Above is useful for debugging
+*/ 
+
+.animation_header {
+    border-width:1px;
+    border-style:solid;
+    border-color:rgba(0,0,0,0.1);
+    border-radius: 16 16 16 16;
+    background:rgba(255,255,255,1);
+    display:flex;
+}
+
 .animation_wrapper {  // Whole XBlock. Gray background
     display:block; 
-    background:rgb(200, 200, 200); // TODO: edX gray
-    padding:20px !important;
+    background:rgba(0,0,0,0.01);
+    /*background:rgb(200, 200, 200); // TODO: edX gray*/
     border-width:1px; 
     border-style:solid; 
-    border-color:black;
-    border-radius:5px;
+    border-color:rgba(0,0,0,0.1);
+    border-radius: 16 16 16 16;
     width:100%;
 }
 
@@ -14,6 +31,7 @@
     display:block; 
     width:100%; 
     padding:10px;
+    
 }
 
 .ui-widget-content .ui-state-default,
@@ -31,13 +49,23 @@
 	color: #222222;
 }
 
+.animation_flex_column {
+    display:flex; 
+    flex-direction: column;
+}
+
+.animation_flex_row {
+    display:flex; 
+    flex-direction: column;
+}
+
 .animation_text {
     border-width:1px; 
     border-style:solid; 
-    border-color:black;
+    border-color:rgba(0,0,0,0.05);
     border-radius:5px;
     padding:10px;
     text-align:center;
     margin:10px;
-    background:rgb(255, 255, 255); 
+    background:rgba(255,255,255,1);
 }

animation/static/html/animation.html

@@ -5,14 +5,33 @@
     "max_position":{max_position}
     }}
   </script>
-  <div class="animation_slider_wrapper">
-    <div class="animation_slider" style="width:{inner_width}; "></div>
-  </div>
-  <div class="animation_image_wrapper">
-    <img class="animation_image" src="" height={height} width={width}>
+  <div class="animation_header"> 
+    <div class="animation_flex_column animation_left">
+      <div style="flex-grow:1;"> </div>
+      <span class="ui-icon ui-icon-triangle-1-w" style="vertical-align:middle; height:16;"></span>
+      <div style="flex-grow:1">
+      </div>
+    </div>
+    <div class="animation_slider_wrapper" style="flex-grow:1">
+      <div class="animation_slider" ></div>
+    </div>
+    <div class="animation_flex_column animation_right">
+      <div style="flex-grow:1"> </div>
+      <span class="ui-icon ui-icon-triangle-1-e" style="vertical-align:middle; height:16;"></span>
+      <div style="flex-grow:1">
+      </div>
+    </div>
   </div>
-  <div class="animation_text_wrapper" style="height:{textheight}">
-    <div class="animation_text">
+  <div style="display:flex">
+    <div style="flex-grow:1"> </div>
+    <div class="animation_image_wrapper">
+      <img class="animation_image" src="" height={height} width={width}>
     </div>
+    <div style="flex-grow:1"> </div>
+  </div>
+  <div class="animation_text_wrapper" style="display:flex;height:{textheight}">
+    <div style="flex-grow:1"> </div>
+    <div class="animation_text" style="width:{width}"></div>
+    <div style="flex-grow:1"> </div>
   </div>
 </div>

animation/static/js/src/animation.js

@@ -16,7 +16,7 @@ function AnimationXBlock(runtime, element) {
 	// TODO: Should we do this less often for lower load? 
 	// (It's okay right now, but less would be cleaner) 
 	function update_animation() {
-	    position = $(".animation_slider").slider("value")
+	    position = $(".animation_slider", element).labeledslider("value")
 	    $(".animation_image").attr("src", animation[position].src);
 	    $(".animation_text").html(animation[position].desc);
 	    if (position > max_position) { max_position = position; }
@@ -32,7 +32,7 @@ function AnimationXBlock(runtime, element) {
 	}
 
 	// Initialize slider. On any change, update the state
-	$( ".animation_slider", element ).slider({
+	$( ".animation_slider", element ).labeledslider({
 	    value: position, 
 	    min: 0, 
 	    max: animation.length-1, 
@@ -45,10 +45,26 @@ function AnimationXBlock(runtime, element) {
 	// Go to current position in animation
 	update_animation();
 
+	$(".animation_left", element).click(function(){
+	    new_position = position-1;
+	    if(new_position<0) {
+		new_position = 0;
+	    }
+	    $(".animation_slider", element).labeledslider("value", new_position);
+	});
+
+	$(".animation_right", element).click(function(){
+	    new_position = position + 1;
+	    if(new_position > animation.length - 1) {
+		new_position = animation.length - 1;
+	    }
+	    $(".animation_slider", element).labeledslider("value", new_position);
+	});
+
 	// Preload images. I'm not sure this works. Internet 
 	// said it did, but I think it might not, just from 
 	// performance
-	for(i=0; i<position.length; i++){
+	for(i=0; i<animation.length; i++){
 	    animation[position]["image"] = new Image();
 	    animation[position]["image"].src = animation[position].src;
 	}