From b47a6e7f65b95aad348a9680fb6d617f8bbfd666 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Mon, 5 Sep 2016 00:08:59 -0400
Subject: [PATCH] CSS optimization, changed client profile handling

---
 hourglass/client/main/main.css        |  14 +-
 hourglass/client/main/main.html       |   5 +-
 hourglass/client/main/main.js         |  67 +++---
 hourglass/client/profile/profile.css  | 161 ++++++++------
 hourglass/client/profile/profile.html | 303 +++++++++++++-------------
 hourglass/client/profile/profile.js   | 104 ++++-----
 hourglass/lib/constants.js            |   9 +
 7 files changed, 338 insertions(+), 325 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index f6f3030..399ef54 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -209,7 +209,7 @@ input, textarea {
 	box-shadow: 2px 2px 5px 3px #666;
 
 	position: absolute;
-	z-index: 1;
+	z-index: 5;
 	overflow: hidden;
 	
 	-webkit-transition: margin 0.5s ease, background-color 0.5s ease;  
@@ -653,13 +653,17 @@ input, textarea {
 }
 
 #calendar {
+	width: 90%;
+	height: 100%;
+	margin: auto;
 	padding-top: 2%;
-	height: 100%; 
 }
 
-#calbg {
-	background-color: rgba(255,255,255,0.3);
-	position: absolute;
+#fullcalendar {
+	background-color: rgba(255,255,255,0.3); 
+	border: 2vh solid rgba(255,255,255,0.3);
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
 }
 
 .fc-view-container, .fc-left {
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index b95fc9f..6eb7ff9 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -4,7 +4,7 @@
 </head>
 
 <template name="main">
-    <header style="background-color:{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
+    <header style="background-color:{{user}}{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
         <div id="aboveBar">
             <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
             <h1>Hourglass</h1><h2>{{schoolName}}</h2>
@@ -107,8 +107,7 @@
         {{/if}}
 
         {{#if currMode 'calendar'}}
-        <div id="calbg" style="{{calbg}}"></div>
-            <div id="calendar" style="{{calCenter}}{{calColor}}{{highlight}}">
+            <div id="calendar" style="{{calColor}}{{highlight}}">
                 {{> fullcalendar calendarOptions}}
             </div>
         {{/if}}
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 265adbc..8c7a564 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -22,19 +22,8 @@ var workColors = {
     "other": "#852E6D"
 };
 
-//Creates variables for due dates
-
-var ref = {
-    "1 Day":1,
-    "2 Days":2,
-    "1 Week":7,
-    "1 Month":30,
-    "Never":0,
-    "Yes":true,
-    "No":false
-};
-
 // Reactive variables.
+Session.set("user",null);
 Session.set("calendarClasses", null);
 Session.set("sidebar", null); // Status of sidebar
 Session.set("newWork",null); // If user creating new work.
@@ -48,36 +37,40 @@ Session.set("classDispHover",null); // Stores current hovered filter.
 Session.set("refetchEvents",null); // Stores whether to get calendar events again.
 Session.set("commentRestrict",null); // Stores text for comment character restriction.
 
+Template.registerHelper('user', () => {
+    var user = Meteor.user().profile;
+    if(user === undefined || user === null) return;
+    Session.set("user", user);
+    return;
+});
+
 Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
-    if(Meteor.user() === undefined) return;
-    return themeColors[Meteor.user().profile.preferences.theme][div];
+    return themeColors[Session.get("user").preferences.theme][div];
 });
 
 Template.registerHelper('textColor', () => { // Reactive color for text.
-    if(Meteor.user() === undefined) return;
-    document.getElementsByTagName("body")[0].style.color = themeColors[Meteor.user().profile.preferences.theme].text;
+    document.getElementsByTagName("body")[0].style.color = themeColors[Session.get("user").preferences.theme].text;
     return;
 });
 
 Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay container.
-    if(Meteor.user() === undefined) return;
     var dim = [window.innerWidth * 0.25, window.innerHeight * 0.2];
     var width = "width:" + dim[0].toString() + "px;";
     var height = "height:" + dim[1].toString() + "px;";
     var margin = "margin-left:" + (-dim[0] / 2).toString() + "px;";
-    var bg = "background-color:" + themeColors[Meteor.user().profile.preferences.theme].header + ";";
+    var bg = "background-color:" + themeColors[Session.get("user").preferences.theme].header + ";";
     return width + height + margin + bg;
 });
 
 Template.registerHelper('myClasses', () => { // Gets all classes and respective works.
-    if(Meteor.user() === undefined) { // Null checking.
+    if(Session.get("user")["classes"].length === 0) { // Null checking.
         Session.set("noclass",true); // Makes sure to display nothing.
         return [];
     } else {
         var array = [];
-        var courses = Meteor.user().profile.classes;
+        var courses = Session.get("user").classes;
         var classDisp = Session.get("classDisp"); // Get sidebar class filter.
-        var hide = Meteor.user().profile.preferences.timeHide;
+        var hide = Session.get("user").preferences.timeHide;
 
         for(var i = 0; i < courses.length; i++) { // For each user class.
             found = classes.findOne({_id:courses[i]});
@@ -106,7 +99,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
                         j = 0;
                     }
                 }
-                if(thisWork[j] !== "no" && Meteor.user().profile.preferences.done) { // If done filter is true
+                if(thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
                     if(thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
                         thisWork[j] = "no";
                         j = 0;
@@ -154,8 +147,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
 });
 
 Template.registerHelper('pref', (val) => { // Obtains all user preferences.
-    if(Meteor.user() === undefined) return;
-    var preferences = Meteor.user().profile.preferences;
+    var preferences = Session.get("user").preferences;
     if(val === 'timeHide' || val === 'done') {
         var invert = _.invert(ref);
         return invert[preferences[val]];
@@ -165,28 +157,27 @@ Template.registerHelper('pref', (val) => { // Obtains all user preferences.
 
 Template.main.helpers({
     schoolName() { // Finds the name of the user's school.
-        if(Meteor.user().profile.school === undefined) return;
-        return " - " + Meteor.user().profile.school;
+        if(Session.get("user").school === undefined) return;
+        return " - " + Session.get("user").school;
     },
     iconColor(icon) { // Sidebar status color
         if (Session.equals("sidebar",icon + "Container")) {
-            return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
+            return themeColors[Session.get("user").preferences.theme].statusIcons;
         } else if (Session.equals("sidebar","both")) {
-            return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
+            return themeColors[Session.get("user").preferences.theme].statusIcons;
         } else {
             return;
         }
     },
     defaultMode() { //Loads the default display mode for user.
         if(load) {
-            Session.set("mode",Meteor.user().profile.preferences.mode);
+            Session.set("mode",Session.get("user").preferences.mode);
             load = false;
         }
         return;
     },
-    bgSrc() { // Adjusts for different, larger screen sizes.
-        var dim = [window.innerWidth, window.innerHeight];
-        var pic = "Backgrounds/"+themeColors[Meteor.user().profile.preferences.theme].background;
+    bgSrc() { // Returns background.
+        var pic = "Backgrounds/"+themeColors[Session.get("user").preferences.theme].background;
         return pic;
     },
     menuStatus() { // Status of of menu sidebar.
@@ -209,7 +200,7 @@ Template.main.helpers({
     },
     modeStatus(status) { // Color status of display modes.
         if (Session.equals("mode",status)) {
-            return themeColors[Meteor.user().profile.preferences.theme].highlightText;
+            return themeColors[Session.get("user").preferences.theme].highlightText;
         } else {
             return;
         }
@@ -293,13 +284,9 @@ Template.main.helpers({
         return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
     },
     calColor() { // Sets the color of the calendar according to theme
-        return "color:"+themeColors[Meteor.user().profile.preferences.theme].calendar;
-    },
-    calbg() { //Sets size of the calendar
-        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";
+        return "color:"+themeColors[Session.get("user").preferences.theme].calendar;
     },
+    
     calCreWork() { // Display instructions for creating a work.
         if(Session.get("calCreWork")) return true;
         return false;
@@ -856,7 +843,7 @@ function getHomeworkFormData() { // Get all data relating to work creation.
 }
 
 function getPreferencesData() { // Get all data relating to preferences.
-    var profile = Meteor.user().profile;
+    var profile = Session.get("user");
     var options = {
         "theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
         "mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css
index 1c3d8a2..63ffbf3 100644
--- a/hourglass/client/profile/profile.css
+++ b/hourglass/client/profile/profile.css
@@ -26,6 +26,7 @@
 .profHea {
 	font-size: 300%;
 	font-weight: 200;
+	padding: 6% 6% 0 8%;
 }
 
 #motda {
@@ -35,42 +36,54 @@
 
 #profPage {
 	width: 100%;
+	height: 100%;
 	padding-right: 10%;
 	overflow-x: hidden;
 	overflow-y: auto;
 }
 
 #profMainContainer {
+	width: 85%;
+	height: auto;
+	margin: auto;
+}
+
+#profTop {
 	position: relative;
-	top: 0;
-	left: 50%;
 }
 
 #profBanner {
-	border: 5px solid #0D0D0D;
-	border-top: 0;
-	border-bottom: 0;
+	width: 100%;
+	margin: 0;
+	border-left: 5px solid #0D0D0D;
+	border-right: 5px solid #0D0D0D;
 }
 
 #profAvatar {
+	height: 27vh;
+	width: 27vh;
+
 	border: 10px solid #0D0D0D;
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 
 	position: absolute;
-	top: 43%;
-	left: 2.5%;
-	float: left;
+	bottom: -6.5%;
+	left: 1.5%;
 	z-index: 5;
 }
 
 #motdBox {
 	width: 100%;
 	height: 5%;
+	margin-top: -0.3%;
 	padding: 0.5% 0 0.5% 0;
 
 	background-color: #0D0D0D;
+
+	border-left: 5px solid #0D0D0D;
+	border-right: 5px solid #0D0D0D;
 }
 
 #motdBox span {
@@ -118,39 +131,69 @@
 }
 
 #profCards {
+	width: 100%;
+	height: 100%;
 	margin-top: 3%;
 	margin-bottom: 3%;
+
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+
+	display: table;
+}
+
+#cardColLeft, #cardColRight {
+	height: 100%;
+	display: table-cell;
+	vertical-align: top;
+}
+
+#cardColLeft {
+	width: 39.6%;
+	float: left;
+}
+
+#cardColRight {
+	width: 60%;
+	float: right;
+	text-align: right;
 }
 
 .card {
-	margin-bottom: 5%;
-	padding: 4%;
-	padding-top: 2.5%;
-	padding-right: 2%;
-
+	width: 95%;
+	margin-bottom: 9%;
 	box-shadow: 2px 2px 5px 3px #666;
+	text-align: left;
 }
 
 #profInfo {
-	width: 30%;
-	float: left;
+	margin-left: 0;
 	border-top: 5px solid #CC4444;
 }
 
-#about {
-	padding: 5%;
+#about, #preferences {
+	padding: 3% 5% 7% 14%;
+}
+
+.radioContainer {
+	position: relative;
+}
+
+#classes {
+	padding: 3% 5% 7% 7%;
 }
 
 #profClasses {
-	width: 52%;
-	height: 30%;
-	float: right;
+	height: 90%;
+	margin-right: 0;
 	border-top: 5px solid #2E4F74;
 
-	-webkit-transition: width 0.4s ease;  
-	-moz-transition: width 0.4s ease; 
-	-ms-transition: width 0.4s ease;
-	transition: width 0.4s ease;
+	float: right;
+
+	-webkit-transition: height 0.5s ease;  
+	-moz-transition: height 0.5s ease; 
+	-ms-transition: height 0.5s ease;
+	transition: height 0.5s ease; 
 }
 
 #profClassInfoHolder {
@@ -160,10 +203,6 @@
 	transition: opacity 0.4s ease; 
 }
 
-#classes {
-	padding: 4% 0 4% 0;
-}
-
 #profFunctions {
 	display: inline;
 }
@@ -238,6 +277,7 @@
 
 .classHolder {
 	width: 90%;
+	max-height: 26vh;
 	padding: 1%;
 	padding-right: 100%;
 
@@ -338,11 +378,11 @@
 }
 
 #creRules {
-	position: absolute;
+	margin: 5%;
+	margin-bottom: 0;
 }
 
 #create {
