Added user classes display in sidebar

hourglass/client/main/main.css

@@ -238,20 +238,45 @@ input {
 
 #classListHolder {
 	max-height: 48%;
-	width: 90%;
+	width: 100%;
 	margin-bottom: 30%;
-	padding: 8%;
 	padding-right: 50%;
 
-	display: none;
 	position: absolute;
 	overflow-y: auto;
-	opacity: 0;
+}
 
-	-webkit-transition: opacity 0.4s ease;  
+#classListHolder h3 {
-	-moz-transition: opacity 0.4s ease; 
+	font-weight: 200;
-	-ms-transition: opacity 0.4s ease;
+	margin: 5%;
-	transition: opacity 0.4s ease;
+}
+
+.sideClass {
+	width: 100%;
+	height: 10%;
+	padding: 5%;
+
+	background-color: rgba(255,255,255,0.1);
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease; 
+}
+
+.sideClass:hover {
+	background-color: rgba(255,255,255,0.3);
+}
+
+.sideClassName {
+	font-weight: 600;
+	margin: 0;
+}
+
+.sideClassHour {
+	font-weight: 400;
+	color: #444;
+	margin: 0;
 }
 
 .overlay {

hourglass/client/main/main.html

@@ -30,7 +30,10 @@
             </div>
         </div>
         <div id="classListHolder">
-            
+        <h3>Enrolled</h3>
+            {{#each myclasses}}
+                {{> sidebarClasses}}  
+            {{/each}}
         </div>
     </div>
     <div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
@@ -54,3 +57,10 @@
         </div>
     </div>
 </template>
+
+<template name="sidebarClasses">
+    <div class="sideClass">
+        <p class="sideClassName">{{name}}</p>
+        <p class="sideClassHour">{{hour}}</p>
+    </div>
+</template>

hourglass/client/main/main.js

@@ -139,6 +139,18 @@ Template.main.helpers({
         var width = window.innerWidth * 0.865;
         var height = window.innerHeight * 0.76;
         return "width:" + width.toString() + "px;height:" + height.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;margin-top:" + (0.47 * window.innerHeight - 0.5 * height).toString() + "px";
+    },
+    myclasses() {
+    	if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) {
+    		return [];
+    	} else {
+    		var array = [];
+    		var courses = Meteor.user().profile.classes;
+    		for(var i = 0; i < courses.length; i++) {
+    			array.push(classes.findOne({_id:courses[i]}));
+    		}
+    		return array;
+    	}
     }
 });