Fixed tab functionality and click to retract; moved requests to sidebar

hourglass/.meteor/packages

@@ -28,7 +28,6 @@ mizzao:autocomplete
 alanning:roles
 rzymek:fullcalendar
 momentjs:moment
-eternicode:bootstrap-datepicker
 shell-server@0.2.1
 http@1.2.9_1
 underscore@1.0.9
@@ -41,7 +40,8 @@ aldeed:collection2
 dburles:collection-helpers
 yogiben:admin-edit
 mfactory:admin-lte
-mrt:jquery-ui
 standard-minifier-css@1.2.0_1
 rochal:slimscroll
 meteorhacks:sikka
+mrt:jquery-ui
+rajit:bootstrap3-datepicker

hourglass/.meteor/versions

@@ -41,7 +41,6 @@ ecmascript-runtime@0.3.14_1
 ejson@1.0.12
 email@1.0.16
 es5-shim@4.6.14_1
-eternicode:bootstrap-datepicker@1.6.0_3
 fastclick@1.0.12
 fortawesome:fontawesome@4.5.0
 geojson-utils@1.0.9
@@ -98,6 +97,7 @@ pfafman:filesaver@1.3.2
 promise@0.8.7
 proyk:meteor-cookies@0.0.1
 raix:handlebar-helpers@0.2.5
+rajit:bootstrap3-datepicker@1.5.1
 random@1.0.10
 rate-limit@1.0.5
 reactive-dict@1.1.8

hourglass/client/main/main.css

@@ -166,7 +166,7 @@ a
 	resize: none;
 }
 
-.fa-bars, .fa-cog {
+.fa-bars, .fa-cog, .fa-question {
 	font-size: 3.5vh;
 	width: 6vh;
 	height: calc(6vh - 1px);
@@ -185,7 +185,7 @@ a
 	transition: color 0.5s ease, background-color 0.5s ease; 
 }
 
-.fa-bars:hover, .fa-cog:hover {
+.fa-bars:hover, .fa-cog:hover, .fa-question:hover {
 	background-color: rgba(0,0,0,0.2);
 }
 
@@ -253,6 +253,7 @@ a
 }
 
 .menuWrapper {
+	height: 94vh;
 	display: none;
 }
 
@@ -337,6 +338,10 @@ a
 	overflow-y: auto;
 }
 
+#classFilterHolder {
+	width: 100%;
+}
+
 .sideClass, .sideFilter {
 	width: 100%;
 
@@ -394,6 +399,10 @@ a
 	white-space: nowrap;
 }
 
+#filterWrapper {
+	width: 100%;
+}
+
 #filterHead, #filterWrapper .sectionTitle {
 	font-weight: 200;
 	padding: 0;
@@ -418,7 +427,6 @@ a
 }
 
 #filterHead .fa, #filterWrapper .sectionTitle .fa {
-	font-size: 120%;
 	padding: 5%;
 	float: right;
 	display: inline-block;
@@ -676,6 +684,10 @@ textarea.clickModify {
 	position: relative;
 }
 
+.prefWrapper {
+	position: relative;
+}
+
 .prefText {
 	padding: 4%;
 	background-color: rgba(255,255,255,0.15);
@@ -1404,83 +1416,36 @@ textarea.clickModify {
 	display: inline-block;
 }
 
-#requests {
+#requestDesc {
-	width: 300px;
+	font-size: 1.8vh;
-	height: 170px;
+	margin-left: 5%;
-	padding: 30px;
+	width: 90%;
 
-	border-top: 5px solid #852E6D;
-	box-shadow: -2px 0px 5px 1px #444;
-
-	position: absolute;
-	right: 5vw;
-	bottom: 0;
-
-	z-index: 30;
-
-	-webkit-transition: bottom 0.4s ease;  
-	-moz-transition: bottom 0.4s ease; 
-	-ms-transition: bottom 0.4s ease;
-	transition: bottom 0.4s ease;
-}
-
-#requestTab {
-	width: 70px;
-	height: 50px;
-
-	border-top: 5px solid #852E6D;
-	box-shadow: -2px -4px 5px 0px #444;
-
-	position: absolute;
-	right: 0;
-	top: -55px;
-
-	cursor: pointer;
-	z-index: 15;
-}
-
-.fa-question {
-	font-size: 36px;
-	width: 50px;
-	padding: 5px 10px 1px 10px;
 	text-align: center;
-
-	-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;
 }
 