-	margin-top: 2.5%;
 	padding: 5%;
 	padding-top: 1%;
 }
@@ -401,26 +441,10 @@
 	color: #999 !important;
 }
 
-#mainpage:hover, #logout2:hover {
-	-webkit-transform: scale(1.05);
-    -moz-transform: scale(1.05);
-    -ms-transform: scale(1.05);
-    -o-transform: scale(1.05);
-    transform: scale(1.05);
-}
-
-#mainpage h2, #logout2 h2 {
-	font-weight: 200;
-	width: 100%;
-	padding: 8%;
-
-	-webkit-filter: none;
-	filter: none !important;
-}
-
 #mainpage, #logout2 {
 	font-size: 90%;
-	padding: 0.3%;
+	margin: 0;
+	padding: 0.7%;
 	background-color: #617C9E;
 
 	box-shadow: -1px 2px 5px 1px #333;
@@ -430,11 +454,22 @@
 	left: 10%;
 	z-index: 50;
 
-	-webkit-transition: transform 0.2s ease, background-color 0.1s ease;  
-	-moz-transition: transform 0.2s ease, background-color 0.1s ease; 
-	-ms-transition: transform 0.2s ease, background-color 0.1s ease;
-	transition: transform 0.2s ease, background-color 0.1s ease;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.1s ease;  
+	-moz-transition: background-color 0.1s ease; 
+	-ms-transition: background-color 0.1s ease;
+	transition: background-color 0.1s ease;
 }
