Revert "Calculator layout and help popup fixes"

lms/static/coffee/fixtures/calculator.html

@@ -7,15 +7,7 @@
           <input type="text" id="calculator_input" tabindex="-1" />
           <div class="help-wrapper">
             <a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1">Hints</a>
-          </div>
-        </div>
-        <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
-        <input type="text" id="calculator_output" readonly tabindex="-1" />
-      </form>
-    </div>
-  </li>
-  <li>
-    <ul id="calculator_input_help" class="calc-help-popup" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
+            <ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
                 <li class="hint-item" id="hint-moreinfo" tabindex="-1">
                   <p>
                     <span class="bold">For detailed information, see
@@ -27,5 +19,11 @@
                 <li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">Integers:</span> 2520</p></li>
                 <li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">Decimals:</span> 3.14 or .98</p></li>
             </ul>
+          </div>
+        </div>
+        <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
+        <input type="text" id="calculator_output" readonly tabindex="-1" />
+      </form>
+    </div>
   </li>
 </ul>

lms/static/coffee/spec/calculator_spec.coffee

@@ -61,35 +61,35 @@ describe 'Calculator', ->
   describe 'showHint', ->
     it 'show the help overlay', ->
       @calculator.showHint()
-      expect($('.calc-help-popup')).toHaveClass('shown')
-      expect($('.calc-help-popup')).toHaveAttr('aria-hidden', 'false')
+      expect($('.help')).toHaveClass('shown')
+      expect($('.help')).toHaveAttr('aria-hidden', 'false')
 
 
   describe 'hideHint', ->
     it 'show the help overlay', ->
       @calculator.hideHint()
-      expect($('.calc-help-popup')).not.toHaveClass('shown')
-      expect($('.calc-help-popup')).toHaveAttr('aria-hidden', 'true')
+      expect($('.help')).not.toHaveClass('shown')
+      expect($('.help')).toHaveAttr('aria-hidden', 'true')
 
   describe 'handleClickOnHintButton', ->
     it 'on click hint button hint popup becomes visible ', ->
       e = jQuery.Event('click');
       $('#calculator_hint').trigger(e);
-      expect($('.calc-help-popup')).toHaveClass 'shown'
+      expect($('.help')).toHaveClass 'shown'
 
   describe 'handleClickOnDocument', ->
     it 'on click out of the hint popup it becomes hidden', ->
       @calculator.showHint()
       e = jQuery.Event('click');
       $(document).trigger(e);
-      expect($('.calc-help-popup')).not.toHaveClass 'shown'
+      expect($('.help')).not.toHaveClass 'shown'
 
   describe 'handleClickOnHintPopup', ->
     it 'on click of hint popup it remains visible', ->
       @calculator.showHint()
       e = jQuery.Event('click');
       $('#calculator_input_help').trigger(e);
-      expect($('.calc-help-popup')).toHaveClass 'shown'
+      expect($('.help')).toHaveClass 'shown'
 
   describe 'selectHint', ->
     it 'select correct hint item', ->

lms/static/coffee/src/calculator.coffee

@@ -14,7 +14,7 @@
 class @Calculator
   constructor: ->
     @hintButton = $('#calculator_hint')
-    @hintPopup = $('.calc-help-popup')
+    @hintPopup = $('.help')
     @hintsList = @hintPopup.find('.hint-item')
     @selectHint($('#' + @hintPopup.attr('aria-activedescendant')));
 

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

@@ -10,7 +10,6 @@
   @include transition(bottom $tmg-avg linear 0s);
   -webkit-appearance: none;
   width: 100%;
-  direction: ltr;
 
   &.open {
     bottom: -36px;
@@ -53,6 +52,17 @@
     background: $black;
     color: $white;
 
+    // UI: input help table
+    .calculator-input-help-table {
+      margin: ($baseline/2) 0;
+
+      tr th, tr td {
+        vertical-align: top;
+        border: 1px solid $gray-l4;
+        padding: ($baseline/2);
+      }
+    }
+
     form {
       @extend .clearfix;
       @include box-sizing(border-box);
@@ -147,7 +157,6 @@
             border: none;
             background: url("#{$static-path}/images/info-icon.png") center center no-repeat;
             color: $white;
-            cursor: pointer;
 
             &:focus {
               outline: 5px auto #5b9dd9;
@@ -160,50 +169,24 @@
               color: $white;
             }
           }
-        }
-      }
-    }
-  }
-}
 
