prototype for polyfill on number input fields, minimal styling to up down buttons

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") %>' onkeyup="checkNumberSettingValidity(this);"/>
+	<input class="input setting-input setting-input-number" type="number" id="<%= uniqueId %>" value='<%= model.get("value") %>' onkeyup="checkNumberValidity(this)"/>
 	<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/coffee/src/views/module_edit.coffee

@@ -30,8 +30,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
           });
 
       #Manually runs polyfill for input number types to correct for Firefox non-support
-      #wrapperSettings = @$el.find(".wrapper-comp-settings")
-      #wrapperSettings.inputNumber()
+      #numberPolyfill()
 
       # Need to update set "active" class on data editor if there is one.
       # If we are only showing settings, hide the data editor controls and update settings accordingly.

cms/static/js/base.js

@@ -897,16 +897,9 @@ function saveSetSectionScheduleDate(e) {
     });
 }
 
-function checkNumberSettingValidity(e) {
-    e.preventDefault();
-
-    if (!e.checkNumberSettingValidity())
-    {
-        alert("You have invalid input. Correct it!");
-        obj.focus();
-
-        $('this').val('');
-    }
+function checkNumberValidity(e) {
+    e.preventDefault;
+    $(e).val($(e).val().match(/\d*\.?\d+/));
 }
 
 

cms/static/sass/views/_unit.scss

@@ -619,9 +619,11 @@ body.course.unit {
 
       .wrapper-comp-setting{
         display: inline-block;
-        width: 360px;
+        min-width: 300px;
+        width: 45%;
         top: 0;
         vertical-align: top;
+        margin-bottom:5px;
       }
 
       label.setting-label {
@@ -669,7 +671,7 @@ body.course.unit {
       }
 
       input[type="number"] {
-        width: 39%;
+        width: 36%;
         @include box-shadow(0 1px 2px $shadow-l1 inset);
 
         &:active {
@@ -720,7 +722,6 @@ body.course.unit {
 
       .tip.setting-help {
         @include font-size(12);
-        margin-top: 5px;
         display: inline-block;
         font-color: $gray-l6;
         min-width: 260px;

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

@@ -2,8 +2,9 @@
 div.number-spin-btn-container {
   display: inline-block;
   position: relative;
-  vertical-align: bottom;
+  vertical-align: top;
   margin: 0;
+  margin-left: 3px;
   padding: 0; }
 
 div.number-spin-btn {
@@ -13,9 +14,11 @@ div.number-spin-btn {
   border-width: 2px;
   border-color: #ededed #777777 #777777 #ededed;
   border-style: solid;
-  background-color: #cccccc;
+  background-color: #eeeeee;
   width: 1.2em; }
   div.number-spin-btn:hover {
+    /* added blue hover color */
+    background-color: rgb(85, 151, 221);
     cursor: pointer; }
   div.number-spin-btn:active {
     border-width: 2px;

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

@@ -3,8 +3,9 @@
 /*
 HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-polyfill
 */
+function numberPolyfill() {
 
-(function() {
+  (function() {
 
     (function($) {
       var i;
@@ -295,4 +296,6 @@ HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-poly
       return null;
     })(jQuery);
 
-}).call(this);
+  }).call(this);
+
+};