Skip to content

E
edx-platform
Commit 6627153e by Kyle Fiedler
Options

Added styles for the calc hint

parent 8c893ab3
Showing with 132 additions and 37 deletions
static/css/application.css
...@@ -117,7 +117,7 @@ input, select { ...@@ -117,7 +117,7 @@ input, select {
font-weight: 800; font-weight: 800;
font-style: italic; } font-style: italic; }
.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { .clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, div#graph-container:after, div#schematic-container:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after {
content: "."; content: ".";
display: block; display: block;
height: 0; height: 0;
...@@ -702,22 +702,6 @@ li.calc-main div#calculator_wrapper { ...@@ -702,22 +702,6 @@ li.calc-main div#calculator_wrapper {
clear: both; } clear: both; }
li.calc-main div#calculator_wrapper form { li.calc-main div#calculator_wrapper form {
padding: 22.652px; } padding: 22.652px; }
li.calc-main div#calculator_wrapper form input#calculator_input {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
padding: 10px;
width: 61.741%;
margin: 0;
float: left; }
li.calc-main div#calculator_wrapper form input#calculator_input:focus {
outline: none;
border: none; }
li.calc-main div#calculator_wrapper form input#calculator_button { li.calc-main div#calculator_wrapper form input#calculator_button {
background: #111; background: #111;
border: 1px solid #000; border: 1px solid #000;
...@@ -758,14 +742,81 @@ li.calc-main div#calculator_wrapper form input#calculator_output { ...@@ -758,14 +742,81 @@ li.calc-main div#calculator_wrapper form input#calculator_output {
margin: 1px 0 0; margin: 1px 0 0;
padding: 10px; padding: 10px;
width: 31.984%; } width: 31.984%; }
li.calc-main div#calculator_wrapper dl { li.calc-main div#calculator_wrapper form div.input-wrapper {
display: none; } position: relative;
li.calc-main div#calculator_wrapper dl dt { width: 61.741%;
margin: 0;
float: left; }
li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_input {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
padding: 10px;
width: 100%; }
li.calc-main div#calculator_wrapper form div.input-wrapper input#calculator_input:focus {
outline: none;
border: none; }
li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper {
position: absolute;
right: 8px;
top: 15px; }
li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper a {
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 17px;
background: url("/static/images/info-icon.png") center center no-repeat; }
li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #999999;
-moz-box-shadow: 0 0 3px #999999;
box-shadow: 0 0 3px #999999;
color: #333;
opacity: 0;
padding: 10px;
position: absolute;
right: -40px;
top: -110px;
width: 500px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl.shown {
opacity: 1; }
li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl dt {
clear: both; clear: both;
float: left; float: left;
font-weight: bold; font-weight: bold;
padding-right: 11.326px; } padding-right: 11.326px; }
li.calc-main div#calculator_wrapper dl dd { li.calc-main div#calculator_wrapper form div.input-wrapper div.help-wrapper dl dd {
float: left; } float: left; }
#lean_overlay { #lean_overlay {
......
templates/main.html
...@@ -57,7 +57,11 @@ ...@@ -57,7 +57,11 @@
<div id="calculator_wrapper"> <div id="calculator_wrapper">
<form id="calculator"> <form id="calculator">
<div class="input-wrapper">
<input type="text" id="calculator_input" /> <input type="text" id="calculator_input" />
<div class="help-wrapper">
<a href="#">Help</a>
<dl class="help"> <dl class="help">
<dt>Suffixes:</dt> <dt>Suffixes:</dt>
<dd> %kMGTcmunp</dd> <dd> %kMGTcmunp</dd>
...@@ -72,6 +76,8 @@ ...@@ -72,6 +76,8 @@
<dt>Unsupported:</dt> <dd>||, j </dd> --> <dt>Unsupported:</dt> <dd>||, j </dd> -->
</dl> </dl>
</div>
</div>
<input id="calculator_button" type="submit" value="="/> <input id="calculator_button" type="submit" value="="/>
<input type="text" id="calculator_output" readonly /> <input type="text" id="calculator_output" readonly />
</form> </form>
...@@ -133,6 +139,10 @@ $(function() { ...@@ -133,6 +139,10 @@ $(function() {
$(this).toggleClass("closed"); $(this).toggleClass("closed");
}); });
$("div.help-wrapper a").hover(function(){
$(".help").toggleClass("shown");
});
$("form#calculator").submit(function(e){ $("form#calculator").submit(function(e){
e.preventDefault(); e.preventDefault();
$.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")}, $.getJSON("/calculate", {"equation":$("#calculator_input").attr("value")},
......
templates/sass/layout/_calculator.scss
...@@ -34,21 +34,6 @@ li.calc-main { ...@@ -34,21 +34,6 @@ li.calc-main {
padding: lh(); padding: lh();
@extend .clearfix; @extend .clearfix;
input#calculator_input {
border: none;
@include box-shadow(none);
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
width: flex-grid(7.5);
margin: 0;
float: left;
&:focus {
outline: none;
border: none;
}
}
input#calculator_button { input#calculator_button {
background: #111; background: #111;
...@@ -83,10 +68,56 @@ li.calc-main { ...@@ -83,10 +68,56 @@ li.calc-main {
padding: 10px; padding: 10px;
width: flex-grid(4); width: flex-grid(4);
} }
div.input-wrapper {
position: relative;
@extend .clearfix;
width: flex-grid(7.5);
margin: 0;
float: left;
input#calculator_input {
border: none;
@include box-shadow(none);
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
width: 100%;
&:focus {
outline: none;
border: none;
}
}
div.help-wrapper {
position: absolute;
right: 8px;
top: 15px;
a {
@include hide-text;
width: 17px;
height: 17px;
background: url("/static/images/info-icon.png") center center no-repeat;
} }
dl { dl {
display: none; background: #fff;
@include border-radius(3px);
@include box-shadow(0 0 3px #999);
color: #333;
opacity: 0;
padding: 10px;
position: absolute;
right: -40px;
top: -110px;
width: 500px;
@include transition();
&.shown {
opacity: 1;
}
dt { dt {
clear: both; clear: both;
...@@ -100,4 +131,7 @@ li.calc-main { ...@@ -100,4 +131,7 @@ li.calc-main {
} }
} }
} }
}
}
}
} }
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