Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial polyfill implementation and metadata number entry javascript validation

Browse Source
This commit is contained in:
marco
2013-05-14 23:55:34 -04:00
parent 98e692d15e
commit 47a4d6b6a1
5 changed files with 104 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/static/client_templates/metadata_number_entry.html
View File

@@ -1,6 +1,6 @@
<div class="wrapper-comp-setting">
<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
<input class="input setting-input" type="number" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
<input class="input setting-input" type="number" id="<%= uniqueId %>" value='<%= model.get("value") %>' onblur="this.checkNumberSettingValidity();"/>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i><span class="sr">Clear Value</span>
</button>

14
cms/static/js/base.js
View File

@@ -896,3 +896,17 @@ function saveSetSectionScheduleDate(e) {
hideModal();
});
}
function checkNumberSettingValidity(e) {
e.preventDefault();
if (!e.checkNumberSettingValidity())
{
alert("You have invalid input. Correct it!");
obj.focus();
$('this').val('');
}
}

8
cms/static/sass/views/_unit.scss
View File

@@ -517,12 +517,12 @@ body.course.unit {
&.is-set {
@include linear-gradient($blue, $blue);
color: $blue-d1;
box-shadow: inset 0 3px 3px $shadow-d1;
box-shadow: inset 0 2px 2px $shadow-d1;
background-color: $blue;
cursor: default;
&:hover {
box-shadow: inset 0 3px 3px $shadow-d1;
box-shadow: inset 0 2px 2px $shadow-d1;
background-color: $blue;
}
}
@@ -664,6 +664,10 @@ body.course.unit {
text-overflow: ellipsis;
}
input[type="number"] {
width: 39%;
}
select {
@include box-shadow(0 1px 2px $shadow-l1 inset);
background: none repeat scroll #F2F2F2;

4
cms/templates/base.html
View File

@@ -22,6 +22,7 @@
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/html5-input-polyfills/number-polyfill.css')}" />
<%include file="widgets/segment-io.html" />
@@ -38,6 +39,8 @@
<script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
<script src="${static.url('js/vendor/html5-input-polyfills/number-polyfill.js')}"></script>
<%static:js group='main'/>
<%static:js group='module-js'/>
@@ -49,7 +52,6 @@
<script src="${static.url('js/vendor/jquery.smooth-scroll.min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
<script src="${static.url('js/vendor/html5-input-polyfills/number-polyfill.js')}"></script>
<!--TODO: not the right place-->
<script type="text/javascript" src="${static.url('js/models/metadata_model.js')}"></script>

80
common/static/css/vendor/html5-input-polyfills/number-polyfill.css vendored Normal file
View File

@@ -0,0 +1,80 @@
/* HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-polyfill*/
div.number-spin-btn-container {
display: inline-block;
position: relative;
vertical-align: bottom;
margin: 0;
padding: 0; }
div.number-spin-btn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-width: 2px;
border-color: #ededed #777777 #777777 #ededed;
border-style: solid;
background-color: #cccccc;
width: 1.2em; }
div.number-spin-btn:hover {
cursor: pointer; }
div.number-spin-btn:active {
border-width: 2px;
border-color: #5e5e5e #d8d8d8 #d8d8d8 #5e5e5e;
border-style: solid;
background-color: #999999; }
div.number-spin-btn-up {
border-bottom-width: 1px;
-moz-border-radius: 3px 3px 0px 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px; }
div.number-spin-btn-up:before {
border-width: 0 0.3em 0.3em 0.3em;
border-color: transparent transparent black transparent;
top: 25%; }
div.number-spin-btn-up:active {
border-bottom-width: 1px; }
div.number-spin-btn-up:active:before {
border-bottom-color: white;
top: 26%;
left: 51%; }
div.number-spin-btn-down {
border-top-width: 1px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px; }
div.number-spin-btn-down:before {
border-width: 0.3em 0.3em 0 0.3em;
border-color: black transparent transparent transparent;
top: 75%; }
div.number-spin-btn-down:active {
border-top-width: 1px; }
div.number-spin-btn-down:active:before {
border-top-color: white;
top: 76%;
left: 51%; }
div.number-spin-btn-up:before,
div.number-spin-btn-down:before {
content: "";
width: 0;
height: 0;
border-style: solid;
position: absolute;
left: 50%;
margin: -0.15em 0 0 -0.3em;
padding: 0; }
input:disabled + div.number-spin-btn-container > div.number-spin-btn-up:active, input:disabled + div.number-spin-btn-container > div.number-spin-btn-down:active {
border-color: #ededed #777777 #777777 #ededed;
border-style: solid;
background-color: #cccccc; }
input:disabled + div.number-spin-btn-container > div.number-spin-btn-up:before, input:disabled + div.number-spin-btn-container > div.number-spin-btn-up:active:before {
border-bottom-color: #999999;
top: 25%;
left: 50%; }
input:disabled + div.number-spin-btn-container > div.number-spin-btn-down:before, input:disabled + div.number-spin-btn-container > div.number-spin-btn-down:active:before {
border-top-color: #999999;
top: 75%;
left: 50%; }