+
+#mainpage:hover {
+	background-color: #56708D;
+}
+
+#logout2:hover {
+	background-color: #C84949;
+}
+
 #logout2 {
 	background-color: #DE5050;
 	position: absolute;
@@ -442,8 +477,12 @@
 	left: 85%;
 }
 
-#mainpage:active, #logout2:active {
-	background-color: #56708D;
+#mainpage h2, #logout2 h2 {
+	font-weight: 200;
+	width: 100%;
+
+	-webkit-filter: none;
+	filter: none !important;
 }
 
 #createdClasses {
@@ -521,7 +560,7 @@
 
 .userHolder {
 	width: 100%;
-	max-height: 10%;
+	max-height: 10vh;
 	margin-left: 5%;
 	padding: 2%;
 	padding-right: 20%;
@@ -533,10 +572,10 @@
 .userBox {
 	font-size: 100%;
 	width: 80%;
-	margin-bottom: 3%;
-	padding: 4%;
+	margin-bottom: 1.5%;
+	padding: 2%;
 
-	box-shadow: 2px 2px 5px 3px #666;
+	box-shadow: 1px 1px 5px 1px #666;
 	display: table;
 }
 
@@ -671,11 +710,5 @@
 }
 
 #profPreferences {
-	width: 30%;
-	float: left;
 	border-top: 5px solid #409333;
