Manage class menu start layout

hourglass/client/main/main.css

@@ -55,7 +55,7 @@ html {
 
 .formInvalid::-webkit-input-placeholder {
    color: red;
-}s
+}
 
 .formInvalid:-moz-placeholder {
    color: red;  
@@ -135,7 +135,7 @@ body {
 	width: 36vh;
 	z-index: 5;
 }
-a
+
 .noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5,
 .gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 {
 	margin: 0;
@@ -148,7 +148,6 @@ a
 .noScroll h4, .gu-mirror h4 {
 	font-size: 1.9vh;
 	font-weight: 200;
-	padding: 5%;
 
 	display: inline-block;
 
@@ -261,20 +260,9 @@ a
 	margin-top: 6vh;
 }
 
-.sectionTitle {
-	font-weight: 200;
-	font-size: 2vh;
-	width: 100%;
-	padding: 6%;
-	background-color: rgba(255,255,255,0.1);
-}
-
-.sectionTitle h3 {
-	font-size: 2vh;
-}
-
 .mode {
 	width: 100%;
+	height: 6vh;
 	display: table;
 	background-color: rgba(0,0,0,0.1);
 
@@ -308,16 +296,19 @@ a
 
 .mode .fa {
 	width: 10%;
-	padding: 6%;
+	padding: 0 6% 0 6%;
+	line-height: 6vh;
 	display: table-cell;
 }
 
 .mode h4 {
 	width: 74%;
+	line-height: 6vh;
 	display: table-cell;
 }
 
-#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks {
+#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks,
+#divLeftBar .fa-graduation-cap, #divLeftBar .fa-book {
 	font-size: 2vh;
 }
 
@@ -364,7 +355,7 @@ a
 }
 
 .sideClass span {
-	font-weight: 400;
+	font-weight: 200;
 	margin: 0;
 	font-size: 1.7vh;
 	padding: 5%;
@@ -407,73 +398,6 @@ a
 	white-space: nowrap;
 }
 
-#filterWrapper {
-	width: 100%;
-}
-
-.openable {
-	font-weight: 200;
-	padding: 0;
-
-	cursor: pointer;
-
-	-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; 
-}
-
-.openable:hover {
-	background-color: rgba(255,255,255,0.2);
-}
-
-.openable h3:first-child {
-	font-weight: 200;
-	padding: 5%;
-	display: inline-block;
-	pointer-events: none;
-}
-
-.openable .fa {
-	padding: 5%;
-	float: right;
-	display: inline-block;
-	pointer-events: none;
-}
-
-#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child {
-	font-weight: 200;
-	padding: 5%;
-	display: inline-block;
-	pointer-events: none;
-}
-
-#disableFilter {
-	font-weight: 200;
-	font-size: 90%;
-	margin-left: 10%;
-	padding: 4%;
-	background-color: rgba(255,255,255,0.2);
-
-	display: inline-block;
-	cursor: pointer;
-	pointer-events: all;
-	z-index: 2;
-
-	-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;
-}
-
-#disableFilter:hover {
-	background-color: rgba(0,0,0,0.1);
-}
-
-#filterWrapper {
-	display: none;
-}
-
 .mainClass {
 	width: 100%;
 	padding-bottom: 1%;
@@ -504,10 +428,6 @@ a
 	cursor: pointer;
 }
 
