Display classes mode

hourglass/client/main/main.css

@@ -279,6 +279,52 @@ input {
 	margin: 0;
 }
 
+#classesMode {
+	width: 100%;
+	height: 100%;
+	display: inline-block;
+}
+
+.mainClass {
+	width: 15%;
+	margin: 2%;
+	margin-right: 0;
+
+	box-shadow: 2px 2px 5px 3px #666;
+	float: left;
+}
+
+.classInfo {
+	padding: 6%;
+	background-color: rgba(255,255,255,0.3); /* remove when class color */
+}
+
+.mainClassName {
+	font-size: 160%;
+
+	-webkit-filter: none;
+	filter: none;
+}
+
+.mainClassHour {
+	margin-top: 0;
+}
+
+.creWork {
+	-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
+}
+
+.creWork:hover {
+	background-color: rgba(0,0,0,0.05);
+}
+
+.creWork h4 {
+	padding-left: 0;
+}
+
 .overlay {
 	width: 100%;
 	height: 100%;

hourglass/client/main/main.html

@@ -41,7 +41,13 @@
     <img id="bg" src={{bgSrc}}>
     <div id="mainBody">
         {{#if currMode 'classes'}}
+            <div id="classesMode">
+                {{#each myClasses}}
+                    {{> classesMode}}
+                {{/each}}
+            </div>
         {{/if}}
+
         {{#if currMode 'calendar'}}
         <div id="calbg" style="{{calbg}}"></div>
             <div id="calendar" style="{{calCenter}}">
@@ -63,4 +69,21 @@
         <p class="sideClassName">{{name}}</p>
         <p class="sideClassHour">{{hour}}</p>
     </div>
+</template>
+
+<template name="classesMode">
+    <div class="mainClass" style="background-color:{{divColor 'header'}}">
+        <div class="classInfo"> <!-- class color -->
+            <h3 class="mainClassName">{{name}}</h3>
+            <p class="mainClassHour">{{hour}}</p>
+            <p class="mainClassTeacher">{{teacher}}</p>
+        </div>
+        <div class="creWork">
+            <i class="fa fa-plus" aria-hidden="true"></i>
+            <h4>Add Work</h4>
+        </div>
+        <!-- {{#each myWork}}
+            {{> classModeWork}}
+        {{/each}} -->
+    </div>
 </template>

hourglass/client/main/main.js

@@ -31,13 +31,6 @@ var calendarColors = {
     "quiz": "black"
 };
 
-var options = {
-    "privacy": ["Public", "Hidden"],
-    "category": ["Class", "Club", "Other"]
-};
-
-var searchSchools = [];
-
 Session.set("calendarclasses", null);
 Session.set("sidebar", null);
 Session.set("mode", null); // Change to user preferences