-}
-
-#preferences {
-	padding: 5%;
 }
\ No newline at end of file
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
index 9e31294..f72fa1a 100644
--- a/hourglass/client/profile/profile.html
+++ b/hourglass/client/profile/profile.html
@@ -1,105 +1,162 @@
 <template name="profile">
-	{{> loginButtons}}
-	<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};{{textColor}}{{loadNew}}">
-		<div id="mainpage" onclick="window.location='/'"><h2>Main Page</h2></div>
-		<div id="logout2" onclick='document.getElementById("login-buttons-logout").click();'><h2>Logout</h2></div>
-		<div id="profMainContainer" style="{{mainCenter}}">
-			<div id="profBanner" style="{{banner}};"></div>
-			<div id="profAvatar" style="{{avatar}};{{avatarDim}}"></div>
-			<div id="motdBox">
-				<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
+	<div id="mainpage{{user}}" onclick="window.location='/'"><h2>Main Page</h2></div>
+	<div id="logout2" onclick='document.getElementById("login-buttons-logout").click();'><h2>Logout</h2></div>
+	<div id="profPage" style="background-color:{{divColor 'header'}};{{textColor}}{{loadNew}}">
+		<div id="profMainContainer">
+			<div id="profTop">
+				<img id="profBanner" src='{{banner}}' alt="Banner">
+				<img id="profAvatar" src='{{avatar}}' alt="Avatar">
+				<div id="motdBox">
+					<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
+				</div>
 			</div>
 			<div id="profCards">
