Added css and some js for admin value editing

hourglass/client/admin/admin.css

@@ -209,7 +209,31 @@
 #editValue {
 	width: 10%;
 	margin: auto;
-	margin-top: 30%;
+	margin-top: 22%;
+	padding: 1.2%;
 	background-color: #FEFEFE;
 }
 
+#editValue p {
+	margin: 0;
+	padding: 3%;
+}
+
+#editValue div {
+	width: 100%;
+	margin: auto;
+	margin-top: 8%;
+	display: table;
+}
+
+#editValue i {
+	font-size: 5vh;
+	width: 40%;
+	margin: auto;
+	display: table-cell;
+	text-align: center;
+}
+
+#valueArea {
+	width: 92.5%;
+}

hourglass/client/admin/admin.html

@@ -144,8 +144,10 @@
 		<div id="editValue" style="background-color:{{divColor 'header'}} ">
 			<p>New Value</p>
 			<input id="valueArea">
-			<i class="fa fa-check-circle-o" aria-hidden="true"></i>
+			<div>
-  			<i class="fa fa-times-circle-o" aria-hidden="true"></i>
+				<i class="fa fa-check-circle-o" aria-hidden="true"></i>
+  				<i class="fa fa-times-circle-o" aria-hidden="true"></i>
+  			</div>
 		</div>
 	</div>
 	<input id="copyArea">

hourglass/client/admin/admin.js

@@ -71,9 +71,25 @@ Template.admin.events({
 	},
 	'click .fa-pencil-square-o' (event) {
 		var value = event.target.parentNode.childNodes[3].className.replace("modify ","");
+		openDivFade(document.getElementsByClassName("overlay")[0]);
 	}
 });
 
+function openDivFade(div) {
+    div.style.display = "block";
+    div.style.opacity = "0";
+    setTimeout(function() {
+        div.style.opacity = "1";
+    }, 100);
+}
+
+function closeDivFade(div) {
+    div.style.opacity = "0";
+    setTimeout(function() {
+        div.style.display = "none";
+    }, 100);
+}
+
 function getEmail(id) {
 	return Meteor.users.findOne({_id:id}).services.google.email;
 }

hourglass/client/main/main.css

@@ -458,7 +458,7 @@ input, textarea {
 
 #workNameDiv {
 	padding: 4% 4% 0 3.5%;
-}
+}f
 
 #workName {
 	font-weight: 400;
@@ -473,6 +473,7 @@ input, textarea {
 }
 
 .prefTitle {
+	font-size: 2.5vh;
 	margin-top: 5%;
 }
 
@@ -625,11 +626,6 @@ input, textarea {
 }
 
 .fa-check-circle-o, .fa-times-circle-o {
-	font-size: 300%;
-	padding: 5% 13% 5% 13%;
-
-	color: #333;
-
 	-webkit-transition: color 0.4s ease;  
 	-moz-transition: color 0.4s ease; 
 	-ms-transition: color 0.4s ease;