initial polyfill implementation and metadata number entry javascript validation

cms/static/client_templates/metadata_number_entry.html

 <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>

cms/static/js/base.js

@@ -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('');
+    }
+}
+
+

cms/static/sass/views/_unit.scss

@@ -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;

cms/templates/base.html

@@ -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>

common/static/css/vendor/html5-input-polyfills/number-polyfill.css

+/* 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%; }