-				<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">
-					<h3 class="profHea">About</h3>
-					<div id="about">
-						<div>
-							<p class="profTitle">School Name:</p>
-							<span class="change" id="school">{{school}}</span>
-						</div>
-						<br>
-						<div>
+				<div id="cardColLeft">
+					<!-- Card 1 -->
+					<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">
+						<h3 class="profHea">About</h3>
+						<div id="about">
 							<div>
-							<p class="profTitle">Grade:</p>
-							<span class="change radio" re="readonly" id="grade">{{grade}}</span>
+								<p class="profTitle">School Name:</p>
+								<span class="change" id="school">{{school}}</span>
 							</div>
-				            <div class="profOptions" style="background-color:{{divColor 'header'}}">
-			                  	<p class="profOptionText">9th</p>
-				                <p class="profOptionText">10th</p>
-				                <p class="profOptionText">11th</p>
-				                <p class="profOptionText">12th</p>
+							<br>
+							<div class="radioContainer">
+								<div>
+								<p class="profTitle">Grade:</p>
+								<span class="change radio" re="readonly" id="grade">{{grade}}</span>
+								</div>
+					            <div class="profOptions" style="background-color:{{divColor 'header'}}">
+				                  	<p class="profOptionText">9th</p>
+					                <p class="profOptionText">10th</p>
+					                <p class="profOptionText">11th</p>
+					                <p class="profOptionText">12th</p>
+					            </div>
 				            </div>
-			            </div>
-			        </div>
+				        </div>
+					</div>
+					<!-- Card 2 -->
+					<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
+						<h3 class="profHea">Preferences</h3>
+						<div id="preferences">
+				            <div class="radioContainer">
+				                <div class="inputRadio">
+				                <p class="profTitle">Theme:</p>
+				                <span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
+				                </div>
+				                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+				                    <p class="profOptionText">Light</p>
+				                    <p class="profOptionText">Dark</p>
+				                </div>
+				            </div>
+				            <br>
+				            <div class="radioContainer">
+				                <div class="inputRadio">
+				                <p class="profTitle">Default Mode:</p>
+				                <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
+				                </div>
+				                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+				                    <p class="profOptionText">Classes</p>
+				                    <p class="profOptionText">Calendar</p>
+				                </div>
+				            </div>
+				            <br>
+				            <div class="radioContainer">
+				                <div class="inputRadio">
+				                <p class="profTitle">Hide Homework:</p>
+				                <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
+				                </div>
+				                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+				                    <p class="profOptionText">1 Day</p>
+				                    <P class="profOptionText">2 Days</p>
+				                    <p class="profOptionText">1 Week</p>
+				                    <p class="profOptionText">1 Month</p>
+				                    <p class="profOptionText">Never</p>
+				                </div>
+				            </div>
+				            <br>
+				            <div class="radioContainer">
+				                <div class="inputRadio">
+				                <p class="profTitle">Hide Done:</p>
+				                <span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
+				                </div>
+				                <div class="profOptions" style="background-color:{{divColor 'header'}}">
+				                    <p class="profOptionText">Yes</p>
+				                    <p class="profOptionText">No</p>
+				                </div>
+				            </div>
+				        </div>
+					</div>
 				</div>