-.fa-question:hover {
+#requestArea {
-	background-color: rgba(0,0,0,0.1);
+	font-size: 1.8vh;
+	width: 85%;
+	height: 35%;
+	margin-left: calc(7.5% - 6px);
+	margin-bottom: 5px;
+
+	outline: none;
 }
 
-#requests p {
+#requestRes {
-	font-size: 80%;
+	margin-left: 7.5%;
-	font-weight: 400;
-	margin: 0;
-	margin-bottom: 1vh;
-}
-
-#requests textarea {
-	width: 96%;
-	height: 100px;
-	margin-bottom: 10px;
-}
-
-#requestCont{
-	width: 100%;
 }
 
 #requestSubmit {
 	font-weight: 200;
-	font-size: 20px;
+	font-size: 2vh;
-	margin-right: 2%;
+	width: 80%;
-	padding: 2%;
+	margin: 5px auto 0 auto;
+	padding: 3%;
 
 	background-color: rgba(0,0,0,0.25);
-	float: right;
-
 	text-align: center;
 	cursor: pointer;
 
@@ -1494,6 +1459,10 @@ textarea.clickModify {
 	background-color: rgba(0,0,0,0.15);
 }
 
+#requestSubmit span {
+	margin-right: 5%;
+}
+
 .scaled {
 	-webkit-transform: scale(1.12);
 	-ms-transform: scale(1.12);

hourglass/client/main/main.html

@@ -11,125 +11,19 @@
             <div id="menuBar" style="background-color:{{divColor 'sidebarColor'}}">
                 <i class="fa fa-bars" style="color:{{iconStatus 'menu'}}" aria-hidden="true"></i>
                 <i class="fa fa-cog" style="color:{{iconStatus 'option'}}" aria-hidden="true"></i>
+                <i class="fa fa-question" style="color:{{iconStatus 'requests'}}" aria-hidden="true"></i>
             </div>
             <div id="menuContainer" style="background-color:{{divColor 'sidebarColor'}};">
-                <div class="menuWrapper menu">
+                <div class="menuWrapper">
-                    <div id="modes">
+                    {{#if sidebarStatus 'menu'}}
-                        <h3 class="sectionTitle">Main</h3>
+                        {{> sidebarMenuPlate}}
-                        <div class="mode classes">
+                    {{/if}}
-                            <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
+                    {{#if sidebarStatus 'option'}}
-                            <i class="fa fa-university" aria-hidden="true"></i>
+                        {{> sidebarOptionPlate}}
-                            <h4>Classes</h4>
+                    {{/if}}
-                        </div>
+                    {{#if sidebarStatus 'requests'}}
-                        <div class="mode calendar">
+                        {{> sidebarRequestPlate}}
-                            <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
+                    {{/if}}
-                            <i class="fa fa-calendar" aria-hidden="true"></i>
-                            <h4>Calendar</h4>
-                        </div>
-                        <div class="mode manageClass" onclick="window.location='/profile'">
-                            <div class="status"></div>
-                            <i class="fa fa-tasks" aria-hidden="true"></i>
-                            <h4>Manage Classes</h4>
-                        </div>
-                    </div>
-                    <div id="filters">
-                        <div id="filterHead" class="sectionTitle">
-                            <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">
-                                <h3>By Type</h3>
-                                <i class="fa fa-angle-down" aria-hidden="true"></i>
-                            </div>
-                            <div id="classFilterHolder">
-                                {{#each types}}
-                                    {{> sideTypeFilter}}
-                                {{/each}}
-                            </div>
-                            <div id="classFilterWrapper" class="sectionTitle">
-                                    <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">
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                        <h4>Export</h4>
-                    </div>
-                </div>
-                <div class="menuWrapper option">
-                    <h3 class="sectionTitle option">Preferences</h3>
-                    <div id="prefCont">
-                        <div class="prefWrapper">
-                            <h3 class="sectionTitle prefText">Theme:</h3>
-                            <div id="theme" class="clickModify dropdown" tabindex="1">
-                                <span>{{pref 'theme'}}</span>
-                                <i class="fa fa-angle-down" aria-hidden="true"></i>
-                            </div>
-                            <div class="optionHolder">
-                                {{#each selectOptions 'theme'}}
-                                    {{> option}}
-                                {{/each}}
-                            </div>
-                        </div>
-                        <div class="prefWrapper">
-                            <h3 class="sectionTitle prefText">Default Mode:</h3>
-                            <div id="mode" class="clickModify dropdown" tabindex="2">
-                                <span>{{pref 'mode'}}</span>
-                                <i class="fa fa-angle-down" aria-hidden="true"></i>
-                            </div>
-                            <div class="optionHolder">
-                                {{#each selectOptions 'mode'}}
-                                    {{> option}}
-                                {{/each}}
-                            </div>
-                        </div>
-                        <div class="prefWrapper">
-                            <h3 class="sectionTitle prefText">Hide Homework:</h3>
-                            <div id="timeHide" class="clickModify dropdown" tabindex="3">
-                                <span>{{pref 'timeHide'}}</span>
-                                <i class="fa fa-angle-down" aria-hidden="true"></i>
-                            </div>
-                            <div class="optionHolder">
-                                {{#each selectOptions 'timeHide'}}
-                                    {{> option}}
-                                {{/each}}
-                            </div>
-                        </div>
-                        <div class="prefWrapper">
-                            <h3 class="sectionTitle prefText">Hide Done:</h3>
-                            <div id="done" class="clickModify dropdown" tabindex="4">
-                                <span>{{pref 'done'}}</span>
-                                <i class="fa fa-angle-down" aria-hidden="true"></i>
-                            </div>
-                            <div class="optionHolder">
-                                {{#each selectOptions 'done'}}
-                                    {{> option}}
-                                {{/each}}
-                            </div>
-                        </div>
-                        <div class="prefWrapper">
-                            <h3 class="sectionTitle prefText">Hide Reported:</h3>
-                            <div id="hideReport" class="clickModify dropdown" tabindex="5">
-                                <span>{{pref 'hideReport'}}</span>
-                                <i class="fa fa-angle-down" aria-hidden="true"></i>
-                            </div>
-                            <div class="optionHolder">
-                                {{#each selectOptions 'hideReport'}}
-                                    {{> option}}
-                                {{/each}}
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -254,19 +148,120 @@
                 </div>
             </div>
         </div>
+        {{> loginButtons}}
+    </div>
+</template>
 
-        <div id="requests" style="bottom:{{requestStatus}};background-color:{{divColor 'secondaryColor'}}">
+<template name="sidebarMenuPlate">
-            <div id="requestTab" style="background-color:{{divColor 'secondaryColor'}}">
+    <div id="modes">
-                <i class="fa fa-question" aria-hidden="true"></i>
+        <h3 class="sectionTitle">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 class="mode manageClass" onclick="window.location='/profile'">
+            <div class="status"></div>
+            <i class="fa fa-tasks" aria-hidden="true"></i>
+            <h4>Manage Classes</h4>
+        </div>
+    </div>
+    <div id="filters">
+        <div id="filterHead" class="sectionTitle">
+            <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">
+                <h3>By Type</h3>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
             </div>
-            <p>Send an help request, feature, or bug report.</p>
+            <div id="classFilterHolder">
-            <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
+                {{#each types}}
-            <div id="requestCont" style="background-color:{{divColor 'secondaryColor'}}">
+                    {{> sideTypeFilter}}
-                <span class="resText">{{restrict 'requestArea'}}</span>
+                {{/each}}
-                <div id="requestSubmit">Send</div>
+            </div>
+            <div id="classFilterWrapper" class="sectionTitle">
+                    <h3>By Class</h3>
+                    <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div> 
+            <div id="classListHolder">    
+                {{#each myClasses}}
+                    {{> sidebarClasses}}
+                {{/each}}
             </div>
         </div>
-        {{> loginButtons}}
+    </div>
+    <div id="exportDiv" class="mode">
+        <i class="fa fa-download" aria-hidden="true"></i>
+        <h4>Export</h4>
+    </div>
+</template>
+
+<template name="sidebarOptionPlate">
+    <h3 class="sectionTitle option">Preferences</h3>
+    <div id="prefCont">
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Theme:</h3>
+            <div id="theme" class="clickModify dropdown" tabindex="1">
+                <span>{{pref 'theme'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="theme"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Default Mode:</h3>
+            <div id="mode" class="clickModify dropdown" tabindex="2">
+                <span>{{pref 'mode'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="mode"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Hide Homework:</h3>
+            <div id="timeHide" class="clickModify dropdown" tabindex="3">
+                <span>{{pref 'timeHide'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="timeHide"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Hide Done:</h3>
+            <div id="done" class="clickModify dropdown" tabindex="4">
+                <span>{{pref 'done'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="done"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Hide Reported:</h3>
+            <div id="hideReport" class="clickModify dropdown" tabindex="5">
+                <span>{{pref 'hideReport'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="hideReport"}}
+        </div>
+    </div>
+</template>
+
+<template name="sidebarRequestPlate">
+    <h3 class="sectionTitle option">Requests</h3>
+    <p id="requestDesc">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>
+    <span style="opacity:0">.</span>
+    <div id="requestSubmit">
+        <span>Send</span>
+        <span style="display:none">Request sent!</span>
+        <i class="fa fa-paper-plane" aria-hidden="true"></i>
     </div>
 </template>
 
@@ -368,7 +363,7 @@
         </div>
         <div>
             <span class="workTitle">Description:</span><br>
-            <span id="wDueDate" class="info">{{work 'description'}}</span>
+            <span id="wDueDate" class="info form-control">{{work 'description'}}</span>
         </div>
         <div>
             <span class="workTitle">Type:</span>
@@ -421,3 +416,11 @@
         </div> -->
     </div>
 </template>
+
+<template name="selectOptionMenu">
+    <div class="optionHolder">
+        {{#each selectOptions optionName}}
+            {{> option}}
+        {{/each}}
+    </div>
+</template>

hourglass/client/main/main.js

@@ -9,9 +9,11 @@ var load = true;
 var calWorkOpen = null;
 var calWorkDate = null;
 modifyingInput = null;
-dropOpen = null;
+var clickDisabled = false;
 var filterOpen =  [false,true,true];
 var sidebarMode = [null,null];
+var optionOpen = false;
+
 
 var openValues = {
     "requests": "-235px"
@@ -37,7 +39,7 @@ var defaultWork = {
 Session.set("user", {}); // Stores user preferences.
 Session.set("calendarClasses", []); // Stores calendar classes.
 Session.set("requests", false); // Status of requests.
-Session.set("sidebarMode", [null,null]); // Status of sidebars.
+Session.set("sidebarMode", ""); // Status of sidebars.
 Session.set("newWork", null); // If user creating new work.
 Session.set("currentWork",null); // Current stored work.
 Session.set("noclass", null); // If user does not have classes.
@@ -57,26 +59,21 @@ Template.login.rendered = function() {
 Template.main.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
     setTimeout(startDragula, 300);
-    $(".optionText").hover(
-        function() {
-            $(this).addClass("selectedOption");
-        },
-        function() {
-            $(this).removeClass("selectedOption");
-        }
-    );
     $("#menuContainer").toggle();
-    $("#classListHolder").slimScroll({
+    /*$("#classListHolder").slimScroll({
         height: '30vh',
         size: '5px',
         railVisible: true,
         railColor: '#222',
         railOpacity: 0.1,
-    });
+    });*/
 };
 
 Template.profile.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
+};
+
+Template.selectOptionMenu.rendered = function() {
     $(".optionText").hover(
         function() {
             $(this).addClass("selectedOption");
@@ -84,8 +81,26 @@ Template.profile.rendered = function() {
         function() {
             $(this).removeClass("selectedOption");
         }
-    );
+    );   
-};
+}
+
+Template.sidebarMenuPlate.rendered = function() {
+    $(".menuWrapper").slideDown(300);
+}
+
+Template.sidebarMenuPlate.helpers({
+    modeStatus(status) { // Color status of display modes.
+        return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
+    }
+});
+
+Template.sidebarOptionPlate.rendered = function() {
+    $(".menuWrapper").slideDown(300);
+}
+
+Template.sidebarRequestPlate.rendered = function() {
+    $(".menuWrapper").slideDown(300);
+}
 
 Template.registerHelper('adminPage', () => {
     return window.location.pathname.includes("/");
@@ -259,6 +274,7 @@ Template.registerHelper('selectOptions', (val) => {
             var year = (new Date()).getFullYear() + i;
             grade.push( { "val": year, "alias": year.toString() } );
         }
+        grade.push( { "val": 0, "alias": "Faculty" } ); 
         return grade;
     } else if(val === "school") {
         var school = [];
@@ -314,15 +330,15 @@ Template.main.helpers({
     },
     iconStatus(icon) {
         var sidebar = Session.get("sidebarMode");
-        return (sidebar[0] === icon && sidebar[1]) ? Session.get("user").preferences.theme.iconHighlight + ";background-color:rgba(0,0,0,0.2)" : "";
+        return (sidebar === icon) ? Session.get("user").preferences.theme.iconHighlight + ";background-color:rgba(0,0,0,0.2)" : "";
+    },
+    sidebarStatus(sidebar) {
+        return sidebar === Session.get("sidebarMode");  
     },
     requestStatus() {
         if (Session.get("requests")) return "0px";
         return openValues.requests;
     },
-    modeStatus(status) { // Color status of display modes.
-        return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
-    },
     currMode(name) { // Status of display mode.
         return Session.equals("mode", name);
     },
@@ -484,6 +500,7 @@ Template.main.events({
             if (!(e.includes("optionHolder") || e.includes("optionText"))) {
                 if(document.getElementById(modifyingInput).className.includes("dropdown")) {
                     $(".optionHolder").fadeOut(100);
+                    optionOpen = [null,false];
 
                     $(".selectedOption").removeClass("selectedOption");
                 } else {
@@ -495,58 +512,37 @@ Template.main.events({
 
         if (!e.includes("fa-cog") && // Sidebar closing.
             !e.includes("fa-bars") &&
+            !e.includes("fa-question") &&
             !document.getElementById("menuContainer").contains(event.target) &&
             !document.getElementById("menuBar").contains(event.target)) {
             if (Session.get("calCreWork")) {
                 if (!calWorkOpen) {
                     Session.set("calCreWork", false);
-                    Session.set("sidebar", null);
                 }
                 calWorkOpen = false;
             } else {
-                Session.set("sidebarMode", Session.get("sidebarMode")[0], false);
+                toggleToSidebar(false);
-                toggleSidebar(false);
-                Session.set("sidebarMode", [null,null]);
             }
         }
 
         if (e === "overlay") { // Overlay closing.
             closeDivFade(document.getElementsByClassName("overlay")[0]);
-            Session.set("newWork",false);
             if (!Session.get("newWork")) {
                 document.getElementById("workComment").value = "";
             }
         }
 
         if (!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown"));
-        if (!document.getElementById("requests").contains(event.target)) Session.set("requests", false);
     },
     // MAIN MENU BUTTONS
     'click .fa-bars' (event) { // Click menu button.
-        var sidebar = Session.get("sidebarMode");
+        toggleToSidebar("menu");
-        if(sidebar[0] === "menu" && sidebar[1]) {
-            Session.set("sidebarMode", ["menu",false]);
-            toggleSidebar(false);
-        } else {
-            Session.set("sidebarMode", ["menu",true]);
-
-            $(".menuWrapper.option").fadeOut(200);
-            toggleSidebar(true);
-            $(".menuWrapper.menu").slideDown(350);
-        }
     },
     'click .fa-cog' (event) { // Click settings button.
-        var sidebar = Session.get("sidebarMode");
+        toggleToSidebar("option");
-        if(sidebar[0] === "option" && sidebar[1]) {
+    },
-            Session.set("sidebarMode", ["option",false]);
+    'click .fa-question' (event) {
-            toggleSidebar(false);
+        toggleToSidebar("requests");
-        } else {
-            Session.set("sidebarMode", ["option",true]);
-
-            $(".menuWrapper.menu").slideUp(200);
-            toggleSidebar(true);
-            $(".menuWrapper.option").slideDown(350);
-        }
     },
     'click #filterHead' (event) {
         if(event.target.id === "disableFilter") return;
@@ -586,7 +582,7 @@ Template.main.events({
         }, 300);
         setTimeout(startDragula, 500);
         Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
-        toggleSidebar(false);
+        toggleToSidebar(false);
         Session.set("sidebarMode", [null,null]);
         Session.set("calCreWork", null);
     },
@@ -599,7 +595,7 @@ Template.main.events({
             openDivFade(modeHolder);
         }, 300);
         Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
-        toggleSidebar(false);
+        toggleToSidebar(false);
         Session.set("sidebarMode", [null,null]);
         Session.set("calCreWork", null);
     },
@@ -653,11 +649,15 @@ Template.main.events({
             "userClasses": Session.get("calendarClasses")
         };
         Meteor.call("createRequest", array, function(err, result) {
-            area.value = "Request sent!";
+            area.value = "";
+            Session.set("restrictText", {});
+            $("#requestSubmit span:first-child").fadeOut(200, function() {
+                $("#requestSubmit span:nth-child(2)").fadeIn(200);
+            })
             setTimeout(function() {
-                document.getElementById("requests").style.marginBottom = "-15.5vw";
+                $("#requestSubmit span:nth-child(2)").fadeOut(200, function() {
-                area.value = "";
+                    $("#requestSubmit span:first-child").fadeIn(200);
-                Session.set("commentRestrict", null);
+                })
             }, 750);
         });
     },
@@ -703,7 +703,7 @@ Template.main.events({
     // HANDLING INPUT CHANGING
     'focus .clickModify' (event) {
         $(".optionHolder")
-            .fadeOut(100);
+        .fadeOut(100);
 
         if(modifyingInput !== null) {
             if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
@@ -750,18 +750,18 @@ Template.main.events({
             }
         } else if (event.keyCode === 13) {
             lastSel[0].click();
+            $("#"+modifyingInput)[0].focus();
         }
     },
-    'focus .dropdown' (event) {
+    'click .dropdown, focus .dropdown' (event) {
-        $(".selectedOption").removeClass("selectedOption");
+        if(clickDisabled) return;
-
+        clickDisabled = true;
-        $("#" + modifyingInput).next()
+        if(event.target.id === optionOpen[0] && optionOpen[1]) {
-            .css('opacity',0)
+            toggleOptionMenu(false, event.target.id);
-            .slideDown(300)
+        } else {
-            .animate(
+            toggleOptionMenu(true, event.target.id);
-                { opacity: 1 },
+        }
-                { queue: false, duration: 100 }
+        setTimeout(function(){clickDisabled = false;},130); // Prevents spamming and handles extra click events.
-            );
     },
     'click .optionText' (event) { // Click each preferences setting.
         var option = event.target.childNodes[0].nodeValue;
@@ -772,7 +772,8 @@ Template.main.events({
             serverData = Session.get("currentWork");
 
             $("#" + modifyingInput).next()
-                .fadeOut(100);
+            .fadeOut(100);
+            optionOpen = [null,false];
             $(".selectedOption").removeClass("selectedOption");
             if(Session.get("newWork")) return;
             if(checkMissing()) return;
@@ -791,7 +792,8 @@ Template.main.events({
         }
 
         $("#" + modifyingInput).next()
-            .fadeOut(100);
+        .fadeOut(100);
+        optionOpen = [null,false];
 
         $(".selectedOption").removeClass("selectedOption");
     },
@@ -931,13 +933,37 @@ Template.main.events({
 
 // Other Functions
 
-function toggleSidebar(open) {
+function toggleToSidebar(sidebar) {
-    if(open) {
+    if(Session.get("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 toggleOptionMenu(toggle, menu) {
+    if(toggle) {
+        $(".selectedOption").removeClass("selectedOption");
+        $("#" + menu).next()
+        .css('opacity', 0)
+        .slideDown(300)
+        .animate(
+            { opacity: 1 },
+            { queue: false, duration: 100 }
+        );
+        optionOpen = [menu, toggle];
     } else {
-        $("#menuContainer").hide("slide",  {direction: "left"}, 250);
+        $("#" + menu).next().slideUp(100, function() {
-        $("#divCenter").stop().animate({left: '6vh'}, 250);
+            $(this).css("opacity", 0);
+        });
+        optionOpen = [null, toggle]; 
     }
 }
 

hourglass/client/profile/profile.js

@@ -106,7 +106,9 @@ Template.profile.helpers({
         return "Click here to edit...";
     },
     grade() { // Returns the current user's grade
-        if (Session.get("user").grade !== undefined && Session.get("user").grade !== null && Session.get("user").grade !== "") return Session.get("user").grade;
+        if (Session.get("user").grade !== undefined && 
+            Session.get("user").grade !== null && 
+            Session.get("user").grade !== "") return (Session.get("user").grade === 0) ? "Faculty" : Session.get("user").grade;
         return "Click here to edit...";
     },
     classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) ( Only your school)