Added character restrictions, Usage: add attribute "restrict=[\'max\']" in the DOM

hourglass/client/main/main.css

@@ -21,7 +21,7 @@ Tag { Always spaces between values
 	Animation related items
 }*/
 
-@import url(https://fonts.googleapis.com/css?family=Raleway:200,400,600);
+@import url(https://fonts.googleapis.com/css?family=Raleway:200,300italic,400,600);
 
 html {
 	font-family: 'Raleway';
@@ -373,7 +373,7 @@ select {
 }
 
 .fa-times-circle-o:active {
-	color: #ff1A1A;
+	color: #FF1A1A;
 
 	-webkit-transition: background-color 0.2s ease;  
 	-moz-transition: background-color 0.2s ease; 

hourglass/client/profile/profile.css

@@ -69,7 +69,7 @@
 #motdBox span {
 	font-size: 130% !important;
 	margin: 0;
-	color: #FFF !important;
+	color: #FFF;
 }
 
 .username {
@@ -276,3 +276,11 @@
 	display: none;
 }
 
+#restrict {
+	font-size: 100%;
+	font-style: italic;
+	font-weight: 300;
+	padding-left: 1%;
+	color: #999 !important;
+}
+

hourglass/client/profile/profile.html

@@ -4,7 +4,7 @@
 			<div id="profBanner" style="{{banner}};"></div>
 			<div id="profAvatar" style="{{avatar}};{{avatarDim}}"></div>
 			<div id="motdBox">
-				<span class="username">{{username}} - </span><span class="change mo" id="motd">{{motd}}</span>
+				<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
 			</div>
 			<div id="profCards">
 				<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">

hourglass/client/profile/profile.js

@@ -155,7 +155,6 @@ Template.profile.events({
 		
 		if(ele.getAttribute("type") !== null) {
 			input.type = ele.getAttribute("type");
-			
 		} else {
 			input.type = "text";
 		}
@@ -172,7 +171,18 @@ Template.profile.events({
 		} else {
 			input.select();
 		}
-		input.focus();		
+		input.focus();
+		if(ele.getAttribute("restrict") !== null) {
+			var span = document.createElement("span");
+			span.id = "restrict";
+			var num = parseInt(ele.getAttribute("restrict"))-input.value.length;
+			if(num <= 0) {
+				span.style.setProperty("color","#FF1A1A","important");
+				num = 0;
+			}
+			span.appendChild(document.createTextNode(num.toString()+" characters left"));
+			ele.parentNode.appendChild(span);
+		}	
 	},
 	'click' (event) {
 		var sessval = Session.get("modifying");
@@ -183,13 +193,30 @@ Template.profile.events({
 			closeDivFade(document.getElementsByClassName("profOptions")[Session.get("radioDiv")]);
 		}	
 	},
-	'keyup' (event) {
+	'keydown' (event) {
 		var sessval = Session.get("modifying");
 		if(event.keyCode == 13) {
 			try {
 				closeInput(sessval);
 			} catch(err) {}
 		}
+		var restrict = document.getElementById(sessval).getAttribute("restrict");
+		if(restrict !== null) {
+			var num = parseInt(restrict)-event.target.value.length;
+			var restext = document.getElementById("restrict");
+			if(num === 1) {
+				restext.childNodes[0].nodeValue = num.toString()+" character left";
+				restext.style.setProperty("color","#999","important");
+			} else if(num <= 0) {
+				var input = document.getElementById(sessval+"a");
+				input.value = input.value.substring(0,parseInt(restrict));
+				restext.childNodes[0].nodeValue = "0 characters left";
+				restext.style.setProperty("color","#FF1A1A","important");
+			} else {
+				restext.childNodes[0].nodeValue = num.toString()+" characters left";
+				restext.style.setProperty("color","#999","important");
+			}
+		}
 	},
 	'click .radio' (event) {
 		Session.set("radioDiv", event.target.getAttribute("op"));
@@ -235,7 +262,7 @@ Template.profile.events({
 	'click .fa-times-thin' () {
 		Session.set("searching",false);
 	},
-	'keyup #profClassSearch' (event) {
+	'keydown #profClassSearch' (event) {
 		if(event.target.value === "") {
 			Session.set("notsearching",true);
 		} else {
@@ -299,6 +326,10 @@ function closeInput(sessval) {
 	var input = document.getElementById(sessval+"a");
 	var span = document.getElementById(sessval);
 	input.parentNode.removeChild(input);
+	try{
+		var restrict = document.getElementById("restrict");
+		restrict.parentNode.removeChild(restrict)
+	} catch(err) {}
 	if(input.value == "") {
 		span.childNodes[0].nodeValue = "Click here to edit...";
 	} else {

hourglass/server/main.js

@@ -88,7 +88,7 @@ Meteor.methods({
     current.avatar = change[3];
     current.banner = change[4];
     if (schools.findOne({name:current.school}) != null && Number.isInteger(current.grade) &&
-    current.grade >= 9 && current.grade <= 12 && current.description.length <= 100) {
+    current.grade >= 9 && current.grade <= 12 && current.description.length <= 50) {
       Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}});
       return 1;
     } else {