Merge pull request #10648 from OmarIthawi/edraak/calculator-fixups

Calculator layout and help popup fixes

lms/static/coffee/fixtures/calculator.html

@@ -7,18 +7,6 @@
           <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>
-            <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
-                      <a id="hint-link-first" href="http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html">Entering Mathematical and Scientific Expressions</a>in the
-                      <a id="hint-link-second" href="http://edx-guide-for-students.readthedocs.org/en/latest/index.html">edX Guide for Students </a> format
-                    </span>
-                  </p>
-                </li>
-                <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" />
@@ -26,4 +14,18 @@
       </form>
     </div>
   </li>
+  <li>
+    <ul id="calculator_input_help" class="calc-help-popup" 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
+              <a id="hint-link-first" href="http://edx-guide-for-students.readthedocs.org/en/latest/SFD_mathformatting.html">Entering Mathematical and Scientific Expressions</a>in the
+              <a id="hint-link-second" href="http://edx-guide-for-students.readthedocs.org/en/latest/index.html">edX Guide for Students </a> format
+            </span>
+          </p>
+        </li>
+        <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>
+  </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($('.help')).toHaveClass('shown')
-      expect($('.help')).toHaveAttr('aria-hidden', 'false')
+      expect($('.calc-help-popup')).toHaveClass('shown')
+      expect($('.calc-help-popup')).toHaveAttr('aria-hidden', 'false')
 
 
   describe 'hideHint', ->
     it 'show the help overlay', ->
       @calculator.hideHint()
-      expect($('.help')).not.toHaveClass('shown')
-      expect($('.help')).toHaveAttr('aria-hidden', 'true')
+      expect($('.calc-help-popup')).not.toHaveClass('shown')
+      expect($('.calc-help-popup')).toHaveAttr('aria-hidden', 'true')
 
   describe 'handleClickOnHintButton', ->
     it 'on click hint button hint popup becomes visible ', ->
       e = jQuery.Event('click');
       $('#calculator_hint').trigger(e);
-      expect($('.help')).toHaveClass 'shown'
+      expect($('.calc-help-popup')).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($('.help')).not.toHaveClass 'shown'
+      expect($('.calc-help-popup')).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($('.help')).toHaveClass 'shown'
+      expect($('.calc-help-popup')).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 = $('.help')
+    @hintPopup = $('.calc-help-popup')
     @hintsList = @hintPopup.find('.hint-item')
     @selectHint($('#' + @hintPopup.attr('aria-activedescendant')));
 

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

@@ -10,6 +10,7 @@
   @include transition(bottom $tmg-avg linear 0s);
   -webkit-appearance: none;
   width: 100%;
+  direction: ltr;
 
   &.open {
     bottom: -36px;
@@ -52,17 +53,6 @@
     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);
@@ -157,6 +147,7 @@
             border: none;
             background: url("#{$static-path}/images/info-icon.png") center center no-repeat;
             color: $white;
+            cursor: pointer;
 
             &:focus {
               outline: 5px auto #5b9dd9;
@@ -169,47 +160,85 @@
               color: $white;
             }
           }
+        }
+      }
+    }
+  }
+}
 
-          .help {
-            @include transition(none);
-            background: $white;
-            border-radius: 3px;
-            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;
-
-            &.shown {
-              display: block;
-              pointer-events: auto;
-            }
+.calc-help-popup {
+  @include transition(none);
 
-            .bold {
-              font-weight: bold;
-            }
+  position: fixed;
+  left: 180px;
+  right: 180px;
+  top: 70px;
+  bottom: 90px;
+  overflow: auto;
 
-            p, p+p {
-              margin: 0;
-            }
+  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);
 
-            .calc-postfixes {
-              margin: 10px auto;
+  color: #333;
+  padding: 10px;
 
-              td, th {
-                padding: 2px 15px;
-              }
-            }
-          }
-        }
-      }
+  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;
+  }
+
+  .bold {
+    font-weight: bold;
+  }
+
+  p, p+p {
+    margin: 0;
+  }
+
+  .calc-postfixes {
+    margin: 10px auto;
+
+    td, th {
+      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;
+  }
 }