-.calc-help-popup {
+          .help {
             @include transition(none);
-
-  position: fixed;
-  left: 180px;
-  right: 180px;
-  top: 70px;
-  bottom: 90px;
-  overflow: auto;
-
             background: $white;
             border-radius: 3px;
-  box-shadow: // Standard 3px black shadow.
-              0 0 3px #999,
-              // Places a overlay black transparent popup background.
-              0 0 0 4000em rgba(0, 0, 0, 0.20);
-
+            box-shadow: 0 0 3px #999;
             color: #333;
             padding: 10px;
-
+            position: absolute;
+            right: -40px;
+            bottom: 57px;
+            width: 600px;
+            overflow: hidden;
             pointer-events: none;
             display: none;
             margin: 0;
             list-style: none;
 
-
-
-  // UI: input help table
-  .calculator-input-help-table {
-    margin: ($baseline/2) auto;
-
-    tr th, tr td {
-      vertical-align: top;
-      border: 1px solid $gray-l4;
-      padding: ($baseline/2);
-    }
-  }
-
             &.shown {
               display: block;
               pointer-events: auto;
@@ -224,21 +207,9 @@
                 padding: 2px 15px;
               }
             }
-
-  @media screen and (max-width: 990px) {
-    left: 20px;
-    right: 20px;
           }
-
-  @media screen and (min-width: 991px) and (max-width: 1999px) {
-    left: 20%;
-    right: 20%;
         }
-
-  @media screen and (min-width: 2000px) {
-    left: 35%;
-    right: 35%;
-    padding-bottom: 40px;
-    bottom: auto;
+      }
+    }
   }
 }

lms/templates/calculator/toggle_calculator.html

@@ -17,19 +17,9 @@ from django.core.urlresolvers import reverse
         <div class="help-wrapper">
           <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
 
-          <a href="#" id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="calc-hint sr">${_("Hints")}</span></a>
-        </div>
-      </div>
-
-      <input type="submit" id="calculator_button" value="=" aria-label="${_('Calculate')}">
-      <label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label>
-      <input type="text" id="calculator_output" readonly />
-    </form>
-  </div>
-</div>
+          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="calc-hint sr">${_("Hints")}</span></button>
 
