Skip to content

E
edx-platform
Commit 4c5c8c18 by Adam
Options

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

Calculator layout and help popup fixes
parents 4d2a8dbb e21505b7
Showing with 215 additions and 183 deletions
lms/static/coffee/fixtures/calculator.html
...@@ -7,18 +7,6 @@ ...@@ -7,18 +7,6 @@
<input type="text" id="calculator_input" tabindex="-1" /> <input type="text" id="calculator_input" tabindex="-1" />
<div class="help-wrapper"> <div class="help-wrapper">
<a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1">Hints</a> <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>
</div> </div>
<input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" /> <input id="calculator_button" type="submit" title="Calculate" arial-label="Calculate" value="=" tabindex="-1" />
...@@ -26,4 +14,18 @@ ...@@ -26,4 +14,18 @@
</form> </form>
</div> </div>
</li> </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> </ul>
lms/static/coffee/spec/calculator_spec.coffee
...@@ -61,35 +61,35 @@ describe 'Calculator', -> ...@@ -61,35 +61,35 @@ describe 'Calculator', ->
describe 'showHint', -> describe 'showHint', ->
it 'show the help overlay', -> it 'show the help overlay', ->
@calculator.showHint() @calculator.showHint()
expect($('.help')).toHaveClass('shown') expect($('.calc-help-popup')).toHaveClass('shown')
expect($('.help')).toHaveAttr('aria-hidden', 'false') expect($('.calc-help-popup')).toHaveAttr('aria-hidden', 'false')
describe 'hideHint', -> describe 'hideHint', ->
it 'show the help overlay', -> it 'show the help overlay', ->
@calculator.hideHint() @calculator.hideHint()
expect($('.help')).not.toHaveClass('shown') expect($('.calc-help-popup')).not.toHaveClass('shown')
expect($('.help')).toHaveAttr('aria-hidden', 'true') expect($('.calc-help-popup')).toHaveAttr('aria-hidden', 'true')
describe 'handleClickOnHintButton', -> describe 'handleClickOnHintButton', ->
it 'on click hint button hint popup becomes visible ', -> it 'on click hint button hint popup becomes visible ', ->
e = jQuery.Event('click'); e = jQuery.Event('click');
$('#calculator_hint').trigger(e); $('#calculator_hint').trigger(e);
expect($('.help')).toHaveClass 'shown' expect($('.calc-help-popup')).toHaveClass 'shown'
describe 'handleClickOnDocument', -> describe 'handleClickOnDocument', ->
it 'on click out of the hint popup it becomes hidden', -> it 'on click out of the hint popup it becomes hidden', ->
@calculator.showHint() @calculator.showHint()
e = jQuery.Event('click'); e = jQuery.Event('click');
$(document).trigger(e); $(document).trigger(e);
expect($('.help')).not.toHaveClass 'shown' expect($('.calc-help-popup')).not.toHaveClass 'shown'
describe 'handleClickOnHintPopup', -> describe 'handleClickOnHintPopup', ->
it 'on click of hint popup it remains visible', -> it 'on click of hint popup it remains visible', ->
@calculator.showHint() @calculator.showHint()
e = jQuery.Event('click'); e = jQuery.Event('click');
$('#calculator_input_help').trigger(e); $('#calculator_input_help').trigger(e);
expect($('.help')).toHaveClass 'shown' expect($('.calc-help-popup')).toHaveClass 'shown'
describe 'selectHint', -> describe 'selectHint', ->
it 'select correct hint item', -> it 'select correct hint item', ->
......
lms/static/coffee/src/calculator.coffee
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
class @Calculator class @Calculator
constructor: -> constructor: ->
@hintButton = $('#calculator_hint') @hintButton = $('#calculator_hint')
@hintPopup = $('.help') @hintPopup = $('.calc-help-popup')
@hintsList = @hintPopup.find('.hint-item') @hintsList = @hintPopup.find('.hint-item')
@selectHint($('#' + @hintPopup.attr('aria-activedescendant'))); @selectHint($('#' + @hintPopup.attr('aria-activedescendant')));
......
lms/static/sass/course/modules/_calculator.scss
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
@include transition(bottom $tmg-avg linear 0s); @include transition(bottom $tmg-avg linear 0s);
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
direction: ltr;
&.open { &.open {
bottom: -36px; bottom: -36px;
...@@ -52,17 +53,6 @@ ...@@ -52,17 +53,6 @@
background: $black; background: $black;
color: $white; 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 { form {
@extend .clearfix; @extend .clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -157,6 +147,7 @@ ...@@ -157,6 +147,7 @@
border: none; border: none;
background: url("#{$static-path}/images/info-icon.png") center center no-repeat; background: url("#{$static-path}/images/info-icon.png") center center no-repeat;
color: $white; color: $white;
cursor: pointer;
&:focus { &:focus {
outline: 5px auto #5b9dd9; outline: 5px auto #5b9dd9;
...@@ -169,47 +160,85 @@ ...@@ -169,47 +160,85 @@
color: $white; color: $white;
} }
} }
}
}
}
}
}
.help { .calc-help-popup {
@include transition(none); @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 { position: fixed;
font-weight: bold; left: 180px;
} right: 180px;
top: 70px;
bottom: 90px;
overflow: auto;
p, p+p { background: $white;
margin: 0; 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 { color: #333;
margin: 10px auto; padding: 10px;
td, th { pointer-events: none;
padding: 2px 15px; 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;
}
} }
lms/templates/calculator/toggle_calculator.html
...@@ -17,121 +17,7 @@ from django.core.urlresolvers import reverse ...@@ -17,121 +17,7 @@ from django.core.urlresolvers import reverse
<div class="help-wrapper"> <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> <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>
<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> <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>
<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">',
math_link_end='</a>',
guide_link_start='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/index.html">',
guide_link_end='</a>',
)}</span></p>
</li>
<li class="hint-item" id="hint-tips"><p><span class="bold">${_("Tips")}:</span> </p>
<ul>
<li class="hint-item" id="hint-paren"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li>
<li class="hint-item" id="hint-spaces"><p>${_("Do not use spaces in expressions.")}</p></li>
<li class="hint-item" id="hint-howto-constants"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li>
<li class="hint-item" id="hint-howto-maffixes"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li>
<li class="hint-item" id="hint-howto-functions"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li>
</ul>
</li>
<li class="hint-item" id="hint-list">
<table class="calculator-input-help-table">
<tbody>
<tr>
<th scope="col">${_("To Use")}</th>
<th scope="col">${_("Type")}</th>
<th scope="col">${_("Examples")}</th>
</tr>
<tr>
<th scope="row">${_("Numbers")}</th>
<td>${_("Integers")}<br />
${_("Fractions")}<br />
${_("Decimals")}
</td>
<td>2520<br />
2/3<br />
3.14, .98
</td>
</tr>
<tr>
<th scope="row">${_("Operators")}</th>
## Translators: Please do not translate mathematical symbols.
<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>x+(2*y)/x-1
x^(n+1)<br />
v_IN+v_OUT<br />
1||2
</td>
</tr>
<tr>
<th scope="row">${_("Greek letters")}</th>
<td>${_("Name of letter")}</td>
<td>alpha<br />
lambda
</td>
</tr>
<tr>
<th scope="row">${_("Constants")}</th>
<td>c, e, g, i, j, k, pi, q, T</td>
<td>20*c<br />
418*T
</td>
</tr>
<tr>
<th scope="row">${_("Affixes")}</th>
<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>
<th scope="row">${_("Basic functions")}</th>
<td>abs, exp, fact or factorial, ln, log2, log10, sqrt</td>
<td>abs(x+y)<br />
sqrt(x^2-y)
</td>
</tr>
<tr>
<th scope="row">${_("Trigonometric functions")}</th>
<td>sin, cos, tan, sec, csc, cot<br />
arcsin, sinh, arcsinh, etc.<br />
</td>
<td>sin(4x+y)<br />
arccsch(4x+y)
</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>${_("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>${_("1e and the exponent")}</td>
<td>1e-9</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div> </div>
</div> </div>
...@@ -140,4 +26,119 @@ from django.core.urlresolvers import reverse ...@@ -140,4 +26,119 @@ from django.core.urlresolvers import reverse
<input type="text" id="calculator_output" readonly /> <input type="text" id="calculator_output" readonly />
</form> </form>
</div> </div>
</div> </div>
<div id="calculator_input_help" class="calc-help-popup" aria-hidden="true">
<ul>
<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">',
math_link_end='</a>',
guide_link_start='<a href="http://edx-guide-for-students.readthedocs.org/en/latest/index.html">',
guide_link_end='</a>',
)}</span></p>
</li>
<li class="hint-item" id="hint-tips"><p><span class="bold">${_("Tips")}:</span> </p>
<ul>
<li class="hint-item" id="hint-paren"><p>${_("Use parentheses () to make expressions clear. You can use parentheses inside other parentheses.")}</p></li>
<li class="hint-item" id="hint-spaces"><p>${_("Do not use spaces in expressions.")}</p></li>
<li class="hint-item" id="hint-howto-constants"><p>${_("For constants, indicate multiplication explicitly (example: 5*c).")}</p></li>
<li class="hint-item" id="hint-howto-maffixes"><p>${_("For affixes, type the number and affix without a space (example: 5c).")}</p></li>
<li class="hint-item" id="hint-howto-functions"><p>${_("For functions, type the name of the function, then the expression in parentheses.")}</p></li>
</ul>
</li>
<li class="hint-item" id="hint-list">
<table class="calculator-input-help-table">
<tbody>
<tr>
<th scope="col">${_("To Use")}</th>
<th scope="col">${_("Type")}</th>
<th scope="col">${_("Examples")}</th>
</tr>
<tr>
<th scope="row">${_("Numbers")}</th>
<td dir="auto">${_("Integers")}<br />
${_("Fractions")}<br />
${_("Decimals")}
</td>
<td dir="auto">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 />
## Translators: Please do not translate mathematical symbols.
${_("^ (raise to a power)")}<br />
## Translators: Please do not translate mathematical symbols.
${_("|| (parallel resistors)")}
</td>
<td dir="auto">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">${_("Constants")}</th>
<td dir="auto">c, e, g, i, j, k, pi, q, T</td>
<td dir="auto">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 />
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 />
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 />
arcsin, sinh, arcsinh, etc.<br />
</td>
<td dir="auto">sin(4x+y)<br />
arccsch(4x+y)
</td>
<td dir="auto"></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>
</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>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment