More admin page functionality

hourglass/client/admin/admin.css

@@ -1,3 +1,8 @@
+#copyArea {
+	position: absolute;
+	top: -50px;
+}
+
 #adminBanner {
 	width: 100%;
 	height: 32%;
@@ -114,7 +119,7 @@
 }
 
 .classItem {
-	width: 20%;
+	width: 23%;
 	margin: 2% 0 2% 2%;
 	padding: 1.5%;
 
@@ -140,26 +145,71 @@
 	display: table-row;
 }
 
+.keyContainer .fa-plus, .keyContainer .fa-times {
+	-webkit-filter: none;
+	filter: none;
+
+	cursor: pointer;
+
+	-webkit-transition: color 0.5s ease;  
+	-moz-transition: color 0.5s ease; 
+	-ms-transition: color 0.5s ease;
+	transition: color 0.5s ease;
+}
+
+.keyContainer .fa-plus:hover {
+	color: #519C39;
+}
+
+.keyContainer .fa-times {
+	margin-left: 5%;
+}
+
+.keyContainer .fa-times:hover {
+	color: #CC4444;
+}
+
 .key {
 	font-weight: 400;
 	font-size: 120%;
-	width: 40%;
+	width: 30%;
 	padding-top: 2%;
 	display: table-cell;
 }
 
 .modify {
-	width: 60%;
+	width: 50%;
 	padding: 0;
 	display: table-cell;
 }
 
+.fa-files-o, .fa-pencil-square-o {
+	width: 10%;
+	display: table-cell;
+	cursor: pointer;
+
+	-webkit-transition: color 0.5s ease;  
+	-moz-transition: color 0.5s ease; 
+	-ms-transition: color 0.5s ease;
+	transition: color 0.5s ease;
+}
+
+.fa-files-o:hover {
+	color: #E6E619;
+}
+
+.fa-pencil-square-o:hover {
+	color: #E6B319;
+}
+
 .aUserContainer {
 	margin-left: -50%;
 }
 
-.aUserContainer p {
+#editValue {
-	margin: 0;
+	width: 10%;
-	padding: 1%;
+	margin: auto;
+	margin-top: 30%;
+	background-color: #FEFEFE;
 }
 

hourglass/client/admin/admin.html

@@ -42,60 +42,79 @@
 						<div class="basicInfo">
 							<div class="keyContainer">
 								<span class="key">Name: </span>
-								<span class="modify">{{name}}</span>
+								<span class="modify name">{{name}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
 								<span class="key">Hour: </span>
-								<span class="modify">{{hour}}</span>
+								<span class="modify hour">{{hour}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
 								<span class="key">Teacher: </span>
-								<span class="modify">{{teacher}}</span>
+								<span class="modify teacher">{{teacher}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
 								<span class="key">School: </span>
-								<span class="modify">{{school}}</span>
+								<span class="modify school">{{school}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
 								<span class="key">Category: </span>
-								<span class="modify">{{category}}</span>
+								<span class="modify category">{{category}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
 								<span class="key">Privacy: </span>
-								<span class="modify">{{privacy}}</span>
+								<span class="modify privacy">{{privacy}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
 								<span class="key">Code: </span>
-								<span class="modify">{{code}}</span>
+								<span class="modify code">{{code}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 						</div>
 						<h2>User Info</h2>
 						<div class="userInfo">
 							<div class="keyContainer">
 								<span class="key">Creator: </span>
-								<span class="modify">{{admin}}</span>
+								<span class="modify admin">{{admin}}</span>
+								<i class="fa fa-files-o" aria-hidden="true"></i>
+								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
 							</div>
 							<div class="keyContainer">
-								<span class="key">Subscribers: </span><br>
+								<span class="key">Subscribers: </span>
+								<i class="fa fa-plus" aria-hidden="true"></i><br>
 								<div class="aUserContainer">
 									{{#each subscribers}}
-										<p>{{email}}</p>
+										{{> adminUserBox}}
 									{{/each}}
 								</div>	
 							</div>
 							<div class="keyContainer">
-								<span class="key">Moderators: </span><br>
+								<span class="key">Moderators: </span>
+								<i class="fa fa-plus" aria-hidden="true"></i><br>
 								<div class="aUserContainer">
 									{{#each moderators}}
-										<p>{{email}}</p>
+										{{> adminUserBox}}
 									{{/each}}
 								</div>
 							</div>
 							<div class="keyContainer">
-								<span class="key">Banned: </span><br>
+								<span class="key">Banned: </span>
+								<i class="fa fa-plus" aria-hidden="true"></i><br>
 								<div class="aUserContainer">
 									{{#each banned}}
-										<p>{{email}}</p>
+										{{> adminUserBox}}
 									{{/each}}
 								</div>
 							</div>
@@ -121,4 +140,20 @@
 			{{/if}}
 		</div>
 	</div>
+	<div class="overlay">
+		<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>
+  			<i class="fa fa-times-circle-o" aria-hidden="true"></i>
+		</div>
+	</div>
+	<input id="copyArea">
+</template>
+
+<template name="adminUserBox">
+	<span>{{email}}</span>
+	{{#if none}}
+		<i class="fa fa-times" aria-hidden="true"></i>
+	{{/if}}
 </template>

hourglass/client/admin/admin.js

@@ -29,17 +29,19 @@ Template.admin.helpers({
 						userClasses[i].code = "None";
 					}
 					userClasses[i].category = userClasses[i].category.charAt(0).toUpperCase() + userClasses[i].category.slice(1);
-
 					userClasses[i].admin = getEmail(userClasses[i].admin);
 					var types = ["subscribers","moderators","banned"];
 					for(var j = 0; j < types.length; j++) {
+
 						if(userClasses[i][types[j]].length === 0) {
-							userClasses[i][types[j]][k] = {"email":"None"};
+							userClasses[i][types[j]][k] = {"email":"None","none":false};
 							continue;
 						}
+
 						for(var k = 0; k < userClasses[i][types[j]].length; k++) {
 							userClasses[i][types[j]][k] =  {
-								"email": getEmail(userClasses[i][types[j]][k])
+								"email": getEmail(userClasses[i][types[j]][k]),
+								"none":true
 							};
 						}
 					}
@@ -61,6 +63,14 @@ Template.admin.helpers({
 Template.admin.events({
 	'click #adminTabs li' (event) {
 		Session.set("adminTab",event.target.id);
+	},
+	'click .fa-files-o' (event) {
+		document.getElementById("copyArea").value = event.target.parentNode.childNodes[3].childNodes[0].nodeValue;
+		document.getElementById("copyArea").select();
+		document.execCommand("copy");
+	},
+	'click .fa-pencil-square-o' (event) {
+		var value = event.target.parentNode.childNodes[3].className.replace("modify ","");
 	}
 });
 

hourglass/client/main/main.css

@@ -40,10 +40,10 @@ html {
     -ms-user-select: none;
     user-select: none;
 
-	-webkit-transition: color 0.5s ease  
+	-webkit-transition: color 0.5s ease;  
-	-moz-transition: color 0.5s ease 
+	-moz-transition: color 0.5s ease; 
-	-ms-transition: color 0.5s ease
+	-ms-transition: color 0.5s ease;
-	transition: color 0.5s ease 
+	transition: color 0.5s ease;
 }
 
 ::-webkit-input-placeholder {