-.sectionTitle.downOffset {
-	margin-top: 6vh;
-}
-
 .mainClassName {
 	font-size: 160%;
 	white-space: normal;
@@ -704,10 +624,14 @@ textarea.clickModify {
 }
 
 .prefText {
-	padding: 4%;
+	height: 5vh;
 	background-color: rgba(255,255,255,0.15);
 }
 
+.prefText h3 {
+	line-height: 5vh;
+}
+
 .noneLeft {
 	color: red;
 }

hourglass/client/main/main.html

@@ -53,6 +53,9 @@
                     </div>
                 {{/if}}
 
+                {{#if currSettingMode 'manageClass'}}
+                    {{> manageClass}}
+                {{/if}}
                 
             </div>
         </div>

hourglass/client/main/main.js

@@ -302,8 +302,11 @@ Template.main.helpers({
         if (Session.get("requests")) return "0px";
         return openValues.requests;
     },
-    currMode(name) { // Status of display mode.
+    currMode(mode) { // Status of display mode.
-        return (Session.equals("sidebarMode", "option")) ? Session.equals("settingMode", mode) : Session.equals("mode", name);
+        return Session.equals("mode", mode);
+    },
+    currSettingMode(mode) {
+        return Session.equals("settingMode", mode) && Session.equals("sidebarMode", "option");
     },
     calendarOptions() { // Settings for the calendar, including work displaying.
         return {
@@ -386,9 +389,6 @@ Template.main.helpers({
         var width = window.innerWidth * 0.85;
         return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
     },
-    filterOn() {
-        return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
-    },
     highlight() { // Calendar highlight/scale option.
         var hoverHighlight = Session.get("classDispHover");
         var typeHighlight = Session.get("typeFilterHover");
@@ -456,14 +456,14 @@ Template.main.events({
         }
 
         if (!e.includes("fa-cog") && // Sidebar closing.
-            !e.includes("fa-bars") &&
+        !e.includes("fa-bars") &&
-            !e.includes("fa-question") &&
+        !e.includes("fa-question") &&
-            !document.getElementById("menuContainer").contains(event.target) &&
+        !document.getElementById("menuContainer").contains(event.target) &&
-            !document.getElementById("menuBar").contains(event.target)) {
+        !document.getElementById("menuBar").contains(event.target)) {
-                if(!(e.includes("fc-day") && !e.includes("fc-past"))) {
+            if(!(e.includes("fc-day") && !e.includes("fc-past")) && 
-                    toggleToSidebar(false);
+            !Session.equals("sidebarMode", "option")) {
-                }
+                toggleToSidebar(false);
-                
+            }
         }
 
         if (e === "overlay") { // Overlay closing.
@@ -731,80 +731,6 @@ Template.main.events({
     'click #markReport' () { // Click report button.
         serverData = [Session.get("currentWork")._id, "reports"];
         sendData("toggleWork");
-    },
-    // CLASS FILTERS
-    'click .sideClass' (event) { // Click class list in sidebar.
-        var div = event.target;
-        while (div.getAttribute("classid") === null) div = div.parentNode;
-        var classid = div.getAttribute("classid");
-
-        if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
-            var newSetting = Session.get("currentWork");
-            newSetting.class = classid;
-            Session.set("currentWork", newSetting);
-            openDivFade(document.getElementsByClassName("overlay")[0]);
-        } else { // Normal clicking turns on filter.
-            var array = Session.get("classDisp");
-            if (array.indexOf(classid) !== -1) {
-                array.splice(array.indexOf(classid), 1);
-            } else {
-                array.push(classid);
-            }
-            Session.set("classDisp", array);
-        }
-    },
-    'click .sideFilter' (event) {
-        var div = event.target;
-        while (div.getAttribute("type") === null) div = div.parentNode;
-        var type = div.getAttribute("type");
-
-        var array = Session.get("typeFilter");
-        if (array.indexOf(type) !== -1) {
-            array.splice(array.indexOf(type), 1);
-        } else {
-            array.push(type);
-        }
-        Session.set("typeFilter", array);
-    },
-    'click #disableFilter' () {
-        Session.set("classDisp", []);
-        Session.set("typeFilter", []);
-    },
-    'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
-        var div;
-        if (event.target.className !== "sideClass") {
-            div = event.target.parentNode;
-        } else {
-            div = event.target;
-        }
-        while (div.getAttribute("classid") === null) div = div.parentNode;
-        var classid = div.getAttribute("classid");
-        Session.set("classDispHover", classid);
-    },
-    'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave.
-        if (event.target.className !== "sideClass") {
-            var div = event.target.parentNode;
-            if (div.contains(event.target)) return;
-        }
-        Session.set("classDispHover", null);
-    },
-    'mouseover .sideFilter' (event) {
-        var div;
-        if (event.target.className !== "sideFilter") {
-            div = event.target.parentNode;
-        } else {
-            div = event.target;
-        }
-        while (div.getAttribute("type") === null) div = div.parentNode;
-        var type = div.getAttribute("type");
-        Session.set("typeFilterHover", type);
-    },
-    'mouseleave .sideFilter' (event) {
-        if (event.target.className !== "sideFilter") {
-            var div = event.target.parentNode;
-            if (div.contains(event.target)) return;
-        }
-        Session.set("typeFilterHover", null);
     }
 });
 
@@ -830,6 +756,9 @@ function toggleOptionMenu(toggle, menu) {
 }
 
 function toggleToSidebar(sidebar) {
+    try {
+        $("#backgroundOverlay").fadeOut(250);
+    } catch(err) {}
     if(Session.equals("sidebarMode", sidebar) || !sidebar) {
         $("#menuContainer").hide("slide",  {direction: "left"}, 250);
         $("#divCenter").stop().animate({left: '6vh'}, 250, function() {
@@ -895,6 +824,7 @@ function sendData(funcName) { // Call Meteor function, and do actions after func
                 timeout: 2500
             });
         }
+        document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
     });
 }
 

hourglass/client/menus/menus.css

@@ -0,0 +1,175 @@
+#filterWrapper {
+	width: 100%;
+}
+
+.sectionTitle {
+	font-weight: 200;
+	font-size: 2vh;
+	width: 100%;
+	height: 6vh;
+	background-color: rgba(255,255,255,0.1);
+}
+
+.sectionTitle h3 {
+	font-weight: 200;
+	font-size: 2vh;
+	padding-left: 6%;
+	line-height: 6vh;
+}
+
+.sectionTitle.downOffset {
+	margin-top: 6vh;
+}
+
+.openable {
+	cursor: pointer;
+
+	-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; 
+}
+
+.openable:hover {
+	background-color: rgba(255,255,255,0.2);
+}
+
+.openable h3:first-child {
+	font-weight: 200;
+	display: inline-block;
+	pointer-events: none;
+}
+
+.openable .fa {
+	padding: 6%;
+	float: right;
+	display: inline-block;
+	pointer-events: none;
+}
+
+#disableFilter {
+	font-weight: 200;
+	font-size: 90%;
+	margin-left: 10%;
+	padding: 4%;
+
+	background-color: rgba(255,255,255,0.2);
+
+	display: inline-block;
+	cursor: pointer;
+	line-height: normal;
+	pointer-events: all;
+	z-index: 2;
+
+	-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;
+}
+
+#disableFilter:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+#filterWrapper {
+	display: none;
+}
+
+#backgroundOverlay {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+}
+
+#colLeft, #colRight {
+	height: 100%;
+	display: inline-block;
+}
+
+#colLeft h2, #colRight h2 {
+	padding: 2% 2% 0 3%;
+	font-size: 4vh;
+	font-weight: 300;
+}
+
+#colLeft {
+	width: 52%;
+}
+
+#colRight {
+	border-left: 1px solid #666;
+	float: right;
+	width: 40%;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
+}
+
+#settingClassWrapper {
+	width: 100%;
+	padding: 2% 0 0 5%;
+}
+
+#label {
+	background-color: rgba(0,0,0,0.2);
+	box-shadow: none;
+	border: none;
+
+	display: table;
+	cursor: default;
+}
+
+.classBox {
+	font-size: 1.3vw;
+	width: 100%;
+	margin-bottom: 3%;
+	padding: 2%;
+
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+
+	display: table;
+	table-layout: fixed;
+	cursor: pointer;
+
+	-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;
+}
+
+.classBox:hover {
+	background-color: rgba(0,0,0,0.3);
+}
+
+.owned {
+	box-shadow: inset 0 0 0 99999px rgba(255,255,255,0.3);
+	-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;
+}
+
+.owned:hover {
+	background-color: rgba(0,0,0,0.3);
+}
+
+.classText {
+	margin-left: .5%;
+	margin-right: 10%;
+	display: table-cell;
+	text-align: left;
+}
+
+.classBox .fa-times {
+	display: table-cell;
+	width: 5%;
+}
+
+.name {
+	width: 40%;
+}
+
+.hour.classText, .subscribers.classText {
+	text-align: center;
+}