-<div id="calculator_input_help" class="calc-help-popup" aria-hidden="true">
-  <ul>
+          <ul id="calculator_input_help" class="help" aria-hidden="true">
             <li class="hint-item" id="hint-moreinfo">
                 <p><span class="bold">${_("For detailed information, see {math_link_start}Entering Mathematical and Scientific Expressions{math_link_end} in the {guide_link_start}edX Guide for Students{guide_link_end}.").format(
                   math_link_start='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html">',
@@ -59,86 +49,95 @@ from django.core.urlresolvers import reverse
                   </tr>
                   <tr>
                     <th scope="row">${_("Numbers")}</th>
-            <td dir="auto">${_("Integers")}<br />
+                    <td>${_("Integers")}<br />
                       ${_("Fractions")}<br />
                       ${_("Decimals")}
                     </td>
-            <td dir="auto">2520<br />
+                    <td>2520<br />
                       2/3<br />
                       3.14, .98
                     </td>
                   </tr>
                   <tr>
-            ## Translators: This refers to mathematical operators such as `plus`, `minus`, `division` and others.
                     <th scope="row">${_("Operators")}</th>
-            <td dir="auto">
                     ## Translators: Please do not translate mathematical symbols.
-              ${_("+ - * / (add, subtract, multiply, divide)")}<br />
-
+                    <td>${_("+ - * / (add, subtract, multiply, divide)")}<br />
                       ## Translators: Please do not translate mathematical symbols.
                       ${_("^ (raise to a power)")}<br />
-
+                      ## Translators: Please do not translate mathematical symbols.
+                      ${_("_ (add a subscript)")}<br />
                       ## Translators: Please do not translate mathematical symbols.
                       ${_("|| (parallel resistors)")}
                     </td>
-            <td dir="auto">x+(2*y)/x-1
+                    <td>x+(2*y)/x-1
                       x^(n+1)<br />
                       v_IN+v_OUT<br />
                       1||2
                     </td>
                   </tr>
                   <tr>
-            ## Translators: This refers to symbols that are mathematical constants, such as "i" (square root of -1)
+                    <th scope="row">${_("Greek letters")}</th>
+                    <td>${_("Name of letter")}</td>
+                    <td>alpha<br />
+                      lambda
+                    </td>
+                  </tr>
+                  <tr>
                     <th scope="row">${_("Constants")}</th>
-            <td dir="auto">c, e, g, i, j, k, pi, q, T</td>
-            <td dir="auto">20*c<br />
+                    <td>c, e, g, i, j, k, pi, q, T</td>
+                    <td>20*c<br />
                       418*T
                     </td>
                   </tr>
                   <tr>
-            ## Translators: This refers to symbols that appear at the end of a number, such as the percent sign (%) and metric affixes
                     <th scope="row">${_("Affixes")}</th>
-            <td dir="auto">${_("Percent sign (%) and metric affixes (d, c, m, u, n, p, k, M, G, T)")}</td>
-            <td dir="auto">20%<br />
+                    <td>${_("Percent sign (%) and metric affixes (d, c, m, u, n, p, k, M, G, T)")}</td>
+                    <td>20%<br />
                       20c<br />
                       418T
                     </td>
                   </tr>
                   <tr>
-            ## Translators: This refers to basic mathematical functions such as "square root"
                     <th scope="row">${_("Basic functions")}</th>
-            <td dir="auto">abs, exp, fact or factorial, ln, log2, log10, sqrt</td>
-            <td dir="auto">abs(x+y)<br />
+                    <td>abs, exp, fact or factorial, ln, log2, log10, sqrt</td>
+                    <td>abs(x+y)<br />
                       sqrt(x^2-y)
                     </td>
                   </tr>
                   <tr>
-            ## Translators: This refers to mathematical Sine, Cosine and Tan
                     <th scope="row">${_("Trigonometric functions")}</th>
-            <td dir="auto">sin, cos, tan, sec, csc, cot<br />
+                    <td>sin, cos, tan, sec, csc, cot<br />
                       arcsin, sinh, arcsinh, etc.<br />
                     </td>
-            <td dir="auto">sin(4x+y)<br />
+                    <td>sin(4x+y)<br />
                       arccsch(4x+y)
                     </td>
-            <td dir="auto"></td>
+                    <td></td>
                   </tr>
                   <tr>
                     ## Translators: Please see http://en.wikipedia.org/wiki/Scientific_notation
                     <th scope="row">${_("Scientific notation")}</th>
                     ## Translators: 10^ is a mathematical symbol. Please do not translate.
-            <td dir="auto">${_("10^ and the exponent")}</td>
-            <td dir="auto">10^-9</td>
+                    <td>${_("10^ and the exponent")}</td>
+                    <td>10^-9</td>
                   </tr>
                   <tr>
                     ## Translators: this is part of scientific notation. Please see http://en.wikipedia.org/wiki/Scientific_notation#E_notation
                     <th scope="row">${_("e notation")}</th>
                     ## Translators: 1e is a mathematical symbol. Please do not translate.
-            <td dir="auto">${_("1e and the exponent")}</td>
-            <td dir="auto">1e-9</td>
+                    <td>${_("1e and the exponent")}</td>
+                    <td>1e-9</td>
                   </tr>
                 </tbody>
               </table>
             </li>
           </ul>
-</div>
+        </div>
+      </div>
+
+      <input type="submit" id="calculator_button" value="=" aria-label="${_('Calculate')}">
+      <label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label>
+      <input type="text" id="calculator_output" readonly />
+    </form>
+  </div>
+  </div>