Merge pull request #533 from MITx/feature/halogenandtoast/calculator

Put in calculator in courseware

lms/static/coffee/src/calculator.coffee

@@ -8,12 +8,15 @@ class @Calculator
 
   toggle: (event) ->
     event.preventDefault()
-    $('li.calc-main').toggleClass 'open'
-    $('#calculator_wrapper #calculator_input').focus()
+    $('div.calc-main').toggleClass 'open'
     if $('.calc.closed').length
       $('.calc').attr 'aria-label', 'Open Calculator'
     else
       $('.calc').attr 'aria-label', 'Close Calculator'
+      # TODO: Investigate why doing this without the timeout causes it to jump
+      # down to the bottom of the page. I suspect it's because it's putting the
+      # focus on the text field before it transitions onto the page.
+      setTimeout (-> $('#calculator_wrapper #calculator_input').focus()), 100
 
     $('.calc').toggleClass 'closed'
 

lms/static/sass/course.scss

@@ -20,6 +20,7 @@
 @import 'course/courseware/courseware';
 @import 'course/courseware/sidebar';
 @import 'course/courseware/amplifier';
+@import 'course/layout/calculator';
 
 
 // course-specific courseware (all styles in these files should be gated by a

lms/static/sass/course/layout/_calculator.scss

@@ -1,4 +1,4 @@
-li.calc-main {
+div.calc-main {
   bottom: -126px;
   left: 0;
   position: fixed;
@@ -9,10 +9,6 @@ li.calc-main {
 
   &.open {
     bottom: -36px;
-
-    div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
-      display: block;
-    }
   }
 
   a.calc {
@@ -27,7 +23,7 @@ li.calc-main {
     margin-right: 10px;
     padding: 8px 12px;
     position: relative;
-    top: -36px;
+    top: -45px;
     width: 16px;
 
     &:hover {
@@ -36,6 +32,7 @@ li.calc-main {
 
     &.closed {
       background-image: url("../images/close-calc-icon.png");
+      top: -36px;
     }
   }
 
@@ -61,6 +58,7 @@ li.calc-main {
         float: left;
         font-size: 30px;
         font-weight: bold;
+        height: 35px;
         margin: 0 (flex-gutter() / 2);
         padding: 0;
         text-shadow: none;
@@ -73,7 +71,7 @@ li.calc-main {
       }
 
       input#calculator_output {
-        background: #222;
+        background: #111;
         border: 0;
         @include box-shadow(none);
         @include box-sizing(border-box);
@@ -111,14 +109,14 @@ li.calc-main {
 
         div.help-wrapper {
           position: absolute;
-          right: 8px;
-          top: 15px;
+          right: 0;
+          top: 0;
 
           a {
             background: url("../images/info-icon.png") center center no-repeat;
-            height: 17px;
+            height: 35px;
             @include hide-text;
-            width: 17px;
+            width: 35px;
           }
 
           dl {
@@ -127,28 +125,30 @@ li.calc-main {
             @include box-shadow(0 0 3px #999);
             color: #333;
             display: none;
+            line-height: lh();
             opacity: 0;
             padding: 10px;
             position: absolute;
             right: -40px;
-            top: -110px;
+            top: -122px;
             @include transition();
-            width: 500px;
+            width: 600px;
 
             &.shown {
+              display: block;
               opacity: 1;
-              top: -115px;
             }
 
             dt {
               clear: both;
               float: left;
               font-weight: bold;
-              padding-right: lh(.5);
+              padding-right: 12px;
             }
 
             dd {
               float: left;
+              margin-left: 0;
             }
           }
         }