hourglass/client/menus/menus.html

@@ -1,44 +1,42 @@
 <template name="sidebarMenuPlate">
-    <div id="modes">
+    <div class="sectionTitle downOffset">
-        <h3 class="sectionTitle">Main</h3>
+        <h3>Main</h3>
-        <div class="mode classes">
-            <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
-            <i class="fa fa-university" aria-hidden="true"></i>
-            <h4>Classes</h4>
-        </div>
-        <div class="mode calendar">
-            <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
-            <i class="fa fa-calendar" aria-hidden="true"></i>
-            <h4>Calendar</h4>
-        </div>
     </div>
-    <div id="filters">
+    <div class="mode classes">
-        <div id="filterHead" class="sectionTitle openable">
+        <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
-            <h3>Filters</h3>
+        <i class="fa fa-university" aria-hidden="true"></i>
-            {{#if filterOn}}
+        <h4>Classes</h4>
-                <h3 id="disableFilter">Disable All</h3>
+    </div>
-            {{/if}}
+    <div class="mode calendar">
+        <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
+        <i class="fa fa-calendar" aria-hidden="true"></i>
+        <h4>Calendar</h4>
+    </div>
+    <div id="filterHead" class="sectionTitle openable">
+        <h3>Filters</h3>
+        {{#if filterOn}}
+            <h3 id="disableFilter">Disable All</h3>
+        {{/if}}
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
+    </div>
+    <div id="filterWrapper">
+        <div id="typeFilterWrapper" class="sectionTitle openable">
+            <h3>By Type</h3>
             <i class="fa fa-angle-down" aria-hidden="true"></i>
         </div>
-        <div id="filterWrapper">
+        <div id="classFilterHolder">
-            <div id="typeFilterWrapper" class="sectionTitle openable">
+            {{#each types}}
-                <h3>By Type</h3>
+                {{> sideTypeFilter}}
+            {{/each}}
+        </div>
+        <div id="classFilterWrapper" class="sectionTitle openable">
+                <h3>By Class</h3>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
+        </div> 
-            <div id="classFilterHolder">
+        <div id="classListHolder">    
-                {{#each types}}
+            {{#each myClasses}}
-                    {{> sideTypeFilter}}
+                {{> sidebarClasses}}
-                {{/each}}
+            {{/each}}
-            </div>
-            <div id="classFilterWrapper" class="sectionTitle openable">
-                    <h3>By Class</h3>
-                    <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div> 
-            <div id="classListHolder">    
-                {{#each myClasses}}
-                    {{> sidebarClasses}}
-                {{/each}}
-            </div>
         </div>
     </div>
     <div id="exportDiv" class="mode">
@@ -75,7 +73,9 @@
     </div>
     <div id="prefCont">
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Theme:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Theme</h3>
+            </div>
             <div id="theme" class="clickModify dropdown" tabindex="1">
                 <span>{{pref 'theme'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -83,7 +83,9 @@
             {{> selectOptionMenu optionName="theme"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Default Mode:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Default Mode</h3>
+            </div>
             <div id="mode" class="clickModify dropdown" tabindex="2">
                 <span>{{pref 'mode'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -91,7 +93,9 @@
             {{> selectOptionMenu optionName="mode"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Homework:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Hide Homework</h3>
+            </div>
             <div id="timeHide" class="clickModify dropdown" tabindex="3">
                 <span>{{pref 'timeHide'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -99,7 +103,9 @@
             {{> selectOptionMenu optionName="timeHide"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Done:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Hide Done</h3>
+            </div>
             <div id="done" class="clickModify dropdown" tabindex="4">
                 <span>{{pref 'done'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -107,7 +113,9 @@
             {{> selectOptionMenu optionName="done"}}
         </div>
         <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Reported:</h3>
+            <div class="sectionTitle prefText">
+                <h3>Hide Reported</h3>
+            </div>
             <div id="hideReport" class="clickModify dropdown" tabindex="5">
                 <span>{{pref 'hideReport'}}</span>
                 <i class="fa fa-angle-down" aria-hidden="true"></i>
@@ -118,7 +126,9 @@
 </template>
 
 <template name="sidebarRequestPlate">
-    <h3 class="sectionTitle downOffset">Requests</h3>
+    <div class="sectionTitle downOffset">
+        <h3>Requests</h3>
+    </div>
     <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
     <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
     <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
@@ -136,4 +146,40 @@
     {{#each myClasses}}
         {{> sidebarClasses}}
     {{/each}}
-</template>
+</template>
+
+<template name="manageClass">
+    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
+        <div id="colLeft">
+            <h2>My Classes</h2>
+            <div id="settingClassWrapper">
+                <div id="label" class="classBox">
+                    <span class="name classText">Class Name</span>
+                    <span class="teacher classText">Teacher</span>
+                    <span class="hour classText">Hour</span>
+                    <span class="subscriptions classText">Members</span>
+                </div>
+                {{#each myClasses}}
+                    {{> classDisplay}}
+                {{/each}}
+            </div>
+        </div>
+        <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
+            <h2>Information</h2>
+        </div>
+    </div>
+</template>
+
+<template name="classDisplay">
+    <div class="classBox{{box}}" classid="{{_id}}" style="border:1px solid {{divColor 'textColor'}}">
+        <span class="name classText">{{name}}</span>
+        <span class="teacher classText">{{teacher}}</span>
+        <span class="hour classText">{{hour}}</span>
+        <span class="subscribers classText">{{subscribers}}</span>
+        {{#if mine}}
+            <i class="fa fa-times" aria-hidden="true"></i>
+        {{else}}
+            <i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
+        {{/if}}
+    </div>
+</template>

hourglass/client/menus/menus.js

@@ -23,7 +23,10 @@ Template.sidebarMenuPlate.helpers({
             });
         }
         return array;
-    }
+    },
+    filterOn() {
+        return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
+    },
 });
 
 Template.sidebarMenuPlate.events({
@@ -62,6 +65,80 @@ Template.sidebarMenuPlate.events({
             $("#classListHolder").slideUp(300);
         }
         filterOpen[2] = !filterOpen[2];
+    },
+    // CLASS FILTERS
+    'click .sideClass' (event) { // Click class list in sidebar.
+        var div = event.target;
+        while (div.getAttribute("classid") === null) div = div.parentNode;
+        var classid = div.getAttribute("classid");
+
+        if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
+            var newSetting = Session.get("currentWork");
+            newSetting.class = classid;
+            Session.set("currentWork", newSetting);
+            openDivFade(document.getElementsByClassName("overlay")[0]);
+        } else { // Normal clicking turns on filter.
+            var array = Session.get("classDisp");
+            if (array.indexOf(classid) !== -1) {
+                array.splice(array.indexOf(classid), 1);
+            } else {
+                array.push(classid);
+            }
+            Session.set("classDisp", array);
+        }
+    },
+    'click .sideFilter' (event) {
+        var div = event.target;
+        while (div.getAttribute("type") === null) div = div.parentNode;
+        var type = div.getAttribute("type");
+
+        var array = Session.get("typeFilter");
+        if (array.indexOf(type) !== -1) {
+            array.splice(array.indexOf(type), 1);
+        } else {
+            array.push(type);
+        }
+        Session.set("typeFilter", array);
+    },
+    'click #disableFilter' () {
+        Session.set("classDisp", []);
+        Session.set("typeFilter", []);
+    },
+    'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
+        var div;
+        if (event.target.className !== "sideClass") {
+            div = event.target.parentNode;
+        } else {
+            div = event.target;
+        }
+        while (div.getAttribute("classid") === null) div = div.parentNode;
+        var classid = div.getAttribute("classid");
+        Session.set("classDispHover", classid);
+    },
+    'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave.
+        if (event.target.className !== "sideClass") {
+            var div = event.target.parentNode;
+            if (div.contains(event.target)) return;
+        }
+        Session.set("classDispHover", null);
+    },
+    'mouseover .sideFilter' (event) {
+        var div;
+        if (event.target.className !== "sideFilter") {
+            div = event.target.parentNode;
+        } else {
+            div = event.target;
+        }
+        while (div.getAttribute("type") === null) div = div.parentNode;
+        var type = div.getAttribute("type");
+        Session.set("typeFilterHover", type);
+    },
+    'mouseleave .sideFilter' (event) {
+        if (event.target.className !== "sideFilter") {
+            var div = event.target.parentNode;
+            if (div.contains(event.target)) return;
+        }
+        Session.set("typeFilterHover", null);
     }
 });
 

hourglass/client/profile/profile.css

@@ -235,62 +235,6 @@
     100% { width: 30%; }
 }
 
-#label {
-	margin-top: 2.5%;
-	margin-bottom: 2%;
-	
-	background-color: rgba(0,0,0,0.2);
-	box-shadow: none;
-
-	display: table;
-	cursor: default;
-}
-
-.classHolder {
-	width: 100%;
-	max-height: 41vh;
-	padding: 1%;
-	padding-right: 100%;
-
-	display: inline-block;
-
-	overflow-x: hidden;
-	overflow-y: scroll;
-}
-
-.classHolder h3 {
-	font-style: italic;
-	font-weight: 200;
-	margin-left: 1%;
-
-	color: #999;
-
-	-webkit-filter :none;
-	filter: none;
-}
-
-.classBox {
-	font-size: 1.3vw;
-	width: 94%;
-	margin-bottom: 3%;
-	padding: 2%;
-
-	background-color: #19B3B3;
-	box-shadow: 2px 2px 5px 3px #666;
-	display: table;
-	table-layout: fixed;
-	cursor: pointer;
-
-	-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;
-}
-
-.classBox:hover {
-	background-color: #138686;
-}
-
 #joinTop .fa-search {
 	font-size: 1.3vw;
 	margin-right: 3%;
@@ -315,38 +259,7 @@
 	background-color: rgba(0,0,0,0.1);
 }
 
-.owned {
-	background-color: #27646D;
 
-	-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;
-}
-
-.owned:hover {
-	background-color: #52848B;
-}
-
-.classText {
-	margin-left: .5%;
-	margin-right: 10%;
-	display: table-cell;
-	text-align: left;
-}
-
-.classBox .fa-times {
-	display: table-cell;
-	width: 5%;
-}
-
-.name {
-	width: 40%;
-}
-
-.hour.classText, .subscribers.classText {
-	text-align: center;
-}
 
 #creRules {
 	margin: 5%;

hourglass/client/profile/profile.html

@@ -292,20 +292,6 @@
 	</div>
 </template>
 
-<template name="classDisplay">
-	<div class="classBox{{box}}" classid="{{_id}}">
-		<span class="name classText">{{name}}</span>
-		<span class="teacher classText">{{teacher}}</span>
-		<span class="hour classText">{{hour}}</span>
-		<span class="subscribers classText">{{subscribers}}</span>
-		{{#if mine}}
-			<i class="fa fa-times" aria-hidden="true"></i>
-		{{else}}
-			<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
-		{{/if}}
-	</div>
-</template>
-
 <template name="userDisplay">
 	<div class="userBox" userid="{{_id}}">
 		<span class="email" onclick="window.location='/user/{{email}}'">{{email}}</span>

hourglass/lib/constants.js

@@ -1,8 +1,8 @@
 themeColors =  {
     "lux": {
         "background": "White.jpg",
-        "mainColor": "#D9D9D9",
+        "mainColor": "#EEE",
-        "secondaryColor": "#E8E8E8",
+        "secondaryColor": "#D5D5D5",
         "sidebarColor": "#65839A",
         "userDropdownColor": "#E6E6E6",
         "iconHighlight": "#8695CF",
@@ -57,9 +57,9 @@ themeColors =  {
     "atlaneon": { 
        "background": "NeonBlue.jpg",
         "mainColor": "#1D1C23",
-        "secondaryColor": "#1F212f",
+        "secondaryColor": "#1F212F",
         "sidebarColor": "#312E32",
-        "userDropdownColor": "#2e312b", 
+        "userDropdownColor": "#2E312B", 
         "iconHighlight": "#70E6E6",
         "modeHighlight": "#70E6E6",
         "classCardColor":"#1FAAB1",