-				<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};height:{{profClassHeight}};">
-					<h3 class="profHea">Classes</h3>
-					<div id="classes">
-						<div id="profFunctions">
-							<div class="profFunction manageClass">
-					        	<i class="fa fa-tasks" aria-hidden="true"></i>
-					        	<h4 style="color:{{profClassTabColor 'manClass'}}">Manage my Classes</h4>
-					      	</div>
-					      	<div class="profFunction addClass">
-					        	<i class="fa fa-plus" aria-hidden="true"></i>
-					        	<h4 style="color:{{profClassTabColor 'addClass'}}">Join a Class</h4>
-					      	</div>
-					      	<div class="profFunction createClass">
-					        	<i class="fa fa-graduation-cap" aria-hidden="true"></i>
-					        	<h4 style="color:{{profClassTabColor 'creClass'}}">Create a Class</h4>
-					      	</div>
-					    </div>
-						<div id="profClassInfoHolder">
-						{{#if profClassTab "manClass"}}
-							<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>
-							<div class="classHolder" style="max-height:{{classHolderHeight}}">
-								{{#each myClasses}}
-									{{> classDisplay}}
+				<div id="cardColRight">
+					<!-- Card 3 -->
+					<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};">
+						<h3 class="profHea">Classes</h3>
+						<div id="classes">
+							<div id="profFunctions">
+								<div class="profFunction manageClass">
+						        	<i class="fa fa-tasks" aria-hidden="true"></i>
+						        	<h4 style="color:{{profClassTabColor 'manClass'}}">Manage my Classes</h4>
+						      	</div>
+						      	<div class="profFunction addClass">
+						        	<i class="fa fa-plus" aria-hidden="true"></i>
+						        	<h4 style="color:{{profClassTabColor 'addClass'}}">Join a Class</h4>
+						      	</div>
+						      	<div class="profFunction createClass">
+						        	<i class="fa fa-graduation-cap" aria-hidden="true"></i>
+						        	<h4 style="color:{{profClassTabColor 'creClass'}}">Create a Class</h4>
+						      	</div>
+						    </div>
+							<div id="profClassInfoHolder">
+							{{#if profClassTab "manClass"}}
+								<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>
+								<div class="classHolder">
+									{{#each myClasses}}
+										{{> classDisplay}}
 
-								{{/each}}
-								{{#if noclass}}
-									<h3>No results found...</h3>
-								{{/if}}
-							</div>
-						{{/if}}
-
-						{{#if profClassTab "addClass"}}
-							<i class="fa fa-search" aria-hidden="true"></i>
-							{{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}}
-							<h4 id="private">Join Private Class</h4>
-							<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>
-							<div class="classHolder" style="max-height:{{classHolderHeight}}">
-							{{#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}}
+									{{/each}}
+									{{#if noclass}}
+										<h3>No results found...</h3>
+									{{/if}}
+								</div>
 							{{/if}}
-							</div>
-						{{/if}}
 
-						{{#if profClassTab "creClass"}}
-							<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
-							<form id="create">
+							{{#if profClassTab "addClass"}}
+								<i class="fa fa-search" aria-hidden="true"></i>
+								{{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}}
+								<h4 id="private">Join Private Class</h4>
+								<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>
+								<div class="classHolder">
+								{{#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>
+							{{/if}}
+
+							{{#if profClassTab "creClass"}}
+								<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
 								<div id="formContainer">
 									<div class="formDiv">
 						            	<p class="profTitle">School:</p>
@@ -135,63 +192,12 @@
 						              	</div>
 							        </div>
 						        </div>
-					        	<h3 id="creSubmit">Submit Request</h3>
-				          	</form> 
-						{{/if}}
+						        <h3 id="creSubmit">Submit Request</h3>
+							{{/if}}
+							</div>
 						</div>
 					</div>
 				</div>
-				<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
-					<h3 class="profHea">Preferences</h3>
-					<div id="preferences">
-			            <div>
-			                <div class="inputRadio">
-			                <p class="profTitle">Theme:</p>
-			                <span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
-			                </div>
-			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
-			                    <p class="profOptionText">Light</p>
-			                    <p class="profOptionText">Dark</p>
-			                </div>
-			            </div>
-			            <br>
-			            <div>
-			                <div class="inputRadio">
-			                <p class="profTitle">Default Mode:</p>
-			                <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
-			                </div>
-			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
-			                    <p class="profOptionText">Classes</p>
-			                    <p class="profOptionText">Calendar</p>
-			                </div>
-			            </div>
-			            <br>
-			            <div>
-			                <div  class="inputRadio">
-			                <p class="profTitle">Hide Homework:</p>
-			                <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
-			                </div>
-			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
-			                    <p class="profOptionText">1 Day</p>
-			                    <P class="profOptionText">2 Days</p>
-			                    <p class="profOptionText">1 Week</p>
-			                    <p class="profOptionText">1 Month</p>
-			                    <p class="profOptionText">Never</p>
-			                </div>
-			            </div>
-			            <br>
-			            <div>
-			                <div class="inputRadio">
-			                <p class="profTitle">Hide Done:</p>
-			                <span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
-			                </div>
-			                <div class="profOptions" style="background-color:{{divColor 'header'}}">
-			                    <p class="profOptionText">Yes</p>
-			                    <p class="profOptionText">No</p>
-			                </div>
-			            </div>
-			        </div>
-				</div>
 			</div>
 		</div>
 	</div>
@@ -216,7 +222,7 @@
   			<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
   			<i class="fa fa-plus" aria-hidden="true"></i>
 			</div>
-			<div class="userHolder" style="max-height:{{userHolder}}">
+			<div class="userHolder">
 	  			{{#each selectedClass 'moderators'}}
 	  				{{> userDisplay}}
 	  			{{/each}}
@@ -228,7 +234,7 @@
 	  			<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
 	  			<i class="fa fa-plus" aria-hidden="true"></i>
 			</div>
-			<div class="userHolder" style="max-height:{{userHolder}}">	
+			<div class="userHolder">	
 	  			{{#each selectedClass 'banned'}}
 	  				{{> userDisplay}}
 	  			{{/each}}
@@ -245,6 +251,7 @@
   		<input id="privateCode" type="text" placeholder="Enter code here...">
   		<h4 id="privSubmit">Submit</h4>
   	</div>
+	{{> loginButtons}}
 </template>
 
 <template name="classDisplay">
diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js
index 7a9c650..522ecbc 100644
--- a/hourglass/client/profile/profile.js
+++ b/hourglass/client/profile/profile.js
@@ -1,4 +1,6 @@
-import {
+/* jshint esversion: 6 */
+
+import {
     Template
 } from 'meteor/templating';
 
@@ -58,46 +60,14 @@ Template.profile.helpers({
             }]
         };
     },
-    mainCenter() { // Centers main div container.
-        var width = window.innerWidth * 1600 / 1920 + 10;
-        return "width:" + width.toString() + "px;margin-left:" + -0.5 * width.toString() + "px";
+    banner() { // Returns banner
+        return Session.get("user").banner;
     },
-    mainHeight() { // Returns height of screen for div.
-        return window.innerHeight.toString() + "px";
-    },
-    banner() { // Styles the banner
-        var width = window.innerWidth * 1600 / 1920;
-        var height = width * 615 / 1600;
-        if (Meteor.user().profile.banner !== undefined || Meteor.user().profile.banner !== null) {
-            var banner = Meteor.user().profile.banner;
-        } else {
-            var banner = "Banners/defaultcover.jpg";
-            currentprofile = Meteor.user().profile;
-            currentprofile.banner = banner
-            Meteor.call("editProfile", currentprofile);
-        }
-        return "width:" + width.toString() + "px;height:" + height.toString() + "px;background-image:url(" + banner + ");background-size:" + width.toString() + "px " + height.toString() + "px";
-    },
-    avatar() { // Styles the avatar
-        var dim = window.innerWidth * 1600 / 1920 * 0.16;
-        var pic = "";
-        var userprofile = Meteor.user().profile.avatar;
-        if (userprofile !== undefined && userprofile !== null) {
-            pic = Meteor.user().profile.avatar;
-        } else {
-            pic = "Avatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString() + ".png";
-            currentprofile = Meteor.user().profile;
-            currentprofile.avatar = pic;
-            Meteor.call("editProfile", currentprofile);
-        }
-        return "background-image:url(" + pic + ");background-size:" + dim.toString() + "px " + dim.toString() + "px";
-    },
-    avatarDim() { // Dimensions of the avatar
-        var dim = window.innerWidth * 1600 / 1920 * 0.16;
-        return "height:" + dim.toString() + "px;width:" + dim.toString() + "px;top:" + 0.43 * window.innerHeight.toString() + "px;";
+    avatar() { // Returns avatar
+        return Session.get("user").avatar;
     },
     username() {  //Returns current user's username
-        return Meteor.user().profile.name;
+        return Session.get("user").name;
     },
     motd() { // Returns the current user's description
         if (Meteor.user().profile.description) {
@@ -141,12 +111,6 @@ Template.profile.helpers({
         }
         return array;
     },
-    profClassHeight() { // Dimensions the class height
-        return 0.6 * window.innerHeight.toString() + "px";
-    },
-    classHolderHeight() { // Dimensions the container for the classes
-        return 0.26 * window.innerHeight.toString() + "px";
-    },
     profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]    
         if (Session.equals("profClassTab",status)) {            
             return themeColors[Meteor.user().profile.preferences.theme].highlightText;        
@@ -206,9 +170,6 @@ Template.profile.helpers({
     },
     code() { // Returns if selected class has code.
         return Session.get("code");
-    },
-    userHolder() { // Returns height of user holders for moderators/banned.
-        return 0.15 * window.innerHeight.toString() + "px";
     }
 });
 
@@ -249,29 +210,41 @@ Template.profile.events({
         }
     },
     // MAIN BUTTONS
-    'click .addClass' () {        
+    'click .addClass' () { 
+        if(Session.equals("profClassTab","addClass")) return;         
         var functionHolder = document.getElementById("profClassInfoHolder");
-        closeDivFade(functionHolder);        
+        closeDivFade(functionHolder);
+        var div = document.getElementById("profClasses");
+        div.style.height = "50%"
         setTimeout(function() {            
-            Session.set("profClassTab", "addClass");            
+            Session.set("profClassTab", "addClass");
+            div.style.height = "90%";          
             openDivFade(functionHolder);        
-        }, 300);    
+        }, 400);
     },
-    'click .manageClass' () {        
+    'click .manageClass' () { 
+        if(Session.equals("profClassTab","manClass")) return;      
         var functionHolder = document.getElementById("profClassInfoHolder");
-        closeDivFade(functionHolder);        
+        closeDivFade(functionHolder);
+        var div = document.getElementById("profClasses");
+        div.style.height = "50%"     
         setTimeout(function() {            
-            Session.set("profClassTab", "manClass");            
+            Session.set("profClassTab", "manClass"); 
+            div.style.height = "90%";           
             openDivFade(functionHolder);        
-        }, 300);    
+        }, 400);    
     },
-    'click .createClass' () {        
+    'click .createClass' () {
+        if(Session.equals("profClassTab","creClass")) return;       
         var functionHolder = document.getElementById("profClassInfoHolder");        
-        closeDivFade(functionHolder);        
+        closeDivFade(functionHolder);
+            var div = document.getElementById("profClasses");
+        div.style.height = "50%"
         setTimeout(function() {            
-            Session.set("profClassTab", "creClass");            
+            Session.set("profClassTab", "creClass");
+            div.style.height = "90%";
             openDivFade(functionHolder);        
-        }, 300);    
+        }, 400);    
     },
     'click .classBox' (event) {  // When you click on a box that holds class
         if (event.target.id === "label" || 
@@ -600,7 +573,8 @@ function closeInput(modifyingInput) { // Closes current modifying input.
     }
     span.style.display = "initial";
     Session.set("modifying", null);
-    serverData = getProfileData();
+    Session.set("user", getProfileData());
+    serverData = Session.get("user");
     sendData("editProfile");
 }
 
@@ -609,19 +583,19 @@ function sendData(funcName) {
 }
 
 function getProfileData() { // Gets all data related to profile.
-    var profile = Meteor.user().profile;
+    var profile = Session.get("user");
     profile.description = document.getElementById("motd").childNodes[0].nodeValue;
     profile.school = document.getElementById("school").childNodes[0].nodeValue;
     var gradein = document.getElementById("grade").childNodes[0].nodeValue;
     profile.grade = parseInt(gradein.substring(gradein.length - 2, gradein));
-    profile.avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
-    profile.banner = document.getElementById("profBanner").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
+    profile.avatar = document.getElementById("profAvatar").src;
+    profile.banner = document.getElementById("profBanner").src;
     profile.preferences = {
         "theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
         "mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
-        "timeHide":document.getElementById("prefHide").childNodes[0].nodeValue
+        "timeHide":ref[document.getElementById("prefHide").childNodes[0].nodeValue],
+        "done":ref[document.getElementById("prefDone").childNodes[0].nodeValue]
     };
-
     return profile;
 }
 
diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js
index 5e0b18c..5f8d846 100644
--- a/hourglass/lib/constants.js
+++ b/hourglass/lib/constants.js
@@ -29,3 +29,12 @@ themeColors =  {
 };
 
 serverData = null;
+ref = {
+    "1 Day":1,
+    "2 Days":2,
+    "1 Week":7,
+    "1 Month":30,
+    "Never":0,
+    "Yes":true,
+    "No":false
+};
\ No newline at end of file