From e4ab6dc2c3ebdb270d4b9f370550776a24e611cb Mon Sep 17 00:00:00 2001 From: Adam Date: Mon, 11 Jan 2016 12:44:00 -0500 Subject: [PATCH] Revert "Calculator layout and help popup fixes" --- lms/static/coffee/fixtures/calculator.html | 26 +- lms/static/coffee/spec/calculator_spec.coffee | 14 +- lms/static/coffee/src/calculator.coffee | 2 +- .../sass/course/modules/_calculator.scss | 129 ++++------ .../calculator/toggle_calculator.html | 233 +++++++++--------- 5 files changed, 186 insertions(+), 218 deletions(-) diff --git a/lms/static/coffee/fixtures/calculator.html b/lms/static/coffee/fixtures/calculator.html index be9ba3743a..5398c7a776 100644 --- a/lms/static/coffee/fixtures/calculator.html +++ b/lms/static/coffee/fixtures/calculator.html @@ -7,6 +7,18 @@
Hints +
@@ -14,18 +26,4 @@ -
  • - -
    • diff --git a/lms/static/coffee/spec/calculator_spec.coffee b/lms/static/coffee/spec/calculator_spec.coffee index aff7be2e84..3bd7fdc37a 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($('.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', -> diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee index 9b137f92a5..3342aee9dd 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 = $('.calc-help-popup') + @hintPopup = $('.help') @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 83e40fda73..311d2d3d54 100644 --- a/lms/static/sass/course/modules/_calculator.scss +++ b/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,85 +169,47 @@ 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 3b4bcfa50d..3a7e10d040 100644 --- a/lms/templates/calculator/toggle_calculator.html +++ b/lms/templates/calculator/toggle_calculator.html @@ -17,7 +17,121 @@ from django.core.urlresolvers import reverse

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

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