diff --git a/lms/static/coffee/fixtures/calculator.html b/lms/static/coffee/fixtures/calculator.html index 5398c7a776..be9ba3743a 100644 --- a/lms/static/coffee/fixtures/calculator.html +++ b/lms/static/coffee/fixtures/calculator.html @@ -7,18 +7,6 @@
Hints -
@@ -26,4 +14,18 @@ +
  • + +
    • diff --git a/lms/static/coffee/spec/calculator_spec.coffee b/lms/static/coffee/spec/calculator_spec.coffee index 3bd7fdc37a..aff7be2e84 100644 --- a/lms/static/coffee/spec/calculator_spec.coffee +++ b/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', -> diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee index 3342aee9dd..9b137f92a5 100644 --- a/lms/static/coffee/src/calculator.coffee +++ b/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'))); diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss index 311d2d3d54..83e40fda73 100644 --- a/lms/static/sass/course/modules/_calculator.scss +++ b/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; - } - - .bold { - font-weight: bold; - } - - p, p+p { - margin: 0; - } - - .calc-postfixes { - margin: 10px auto; - - td, th { - padding: 2px 15px; - } - } - } } } } } } + +.calc-help-popup { + @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); + + color: #333; + padding: 10px; + + 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; + } +} diff --git a/lms/templates/calculator/toggle_calculator.html b/lms/templates/calculator/toggle_calculator.html index 3a7e10d040..3b4bcfa50d 100644 --- a/lms/templates/calculator/toggle_calculator.html +++ b/lms/templates/calculator/toggle_calculator.html @@ -17,121 +17,7 @@ from django.core.urlresolvers import reverse

    ${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}

    - - - +
    @@ -140,4 +26,119 @@ from django.core.urlresolvers import reverse - + + +