Slight theme changes, new backgrounds, more menus

hourglass/client/admin/admin.css

@@ -1,5 +1,5 @@
 .content-wrapper {
-	  background-color: #0c0c0c !important;
+	  background-color: #232427 !important;
 }
 
 .content-wrapper h4 {

hourglass/client/main/main.css

@@ -170,7 +170,7 @@ body {
 	width: 6vh;
 	height: calc(6vh - 1px);
 
-	border-bottom: 2px solid #333;
+	border-bottom: 2px solid rgba(255,255,255,0.1);
 
 	position: relative;
 	line-height: 6vh;
@@ -639,7 +639,6 @@ textarea.clickModify {
 .clickModify.dropdown {
 	font-size: 2.1vh;
 	width: calc(100% - 2px);
-	border: 1px solid #999797;
 
 	background-color: rgba(0,0,0,0.07);
 	cursor: pointer;
@@ -664,10 +663,9 @@ textarea.clickModify {
 }
 
 .optionHolder {
-	width: calc(100% - 2px);
+	width: 100%;
 	margin-top: -1px;
 
-	border: 1px solid #666;
 	border-top: none;
 
 	position: absolute;
@@ -687,6 +685,7 @@ textarea.clickModify {
 	min-width: 10%;
 	padding: 4% 7% 4% 7%;
 	margin: 0;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.05);
 
 	cursor: pointer;
 	
@@ -880,24 +879,20 @@ textarea.clickModify {
 	min-height: 100%;
 	width: 100%;
 	height: auto;
+	margin-top: -6vh;
 
 	position: fixed;
-	top: 50%;
+	bottom: 0;
 	left: 50%;
 	z-index: -1;
 
-	transform:translate(-50%, -50%);
+	transform:translateX(-50%);
 }
 
 #mainBody {
 	width: 100%;
 	height: 100%;
 	position: relative;
-
-	-webkit-transition: opacity 0.4s ease;  
-	-moz-transition: opacity 0.4s ease; 
-	-ms-transition: opacity 0.4s ease;
-	transition: opacity 0.4s ease;
 }
 
 #calendar {

hourglass/client/main/main.html

@@ -56,7 +56,10 @@
                 {{#if currSettingMode 'manageClass'}}
                     {{> manageClass}}
                 {{/if}}
-                
+
+                {{#if currSettingMode 'addClass'}}
+                    {{> joinClass}}
+                {{/if}}
             </div>
         </div>
 

hourglass/client/main/main.js

@@ -40,7 +40,8 @@ Template.login.rendered = function() {
 };
 
 Template.main.created = function() {
-    Session.set("mode", Session.get("user").preferences.mode); 
+    Session.set("mode", Session.get("user").preferences.mode);
+    Session.set("classInfo", Session.get("user").classes[0]);
 }
 
 Template.main.rendered = function() {
@@ -289,7 +290,7 @@ Template.main.helpers({
         return Session.get("user").name;
     },
     bgSrc() { // Returns background.
-        return "Backgrounds/" + Session.get("user").preferences.theme.background;
+        return "MDBackgrounds/" + "MD"+Session.get("user").preferences.theme.background;
     },
     iconStatus(icon) {
         var sidebar = Session.get("sidebarMode");
@@ -755,32 +756,6 @@ 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() {
-            Session.set("sidebarMode", "");
-        });
-    } else {
-        $("#menuContainer").show("slide",  {direction: "left"}, 250);
-        $("#divCenter").stop().animate({left: '36vh'}, 250);
-        $(".menuWrapper").fadeOut(200, function() {
-            Session.set("sidebarMode", sidebar);
-        });
-    }
-}
-
-function toggleToMode(mode) {
-    $("#mainBody").fadeOut(250, function() {
-        (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode);
-        $("#mainBody").fadeIn(250);
-    });
-}
-
-
 function openDivFade(div) {
     div.style.display = "block";
     div.style.opacity = "0";
@@ -796,7 +771,7 @@ function closeDivFade(div) {
     }, 100);
 }
 
-function sendData(funcName) { // Call Meteor function, and do actions after function is completed depending on function.
+sendData = function(funcName) { // Call Meteor function, and do actions after function is completed depending on function.
     if(funcName === "editWork" || funcName === "createWork") {
         for(var key in serverData) {
             if(serverData[key] === true) serverData[key] = "";
@@ -990,7 +965,7 @@ function formReadable(input, val) { // Makes work information readable by users.
     }
 }
 
-function startDragula() {
+startDragula = function() {
     dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')], {
         moves: function(el, container, handle) {
             // return handle.classList.contains("classInfo") || handle.classList.contains("mainClassName");

hourglass/client/menus/menus.css

@@ -78,6 +78,7 @@
 #backgroundOverlay {
 	width: 100%;
 	height: 100%;
+	z-index: 5;
 	position: absolute;
 	top: 0;
 }
@@ -124,6 +125,12 @@
 	cursor: default;
 }
 
+#settingClassWrapper h3 {
+	font-weight: 300;
+	font-style: italic;
+	margin-left: 5%;
+}
+
 .classBox {
 	font-size: 1.3vw;
 	width: 100%;
@@ -165,6 +172,7 @@
 	margin-right: 10%;
 	display: table-cell;
 	text-align: left;
+	pointer-events: none;
 }
 
 .classBox .fa-times {
@@ -212,10 +220,182 @@
 
 .circleIcon .fa {
 	font-size: 2.5vh;
-	margin-top: 0.25vh;
+	margin-top: 0.2vh;
 	width: 6vh;
 	height: 6vh;
 	line-height: 6vh;
 	text-align: center;
 }
 
+#classInfoModeWrapper {
+	width: 100%;
+	display: table;
+}
+
+#classInfoModeWrapper span {
+	font-size: 150%;
+	width: 50%;
+	padding: 1.5%;
+	background-color: rgba(0,0,0,0.05);
+
+	text-align: center;
+	display: table-cell;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.5s ease, border-bottom 0.25s ease;  
+	-moz-transition: background-color 0.5s ease, border-bottom 0.25s ease; 
+	-ms-transition: background-color 0.5s ease, border-bottom 0.25s ease;
+	transition: background-color 0.5s ease, border-bottom 0.25s ease; 
+}
+
+#classInfoModeWrapper span:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+#infoClassCont {
+	padding: 5%;
+}
+
+#infoClassCont .infoCard {
+	margin: 2.5%;
+	padding: 2.5%;
+	width: 39%;
+	text-align: center;
+	display: inline-block;
+	position: relative;
+	vertical-align: top;
+}
+
+#infoClassCont h4 {
+	font-size: 150%;
+	text-align: center;
+}
+
+#infoClassCont span {
+	font-size: 170%;
+	margin-top: 5%;
+	display: block;
+	word-wrap: break-word;
+}
+
+#infoClassCont img {
+	height: 4vh;
+	margin-right: 1%;
+	display: inline-block;
+	vertical-align: middle;
+
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+}
+
+#privacy {
+	text-align: center;
+}
+
+#privacy span, #privacy .circleIcon {
+	margin: 1%;
+	display: inline-block;
+}
+
+#infoClassCont div .fa-files-o{
+	font-size: 120%;
+
+	position: absolute;
+	top: 10%;
+	right: 5%;
+
+	cursor: pointer;
+
+	-webkit-transition: color 0.4s ease;  
+	-moz-transition: color 0.4s ease; 
+	-ms-transition: color 0.4s ease;
+	transition: color 0.4s ease; 
+}
+
+#code {
+	margin: 0;
+	width: auto;
+
+	background-color: rgba(255,255,255,0.3);
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	display: none;
+	position: absolute;
+	top: 37.5%;
+	right: 1%;
+}
+
+#copyHolder {
+	visibility: hidden;
+	pointer-events: none;
+	position: absolute;
+}
+
+.userAdder {
+	width: 100%;
+	margin-bottom: 3%;
+	text-align: left;
+	display: table;
+}
+
+.userAdder h4 {
+	width: 30%;
+	text-align: left !important;
+	display: table-cell;
+}
+
+.userAdder input {
+	font-size: 120%;
+	width: 58%;
+	padding: 1%;
+	outline: none;
+}
+
+.userAdder .fa {
+	width: auto;
+	padding: 0 !important;
+	margin: 3% !important;
+	cursor: pointer;
+
+	-webkit-transition: color 0.4s ease;  
+	-moz-transition: color 0.4s ease; 
+	-ms-transition: color 0.4s ease;
+	transition: color 0.4s ease; 
+}
+
+.userHolder {
+	margin-bottom: 1%;
+}
+
+.userDisp {
+	width: 31%;
+	padding: 1%;
+	background-color: rgba(0,0,0,0.3);
+	display: inline-block;
+	text-align: center;
+}
+
+.userDisp span {
+	font-size: 100% !important;
+	margin: 0 0 0 5%!important;
+	text-align: left;
+}
+
+.userDisp .fa {
+	font-size: 120%;
+	cursor: pointer;
+	margin-left: 4.5%;
+
+	-webkit-transition: color 0.4s ease;  
+	-moz-transition: color 0.4s ease; 
+	-ms-transition: color 0.4s ease;
+	transition: color 0.4s ease; 
+}
+
+.userDisp .fa:hover {
+	color: #FF1A1A;
+}

hourglass/client/menus/menus.html

@@ -175,13 +175,91 @@
         <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
             <div class="settingHeader">
                 <div>
-                    <h2>Information</h2>
+                    <h2>Class Information</h2>
                 </div>
                 <div class="circleIcon">
                     <i class="fa fa-info" aria-hidden="true"></i>
                 </div>
             </div>
             <div id="infoClassWrapper">
+                <div id="classInfoModeWrapper">
+                    <span style="border-bottom: 3px solid {{classInfoMode 'general'}}">General</span>
+                    <span style="border-bottom: 3px solid {{classInfoMode 'users'}}">Users</span>
+                </div>
+                <div id="infoClassCont">
+                    {{#if classInfoMode 'general' 'a'}}
+                        {{> classInfoGeneral}}
+                    {{else}}
+                        {{> classInfoUsers}}
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template name="joinClass">
+    <div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
+        <div id="colLeft">
+            <div class="settingHeader">
+                <div>
+                    <h2>Available Classes</h2>
+                    <p>Join Classes</p>
+                </div>
+                <div class="circleIcon">
+                    <i class="fa fa-tasks" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div id="joinTop">
+                <i class="fa fa-search" aria-hidden="true"></i>
+                {{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}}
+                <!-- <h4 id="private">Join Private Class</h4> -->
+            </div>
+            <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>
+                {{#if notsearching}}
+                    {{#each classes}}
+                        {{> classDisplay}}
+                    {{/each}}
+                    {{#if noclass}}
+                        <h3>No results found...</h3>
+                    {{/if}}
+                {{else}}
+                    {{#each autocompleteClasses}}
+                        {{> classDisplay}}
+                    {{/each}}
+                    {{#if notfound}}
+                        <h3>No results found...</h3>
+                    {{/if}}
+                {{/if}}
+            </div>
+        </div>
+        <div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
+            <div class="settingHeader">
+                <div>
+                    <h2>Class Information</h2>
+                </div>
+                <div class="circleIcon">
+                    <i class="fa fa-info" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div id="infoClassWrapper">
+                <div id="classInfoModeWrapper">
+                    <span style="border-bottom: 3px solid {{classInfoMode 'general'}}">General</span>
+                    <span style="border-bottom: 3px solid {{classInfoMode 'users'}}">Users</span>
+                </div>
+                <div id="infoClassCont">
+                    {{#if classInfoMode 'general' 'a'}}
+                        {{> classInfoGeneral}}
+                    {{else}}
+                        {{> classInfoUsers}}
+                    {{/if}}
+                </div>
             </div>
         </div>
     </div>
@@ -200,3 +278,116 @@
         {{/if}}
     </div>
 </template>
+
+<template name="classInfoGeneral">
+    <div id="privacy">
+        {{#if classInfo 'privacy'}}
+            <div class="circleIcon">
+                <i class="fa fa-lock" aria-hidden="true"></i>
+            </div>
+            <span>Private</span>
+        {{else}}
+            <div class="circleIcon">
+                <i class="fa fa-unlock-alt" aria-hidden="true"></i>
+            </div>
+            <span>Public</span>
+        {{/if}}
+    </div>
+    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
+        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Class Name</h4>
+        <span>{{classInfo 'name'}}</span>
+    </div>
+    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
+        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Hour</h4>
+        <span>{{classInfo 'hour'}}</span>
+    </div>
+    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
+        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Teacher</h4>
+        <span>{{classInfo 'teacher'}}</span>
+    </div>
+    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
+        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Category</h4>
+        <span>{{classInfo 'category'}}</span>
+    </div>
+    <div class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
+        <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Owner</h4>
+        {{> classInfoUserDisp classInfo 'admin'}}
+    </div>
+    {{> classInfoCode classInfo 'code'}}
+</template>
+
+<template name="classInfoUsers">
+    {{#if classInfo 'personal'}}
+        <p>It's just you!</p>
+    {{else}}
+        <div>
+            <div class="userAdder">
+                <h4>Moderators:</h4>
+                {{#if classInfo 'mine'}}
+                    <input class="userAddInput" type="text" placeholder="1234@abc.xyz">
+                    <i class="fa fa-plus" aria-hidden="true" user="moderators" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
+                {{/if}}
+            </div>
+            <div class="userHolder">
+                {{#each classInfo 'moderators'}}
+                    <div class="userDisp" userid="{{_id}}">
+                        {{> classInfoUserDisp}}
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+        <div>
+            <div class="userAdder">
+                <h4>Banned Users:</h4>
+                {{#if classInfo 'mine'}}
+                    <input class="userAddInput" type="text" placeholder="1234@abc.xyz">
+                    <i class="fa fa-plus" aria-hidden="true" user="banned" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
+                {{/if}}
+            </div>
+            <div class="userHolder">    
+                {{#each classInfo 'banned'}}
+                    <div class="userDisp" userid="{{_id}}">
+                        {{> classInfoUserDisp}}  
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+        <div>
+            <div class="userAdder">
+                <h4>Subscribers:</h4>
+            </div>
+            <div class="userHolder">    
+                {{#each classInfo 'subscribers'}}
+                    <div class="userDisp" userid="{{_id}}">
+                        {{> classInfoUserDisp}}  
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    {{/if}}
+</template>
+
+<template name="classInfoUserDisp">
+    <span>
+        <img src="{{services.google.picture}}">
+        {{profile.name}}
+        {{#if delete}}
+            {{#if classInfo 'mine'}}
+            <i class="fa fa-times" aria-hidden="true"></i>
+            {{/if}}
+        {{/if}}
+    </span>
+</template>
+
+<template name="classInfoCode">
+    {{#if exists}}
+        <div id="code" class="infoCard" style="border:1px solid {{divColor 'textColor'}}">
+            <h4 style="border-bottom:1px solid {{divColor 'textColor'}}">Code</h4>
+            <span>{{code}}</span>
+            <input id="copyHolder" value="{{code}}">
+            <i class="fa fa-files-o" aria-hidden="true" onmouseover="$(this).css('color','{{divColor 'iconHighlight'}}')" onmouseleave="$(this).css('color','{{divColor 'textColor'}}')"></i>
+            <div>Copied!</div>
+        </div>
+    {{/if}}
+</template>
+

hourglass/client/menus/menus.js

@@ -1,4 +1,5 @@
 Session.set("settingMode", "manageClass");
+Session.set("classInfoMode", "general");
 
 var filterOpen =  [false, true, true, true, true];
 var sidebarMode = [null,null];
@@ -179,9 +180,281 @@ Template.sidebarOptionPlate.events({
     }
 });
 
-function toggleToMode(mode) {
+Template.registerHelper("classInfo", (info) => {
+    var thisClass = classes.findOne({_id:Session.get("classInfo")});
+    var isYou = Session.equals("classInfo", Meteor.userId());
+    switch (info) {
+        case "name":
+            return (isYou) ? "Personal" : thisClass.name;
+        case "teacher":
+            return (isYou) ? "None": thisClass.teacher;
+        case "hour":
+            return (isYou) ? "None" : thisClass.hour;
+        case "category":
+            return (isYou) ? "Personal" :  thisClass.category[0].toUpperCase() + thisClass.category.slice(1);
+        case "privacy":
+            return (isYou) ? true : thisClass.privacy;
+        case "admin":
+            return Meteor.users.findOne({_id: (isYou) ? Meteor.userId() : thisClass.admin});
+        case "code":
+            return (isYou || !thisClass.code) ? {exists: false} : {exists: true, code: thisClass.code};
+        case "mine":
+            return (isYou) ? true : Meteor.userId() === thisClass.admin;
+        case "moderators":
+            if (isYou || thisClass.moderators.length === 0) return [];
+            var moderators = [];
+            thisClass.moderators.forEach(function(ele) {
+                var array = Meteor.users.findOne({_id: ele});
+                array.delete = true;
+                moderators.push(array);
+            });
+            return moderators;
+        case "banned":
+            if (isYou || thisClass.banned.length === 0) return [];
+            var banned = [];
+            thisClass.banned.forEach(function(ele) {
+                var array = Meteor.users.findOne({_id: ele});
+                array.delete = true;
+                banned.push(array);
+            });
+            return banned;
+        case "subscribers":
+            if (isYou || thisClass.subscribers.length === 0) return [];
+            var subscribers = [];
+            thisClass.subscribers.forEach(function(ele) {
+                subscribers.push(Meteor.users.findOne({_id: ele}));
+            });
+            return subscribers;
+        case "personal":
+            return isYou;
+    }
+});
+
+Template.registerHelper("classInfoMode", (mode, check) => {
+    if(typeof check === "string") return Session.equals("classInfoMode",mode);
+    return (Session.equals("classInfoMode", mode)) ? Session.get("user").preferences.theme.modeHighlight + ";background-color:rgba(0,0,0,0.1);" : "rgba(0,0,0,0)";
+})
+
+Template.manageClass.events({
+    'click .classBox' (event) {
+        var classId = event.target.getAttribute("classid");
+        if(Session.equals("classInfo",classId)) return;
+        toggleToClassInfo(classId); 
+    },
+    'click #classInfoModeWrapper span:first-child' () {
+        if(Session.equals("classInfoMode","general")) return;
+        toggleToClassInfoMode("general");
+    },
+    'click #classInfoModeWrapper span:last-child' () {
+        if(Session.equals("classInfoMode","users")) return;
+        toggleToClassInfoMode("users");
+    }
+});
+
+Template.joinClass.helpers({
+     classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) ( Only your school)
+        var array = classes.find({
+            status: {$eq: true},
+            privacy: {$eq: false},
+            _id: {$nin: Session.get("user").classes},
+            school: {$eq: Session.get("user").school}
+        }, 
+        {sort: {subscribers: -1}}, 
+        {limit: 20}
+        ).fetch();
+
+        for (var i = 0; i < array.length; i++) {
+            array[i].subscribers = array[i].subscribers.length;
+        }
+        if (array.length === 0) {
+            Session.set("noclass", true);
+        } else {
+            Session.set("noclass", false);
+        }
+        return array;
+    },
+    classSettings() { // Returns autocomplete array for classes.
+        return {
+            position: "bottom",
+            limit: 10,
+            rules: [{
+                token: '',
+                collection: classes,
+                template: Template.classDisplay,
+                filter: {
+                    privacy: false,
+                    status: true
+                },
+                selector: (match) => {
+                    regex = new RegExp(match, 'i');
+                    return {
+                        $or: [{
+                            'name': regex
+                        }, {
+                            'teacher': regex
+                        }, {
+                            'hour': regex
+                        }]
+                    };
+                }
+            }]
+        };
+    },
+    notsearching() { // Tells whether user is using the searchbox
+        return Session.get("notsearching");
+    },
+    autocompleteClasses() { // Returns current auto-completes for classes
+        return Session.get("autocompleteDivs");
+    },
+    notfound() { // Returns if autocomplete has no results.
+        return Session.get("notfound");
+    },
+});
+
+Template.joinClass.events({
+    'click .classBox' (event) {
+        var classId = event.target.getAttribute("classid");
+        if(Session.equals("classInfo",classId)) return;
+        toggleToClassInfo(classId); 
+    },
+    'click #classInfoModeWrapper span:first-child' () {
+        if(Session.equals("classInfoMode","general")) return;
+        toggleToClassInfoMode("general");
+    },
+    'click #classInfoModeWrapper span:last-child' () {
+        if(Session.equals("classInfoMode","users")) return;
+        toggleToClassInfoMode("users");
+    },
+    'input #classSearch' (event) { // Auto-complete updater
+        if (event.target.value.length === 0) {
+            Session.set("notsearching", true);
+        } else {
+            Session.set("notsearching", false);
+        }
+        Session.set("autocompleteDivs", null);
+        var divs = [];
+        try {
+            var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes;
+            if (items.length === 0) { // If no results.
+                Session.set("notfound", true);
+            } else {
+                Session.set("notfound", false);
+            }
+            for (var i = 2; i < items.length; i += 3) { // Iterate through autocomplete div.
+                var item = items[i].childNodes[3];
+                if (Meteor.user().profile.classes.indexOf(item.getAttribute("classid")) !== -1) continue;
+                divs.push({
+                    name: item.childNodes[1].childNodes[0].nodeValue,
+                    teacher: item.childNodes[3].childNodes[0].nodeValue,
+                    hour: item.childNodes[5].childNodes[0].nodeValue,
+                    subscribers: Math.floor(item.childNodes[7].childNodes[0].nodeValue.replace(",", "").length / 17),
+                    _id: item.getAttribute("classid")
+                });
+            }
+            Session.set("autocompleteDivs", divs.sort(function(a, b) {
+                return b.subscribers - a.subscribers
+            }));
+        } catch (err) {}
+    }
+});
+
+Template.classInfoUsers.events({
+    'click .userAdder .fa' (event) {
+        var type = event.target.getAttribute("user");
+        var input = event.target.parentNode.childNodes[4];
+        var value = input.value;
+        var classid = Session.get("classInfo");
+        var user = Meteor.users.findOne({
+            "services.google.email": value
+        });
+        if(!user)  {
+            sAlert.error("Invalid email!", {
+                effect: 'stackslide',
+                position: 'top',
+                timeout: 3000
+            });
+            return;
+        }
+        serverData = [
+            user._id,
+            classid,
+            type,
+            true
+        ];
+        sendData("trackUserInClass");
+        input.value = "";
+    },
+    'click .userDisp .fa' (event) {
+        var outerInput = event.target.parentNode.parentNode.parentNode.parentNode.childNodes[1]
+        var type = outerInput.childNodes[6].getAttribute("user");
+        var userid = event.target.parentNode.parentNode.getAttribute("userid");
+        if(!Meteor.users.findOne({_id: userid})) {
+            sAlert.error("Stop hacking, reload the page.", {
+                effect: 'stackslide',
+                position: 'top',
+                timeout: 3000
+            });
+            return;
+        }
+        var classid = Session.get("classInfo");
+        serverData = [
+            userid,
+            classid,
+            type,
+            false
+        ];
+        sendData("trackUserInClass");
+    }
+});
+
+Template.classInfoCode.events({
+    'click .fa' (event) {
+        document.getElementById("copyHolder").select();
+        document.execCommand("copy");
+        $(event.target.parentNode.childNodes[9]).fadeIn(100, function() {
+            setTimeout(function() {
+                $(event.target.parentNode.childNodes[9]).fadeOut(250);
+            }, 500);
+        });
+    }
+});
+
+toggleToMode = function(mode) {
     $("#mainBody").fadeOut(250, function() {
         (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode);
         $("#mainBody").fadeIn(250);
     });
 }
+
+toggleToSidebar = function(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() {
+            Session.set("sidebarMode", "");
+        });
+    } else {
+        $("#menuContainer").show("slide",  {direction: "left"}, 250);
+        $("#divCenter").stop().animate({left: '36vh'}, 250);
+        $(".menuWrapper").fadeOut(200, function() {
+            Session.set("sidebarMode", sidebar);
+        });
+    }
+}
+
+toggleToClassInfo = function(classId) {
+    $("#infoClassCont").fadeOut(250, function() {
+        Session.set("classInfo", classId);
+        Session.set("classInfoMode", "general");
+        $(this).fadeIn(250);
+    });
+}
+
+toggleToClassInfoMode = function(mode) {
+    $("#infoClassCont").fadeOut(250, function() {
+        Session.set("classInfoMode", mode);
+        $(this).fadeIn(250);
+    });   
+}

hourglass/client/profile/profile.css

@@ -470,13 +470,8 @@
 }
 .userHolder {
 	width: 100%;
-	max-height: 10vh;
 	margin-left: 5%;
 	padding: 2%;
-	padding-right: 20%;
-
-	overflow-y: scroll;
-	overflow-x: hidden;
 }
 
 .userBox {

hourglass/lib/constants.js

@@ -2,11 +2,11 @@ themeColors =  {
     "lux": {
         "background": "White.jpg",
         "mainColor": "#EEE",
-        "secondaryColor": "#D5D5D5",
+        "secondaryColor": "#FEFEFE",
-        "sidebarColor": "#65839A",
+        "sidebarColor": "#799cb8",
         "userDropdownColor": "#E6E6E6",
-        "iconHighlight": "#8695CF",
+        "iconHighlight": "#FFF",
-        "modeHighlight": "#AA2121",
+        "modeHighlight": "#D34949",
         "classCardColor":"#EBEBEB",
         "textColor": "#000"
     },