New UI, display fixes, and small bugs

hourglass/.meteor/packages

@@ -43,3 +43,4 @@ dburles:collection-helpers
 yogiben:admin-edit
 mfactory:admin-lte
 standard-minifier-css
+mrt:jquery-ui

hourglass/.meteor/versions

@@ -84,6 +84,7 @@ modules-runtime@0.7.6_1
 momentjs:moment@2.15.1
 mongo@1.1.12_1
 mongo-id@1.0.5
+mrt:jquery-ui@1.9.2
 natestrauser:select2@4.0.3
 npm-mongo@1.5.49
 oauth@1.1.11

hourglass/client/main/main.css

@@ -55,7 +55,7 @@ html {
 
 .formInvalid::-webkit-input-placeholder {
    color: red;
-}
+}s
 
 .formInvalid:-moz-placeholder {
    color: red;  
@@ -93,50 +93,62 @@ body {
 	width: 100%;
 	height: 6vh;
 	margin: 0;
-	box-shadow: 2px 2px 5px 3px #666;
+	box-shadow: 0px 5px 2px -2px #666;
 
 	display: inline-block;
-	position: absolute;
+	z-index: 0;
-	top: 0;
+}
-	z-index: 50;
+
+#mainHeader h1 {
+	margin-left: 1%;
 }
 
 #mainHeader h1, #mainHeader h2 {
 	font-size: 3.5vh;
-	margin-left: 0.5%;
 	padding: 0;
-	height: 5.5vh;
+	height: 6vh;
-	line-height: 5.5vh;
 
-	-webkit-filter: none;
+	display: inline;
-	filter: none;
+
+	line-height: 6vh;
+	text-align: right;
 }
 
 #mainHeader h2 {
 	font-weight: 200;
 	font-size: 3vh;
-	float: left;
 }
 
+#divLeftBar, #divCenter {
+	height: 100%;
+	position: absolute;
+	top: 0;
+}
+
+#divCenter {
+	left: 6vh;
+	right: 0;
+	z-index: 10;
+}
+
+#divLeftBar {
+	width: 36vh;
+	z-index: 5;
+}
+a
 .noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5,
 .gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 {
 	margin: 0;
-
-	-webkit-filter: drop-shadow(2px 2px 5px #666);
-	filter: drop-shadow(2px 2px 5px #666);
 }
 
 .noScroll h1, .gu-mirror h1 {
 	padding: 0.4%;
-	float: left;
 }
 
 .noScroll h4, .gu-mirror h4 {
 	font-size: 130%;
 	font-weight: 200;
 	padding: 5%;
-	-webkit-filter: drop-shadow(2px 2px 5px #333);
-	filter: drop-shadow(2px 2px 5px #333);
 
 	display: inline-block;
 
@@ -156,32 +168,21 @@ body {
 
 .fa-bars, .fa-cog {
 	font-size: 3.5vh;
-	width: 5.5vh;
+	width: 6vh;
-	height: 5.5vh;
+	height: calc(6vh - 1px);
-	line-height: 5.5vh;
+
+	border-bottom: 2px solid #333;
+
+	position: relative;
+	line-height: 6vh;
 	text-align: center;
 
-	float: left;
+	cursor: pointer;
 
 	-webkit-transition: color 0.5s ease, background-color 0.5s ease;  
 	-moz-transition: color 0.5s ease, background-color 0.5s ease; 
 	-ms-transition: color 0.5s ease, background-color 0.5s ease;
 	transition: color 0.5s ease, background-color 0.5s ease; 
-
-	cursor: pointer;
-}
-
-#headerBar {
-	width: 100%;
-	height: 0.5vh;
-	background-color: #33ADFF;
-
-	position: absolute;
-	bottom: 0;
-}
-
-.fa-cog {
-	float: right;
 }
 
 .fa-bars:hover, .fa-cog:hover {
@@ -193,8 +194,10 @@ body {
 }
 
 #dropdown {
-	width: 5.5vh;
+	width: auto;
-	height: 5.5vh;
+	height: 6vh;
+	padding-right: 2vh;
+
 	float: right;
 	display: inline-block;
 	cursor: pointer;
@@ -205,120 +208,121 @@ body {
 	transition: background-color 0.5s ease;
 }
 
-#dropdown img{
+#dropdown img {
 	width: 4vh;
 	height: 4vh;
-	padding: .7vh;
+	padding: 1vh;
-	line-height: 5.5vh;
+	line-height: 6vh;
 
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 }
 
-#dropdown:hover {
+#dropdown h4 {
-	background-color: rgba(0,0,0,0.1);
+	padding: 0;
+	vertical-align: top;
+	line-height: 6vh;
 }
 
-#menuContainer, #optionsContainer {
+#dropdown:hover {
+	background-color: rgba(0,0,0,0.3);
+}
+
+#menuBar {
+	height: 100%;
+	width: 6vh;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
+
+	z-index: 0;
+	float: left;
+}
+
+#menuContainer {
 	min-height: 100%;
 	max-height: 100%;
-	width: 250px;
+	width: 30vh;
-	padding: 1% 0 1% 0;
-	box-shadow: 2px 2px 5px 3px #666;
 
-	position: absolute;
-	top: 6vh;
-	z-index: 5;
-	overflow: hidden;
-	
-	-webkit-transition: left 0.5s ease, right 0.5s ease;  
-	-moz-transition: left 0.5s ease, right 0.5s ease 
-	-ms-transition: left 0.5s ease, right 0.5s ease;
-	transition: left 0.5s ease, right 0.5s ease; 
-}
-
-#optionsContainer {
-	padding: 40px 0 40px 40px;
-	right: 0;
-}
-
-#optionsContainer .change {
-	color: #000;
-}
-
-#optionsContainer h3 {
-	font-size: 175%;
-}
-
-.mode, .function {
-	width: 100%;
 	position: relative;
-	background-color: rgba(255,255,255,0.2);
+	display: inline-block;
+	z-index: -1;
+	overflow: hidden;
 
-	-webkit-transition: background-color 0.5s ease, box-shadow 0.5s ease;  
+	position: fixed;
-	-moz-transition: background-color 0.5s ease, box-shadow 0.5s ease; 
+	left: 6vh;
-	-ms-transition: background-color 0.5s ease, box-shadow 0.5s ease;
+}
-	transition: background-color 0.5s ease, box-shadow 0.5s ease; 
+
+.menuWrapper {
+	display: none;
+}
+
+#modes {
+	margin-top: 6vh;
+}
+
+.sectionTitle {
+	font-weight: 200;
+	width: 100%;
+	padding: 6%;
+	background-color: rgba(255,255,255,0.1);
+}
+
+.mode {
+	width: 100%;
+	display: table;
+	background-color: rgba(0,0,0,0.1);
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease; 
 
 	cursor: pointer;
 }
 
-.mode:hover, .function:hover {
+.mode:hover {
-	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+	background-color: rgba(0,0,0,0.2);
 }
 
-.mode:active, .function:active {
+.mode:active {
-	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.3);
+	background-color: rgba(0,0,0,0.3);
-
-	-webkit-transition: box-shadow 0.2s ease;  
-	-moz-transition: box-shadow 0.2s ease; 
-	-ms-transition: box-shadow 0.2s ease;
-	transition: box-shadow 0.2s ease; 
 }
 
-.fa-university, .fa-calendar, .fa-download {
+.status {
-	font-size: 175%;
+	width: 3% !important;
-	width: 12%;
+	height: 100%;
-	padding: 10%;
+	border-spacing: 6%;
+	display: table-cell;
 
-	-webkit-filter: drop-shadow(2px 2px 5px #666);
+	-webkit-transition: background-color 0.3s ease;  
-	filter: drop-shadow(2px 2px 5px #666);
+	-moz-transition: background-color 0.3s ease; 
+	-ms-transition: background-color 0.3s ease;
+	transition: background-color 0.3s ease; 	
 }
 
-.noScroll .fa-plus, .creWork .fa-plus, .fa-minus, .fa-tasks, .fa-graduation-cap, .fa-exchange {
+.mode .fa {
+	width: 10%;
+	padding: 6%;
+	display: table-cell;
+}
+
+.mode h4 {
+	width: 74%;
+	display: table-cell;
+}
+
+#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks {
+	font-size: 150%;
+}
+
+.noScroll .fa-plus, .creWork .fa-plus, .fa-minus, .fa-graduation-cap, .fa-exchange {
 	font-size: 130%;
 	padding: 5%;
-
-	-webkit-filter: drop-shadow(2px 2px 5px #666);
-	filter: drop-shadow(2px 2px 5px #666);
-}
-
-#exportText {
-    display: inline;
-}
-
-.fa-download {
-    padding: 0%;
 }
 
 #exportDiv {
-    position: absolute;
+	position: absolute;
-    bottom: 9%;
+    bottom: 0;
-}
-
-#functions {
-	width: 100%;
-	margin-top: 7%;
-
-	border-style: solid;
-	border-color: #D9D9D9;
-	border-left: none;
-
-	box-shadow: 0px 4px 8px 1px #222;
-
-	position: relative;
-	z-index: 1;
 }
 
 #classListHolder {
@@ -333,28 +337,67 @@ body {
 	max-height: 20vh;
 }
 
-#classListHolder h3 {
+.sideClass, .sideFilter {
-	font-weight: 200;
+	width: 100%;
-	margin: 5%;
-	margin-right: 4%;
 
-	display: inline-block;
+	background-color: rgba(0,0,0,0.1);
+	cursor: pointer;
+	display: table;
+
+	-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; 
 }
 
-#classFilterHolder h3 {
+.sideClass:hover, .sideFilter:hover {
-	font-weight: 200;
-	padding: 5%;
-
-	box-shadow: 0px 4px 10px 1px #222;
 	background-color: rgba(0,0,0,0.2);
 }
 
-.sideClass, .sideFilter, #exportDiv {
+.sideClass:active, .sideFilter:active {
-	width: 100%;
+	background-color: rgba(0,0,0,0.3);
-	height: 5vh;
+}
-	padding: 1.5vh;
+
+.sideClass span {
+	font-weight: 400;
+	margin: 0;
+	font-size: 110%;
+	padding: 5%;
+	display: table-cell;
+}
+
+.sideClassName {
+	width: 65%;
+	padding-left: 5%;
+}
+
+.sideClassHour {
+	width: 30%;
+	color: #CCC;
+}
+
+.sideTypeName {
+	font-size: 110%;
+	width: 92%;
+	margin: 0;
+	padding: 5%;
+	padding-left: 5%;
+	
+	display: table-cell;
+}
+
+#classesMode {
+	height: 94vh;
+
+	overflow-x: auto;
+	overflow-y: hidden;
+	white-space: nowrap;
+}
+
+#filterHead {
+	font-weight: 200;
+	padding: 0;
 
-	background-color: rgba(255,255,255,0.1);
 	cursor: pointer;
 
 	-webkit-transition: background-color 0.4s ease;  
@@ -363,84 +406,56 @@ body {
 	transition: background-color 0.4s ease; 
 }
 
-.sideClass div {
+#filterHead:hover {
-	height: 100%;
+	background-color: rgba(255,255,255,0.2);
+}
+
+#filterHead h3:first-child {
+	font-weight: 200;
+	padding: 5%;
 	display: inline-block;
+	pointer-events: none;
 }
 
-.sideClass div:first-child {
+#filterHead .fa {
-	width: 80%;
+	font-size: 120%;
-}
+	padding: 5%;
-
-.sideClass:hover, .sideFilter:hover, #exportDiv:hover {
-	background-color: rgba(255,255,255,0.3);
-}
-
-.sideClassName {
-	font-weight: 600;
-	margin: 0;
-	display: table-row;
-}
-
-.sideClassHour {
-	font-weight: 400;
-	color: #CCC;
-	margin: 0;
-	display: table-row;
-}
-
-.sideTypeName {
-	margin: 0;
-	display: inline-block;
-}
-
-.sideFilter, #exportDiv {
-	height: auto;
-}
-
-.fa-dot-circle-o {
-	font-size: 1.1vw;
-	color: #53BD42;
-
 	float: right;
-	text-align: right;
-}
-
-.sideClass .fa-dot-circle-o {
-	line-height: 4.4vh;
-}
-
-.sideFilter div {
-	width: 100%;
-	height: 100%;
-}
-
-.sideFilter .fa-dot-circle-o {
-	margin: 0;
-	margin-right: 3vh;
 	display: inline-block;
+	pointer-events: none;
 }
 
-#classesMode {
+#disableFilter {
-	width: 100%;
+	font-weight: 200;
-	height: 94vh;
+	font-size: 90%;
+	margin-left: 10%;
+	padding: 4%;
+	background-color: rgba(255,255,255,0.2);
 
-	position: absolute;
+	display: inline-block;
-	top: 6vh;
+	cursor: pointer;
-	right: 0;
+	pointer-events: all;
-	bottom: 0;
+	z-index: 2;
-	left: 0;
 
-	overflow-x: auto;
+	-webkit-transition: background-color 0.4s ease;  
-	overflow-y: hidden;
+	-moz-transition: background-color 0.4s ease; 
-	white-space: nowrap;
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+#disableFilter:hover {
+	background-color: rgba(0,0,0,0.1);
+}
+
+#filterWrapper {
+	display: none;
 }
 
 .mainClass {
 	width: 100%;
 	padding-bottom: 1%;
 
-	box-shadow: 2px 2px 5px 3px #666;
+	box-shadow: 2px 2px 5px 1px #666;
 }
 
 .classWrapper {
@@ -466,6 +481,10 @@ body {
 	cursor: pointer;
 }
 
+.sectionTitle.option {
+	margin-top: 6vh;
+}
+
 .mainClassName {
 	font-size: 160%;
 	white-space: normal;
@@ -482,7 +501,7 @@ body {
 .creWork {
 	margin-bottom: 5%;
 	cursor: pointer;
-	box-shadow: 0px 5px 5px 1px #666;
+	box-shadow: 0px 5px 5px -2px #666;
 
 	-webkit-transition: background-color 0.4 ease;  
 	-moz-transition: background-color 0.4s ease; 
@@ -506,7 +525,7 @@ body {
 	width: 90%;
 	margin: 5%;
 	background-color: rgba(255,255,255,0.3);
-	box-shadow: 2px 2px 5px 3px #666;
+	box-shadow: 1px 1px 5px 1px #666;
 	cursor: pointer;
 
 	-webkit-transition: box-shadow 0.4s ease, transform 0.3s ease;  
@@ -516,7 +535,11 @@ body {
 }
 
 .workCard:hover {
-	box-shadow: 2px 2px 5px 3px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
+	box-shadow: 1px 1px 5px 1px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
+}
+
+.workCard div {
+	pointer-events: none;
 }
 
 .cWorkTop {
@@ -636,7 +659,7 @@ textarea.clickModify {
 	font-size: 130%;
 }
 
-.workTitle, .prefTitle {
+.workTitle {
 	font-size: 150%;
 	font-weight: 400;
 	margin: 0 3% 1% 0;
@@ -648,18 +671,23 @@ textarea.clickModify {
 	margin-top: 5%;
 }
 
-.prefWrapper {
+.menuWrapper .prefWrapper {
-	width: 85%;
+	width: 100%;
 	position: relative;
 }
 
+.prefText {
+	padding: 4%;
+	background-color: rgba(255,255,255,0.15);
+}
+
 .noneLeft {
 	color: red;
 }
 
 .clickModify.dropdown {
-	font-size: 1.2vw;
+	font-size: 120%;
-	width: 100%;
+	width: calc(100% - 2px);
 	border: 1px solid #999797;
 
 	background-color: rgba(0,0,0,0.07);
@@ -677,21 +705,15 @@ textarea.clickModify {
 }
 
 .clickModify.dropdown span {
-	width: 75%;
+	width: 78%;
 	padding: 3% 5% 3% 5%;
 	
 	display: inline-block;
 	pointer-events: none;
 }
 
-.fa-caret-down {
-	font-size: 1.1vw;
-	text-align: right;
-	pointer-events: none;
-}
-
 .optionHolder {
-	width: 100%;
+	width: calc(100% - 2px);
 	margin-top: -1px;
 
 	border: 1px solid #666;
@@ -932,10 +954,10 @@ textarea.clickModify {
 	width: 90%;
 	height: 94vh;
 	margin: auto;
-	padding-top: 5%;
+	padding-top: 1%;
 
 	position: absolute;
-	top: 6vh;
+	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;	
@@ -1078,22 +1100,6 @@ textarea.clickModify {
   }
 }
 
-#disableFilter {
-	font-size: 90%;
-	margin: 0 0 0 23% !important;
-	padding: 4%;
-	background-color: rgba(255,255,255,0.2);
-
-	-webkit-transition: background-color 0.4s ease;  
-	-moz-transition: background-color 0.4s ease; 
-	-ms-transition: background-color 0.4s ease;
-	transition: background-color 0.4s ease;
-}
-
-#disableFilter:hover {
-	background-color: rgba(255,255,255,0.1);
-}
-
 .fc-past {
 	background-color: rgba(0,0,0,0.2);
 }
@@ -1120,14 +1126,6 @@ textarea.clickModify {
 	pointer-events: auto;
 }
 
-#prefCont {
-	margin-left: 5%;
-}
-
-#prefCont .changeInput {
-	width: 70%;
-}
-
 #workComment {
 	width: 99%;
 	margin-bottom: 3%;
@@ -1327,20 +1325,20 @@ textarea.clickModify {
 
 	position: absolute;
 	top: -2.9vh;
-	right: 2vw;
+	right: 1.5vw;
 	z-index: 18;
 }
 
 #userDropdown {
-	width: 15vw;
+	width: 12vw;
 	margin-top: 10vh;
 
-	box-shadow: 2px 2px 5px 2px #666;	
+	box-shadow: 1px 1px 3px 1px #666;	
 	display: none;
 
 	position: absolute;
-	top: 1vh;
+	top: 0.5vh;
-	right: 4vw;
+	right: 1.5vw;
 	z-index: 20;
 
 	opacity: 0;
@@ -1373,7 +1371,7 @@ textarea.clickModify {
 
 #userDropdownAvatar p {
 	font-size: 1.2vw;
-	width: 15vw;
+	width: 12vw;
 	margin: 0 auto 0 auto;
 	padding-top: 7.5vw;
 	text-align: center;

hourglass/client/main/main.html

@@ -5,141 +5,152 @@
 
 <template name="main">
     <div class="noScroll">
-        <header id="mainHeader" style="background-color:{{userProfile}}{{divColor 'mainColor'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
-            <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
-            <h1>Hourglass</h1><h2>{{schoolName}}</h2>
-            <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
-            <div id="dropdown">
-                <img src="{{avatar}}">
-            </div>
-            <div id="headerBar" style="background-color:{{divColor 'iconHighlight'}}"></div>
-        </header>
-        <div id="menuContainer" style="left:{{menuStatus}};background-color:{{divColor 'sidebarColor'}}">
-            <div id="modes">
-                <div class="mode classes">
-                    <i class="fa fa-university" aria-hidden="true"></i>
-                    <h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
-                </div>
-                <div class="mode calendar">
-                    <i class="fa fa-calendar" aria-hidden="true"></i>
-                    <h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
-                </div>
-            </div>
-            <div id="functions">
-                <div class="function manageClass" onclick="window.location='/profile'">
-                    <i class="fa fa-tasks" aria-hidden="true"></i>
-                    <h4>Manage Classes</h4>
-                </div>
-            </div>
-            {{#if myClasses}}
-                <div id="classFilterHolder">
-                    <h3>Filters</h3>
-                    {{#each types}}
-                        {{> sideTypeFilter}}
-                    {{/each}}
-                </div>
-                <div id="classListHolder">
-                    <h3>By Class </h3>
-                    {{#if calCreWork}}
-                        <h3 id="calCreWork">-- Pick a class</h3>
-                    {{else}}
-                        {{#if filterOn}}
-                            <h3 id="disableFilter">Disable All</h3>
-                        {{/if}}
-                    {{/if}}
-                    <div id="sideClassWrapper">
-                        {{#each myClasses}}
-                            {{> sidebarClasses}}
-                        {{/each}}
-                    </div>
-                </div>
-            {{/if}}
-            <div id="exportDiv">
-                <i id="export" class="fa fa-download" aria-hidden="true"></i>
-                <h4 id="exportText">Export</h4>
-            </div>
-        </div>
-        <div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebarColor'}}">
-            <h3>Preferences</h3>
-            <div id="prefCont">
-                <div class="prefWrapper">
-                    <p class="prefTitle">Theme:</p>
-                    <div id="theme" class="clickModify dropdown" tabindex="1">
-                        <span>{{pref 'theme'}}</span>
-                        <i class="fa fa-caret-down" aria-hidden="true"></i>
-                    </div>
-                    <div class="optionHolder">
-                        {{#each selectOptions 'theme'}}
-                            {{> option}}
-                        {{/each}}
-                    </div>
-                </div>
-                <div class="prefWrapper">
-                    <p class="prefTitle">Default Mode:</p>
-                    <div id="mode" class="clickModify dropdown" tabindex="2">
-                        <span>{{pref 'mode'}}</span>
-                        <i class="fa fa-caret-down" aria-hidden="true"></i>
-                    </div>
-                    <div class="optionHolder">
-                        {{#each selectOptions 'mode'}}
-                            {{> option}}
-                        {{/each}}
-                    </div>
-                </div>
-                <div class="prefWrapper">
-                    <p class="prefTitle">Hide Homework:</p>
-                    <div id="timeHide" class="clickModify dropdown" tabindex="3">
-                        <span>{{pref 'timeHide'}}</span>
-                        <i class="fa fa-caret-down" aria-hidden="true"></i>
-                    </div>
-                    <div class="optionHolder">
-                        {{#each selectOptions 'timeHide'}}
-                            {{> option}}
-                        {{/each}}
-                    </div>
-                </div>
-                <div class="prefWrapper">
-                    <p class="prefTitle">Hide Done:</p>
-                    <div id="done" class="clickModify dropdown" tabindex="4">
-                        <span>{{pref 'done'}}</span>
-                        <i class="fa fa-caret-down" aria-hidden="true"></i>
-                    </div>
-                    <div class="optionHolder">
-                        {{#each selectOptions 'done'}}
-                            {{> option}}
-                        {{/each}}
-                    </div>
-                </div>
-                <div class="prefWrapper">
-                    <p class="prefTitle">Hide Reported:</p>
-                    <div id="hideReport" class="clickModify dropdown" tabindex="5">
-                        <span>{{pref 'hideReport'}}</span>
-                        <i class="fa fa-caret-down" aria-hidden="true"></i>
-                    </div>
-                    <div class="optionHolder">
-                        {{#each selectOptions 'hideReport'}}
-                            {{> option}}
-                        {{/each}}
-                    </div>
-                </div>
-            </div>
-        </div>
-
         <img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
-        <div id="mainBody{{highlight}}">
+        <div id="divLeftBar">
-            {{#if currMode 'classes'}}
+            <div id="menuBar" style="background-color:{{divColor 'sidebarColor'}}">
-                <div id="classesMode">
+                <i class="fa fa-bars" style="color:{{iconStatus 'menu'}}" aria-hidden="true"></i>
-                    {{#each myClasses}}
+                <i class="fa fa-cog" style="color:{{iconStatus 'option'}}" aria-hidden="true"></i>
-                        {{> classesMode}}
+            </div>
-                    {{/each}}
+            <div id="menuContainer" style="background-color:{{divColor 'sidebarColor'}};">
+                <div class="menuWrapper menu">
+                    <div id="modes">
+                        <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">
+                            <h3 class="sectionTitle">By Type</h3>
+                            <div id="classFilterHolder">
+                                {{#each types}}
+                                    {{> sideTypeFilter}}
+                                {{/each}}
+                            </div>
+                            <div id="classListHolder">
+                                <h3 class="sectionTitle">By Class</h3>    
+                                <div id="sideClassWrapper">
+                                    {{#each myClasses}}
+                                        {{> sidebarClasses}}
+                                    {{/each}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="exportDiv" class="mode">
+                        <i class="fa fa-download" aria-hidden="true"></i>
+                        <h4>Export</h4>
+                    </div>
                 </div>
-            {{/if}}
+                <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>
+        <div id="divCenter">
+            <header id="mainHeader" style="background-color:{{divColor 'mainColor'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
+                <h1>Hourglass</h1><h2>{{schoolName}}</h2>
+                <div id="dropdown">
+                    <img src="{{avatar}}">
+                    <h4>{{username}}</h4>
+                </div>
+            </header>
+            <div id="mainBody{{highlight}}">
+                {{#if currMode 'classes'}}
+                    <div id="classesMode">
+                        {{#each myClasses}}
+                            {{> classesMode}}
+                        {{/each}}
+                    </div>
+                {{/if}}
 
-            {{#if currMode 'calendar'}}
+                {{#if currMode 'calendar'}}
-                <div id="calendar">
+                    <div id="calendar">
-                    {{> fullcalendar calendarOptions}}
+                        {{> fullcalendar calendarOptions}}
-                </div>
+                    </div>
-            {{/if}}
+                {{/if}}
+            </div>
         </div>
 
         <div class="overlay">
@@ -256,15 +267,18 @@
 
 <template name="sidebarClasses">
     <div class="sideClass" classid="{{_id}}">
-        <div>
+        {{#unless calCreWork}}
-            <p class="sideClassName">{{name}}</p>
+            <div class="status" style="background-color:{{selected}}"></div>
-            <p class="sideClassHour">{{hour}}</p>
+        {{/unless}}
-        </div>
+        <span class="sideClassName">{{name}}</span>
-        <div>
+        <span class="sideClassHour">{{hour}}</span>
-            {{#if selected}}
+    </div>
-                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
+</template>
-            {{/if}}
+
-        </div>
+<template name="sideTypeFilter">
+    <div class="sideFilter" type="{{type}}">
+        <div class="status" style="background-color:{{selected}}"></div>
+        <span class="sideTypeName">{{typeName}}</span>
     </div>
 </template>
 
@@ -334,17 +348,6 @@
     </div>
 </template>
 
-<template name="sideTypeFilter">
-    <div class="sideFilter" type="{{type}}">
-        <div>
-            <p class="sideTypeName">{{typeName}}</p>
-            {{#if selected}}
-                <i class="fa fa-dot-circle-o" aria-hidden="true"></i>
-            {{/if}}
-        </div>
-    </div>
-</template>
-
 <template name="option">
     <p class="optionText" style="background-color:{{divColor 'mainColor'}}">{{alias}}</p>
 </template>
@@ -396,7 +399,7 @@
             <div id="typeWrapper">
                 <div id="wType" class="clickModify dropdown" tabindex="13">
                     <span>{{work 'type'}}</span>
-                    <i class="fa fa-caret-down" aria-hidden="true"></i>
+                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                 </div>
                 <div class="optionHolder type">
                     {{#each selectOptions 'type'}}

hourglass/client/main/main.js

@@ -10,10 +10,10 @@ var calWorkOpen = null;
 var calWorkDate = null;
 modifyingInput = null;
 dropOpen = null;
+var filterOpen =  false;
+var sidebarMode = [null,null]
 
 var openValues = {
-    "menu": "-270px",
-    "options": "-300px",
     "requests": "-235px"
 };
 
@@ -36,10 +36,10 @@ var defaultWork = {
 // Reactive variables.
 Session.set("user", {}); // Stores user preferences.
 Session.set("calendarClasses", []); // Stores calendar classes.
-Session.set("sidebar", null); // Status of sidebar.
 Session.set("requests", false); // Status of requests.
+Session.set("sidebarMode", [null,null]); // Status of sidebars.
 Session.set("newWork", null); // If user creating new work.
-Session.set("currentWork",null);
+Session.set("currentWork",null); // Current stored work.
 Session.set("noclass", null); // If user does not have classes.
 Session.set("calCreWork", null); // If user is creating a work from calendar.
 Session.set("classDisp", []); // Stores current filter for classes.
@@ -65,6 +65,7 @@ Template.main.rendered = function() {
             $(this).removeClass("selectedOption");
         }
     );
+    $("#menuContainer").toggle();
 };
 
 Template.profile.rendered = function() {
@@ -79,12 +80,6 @@ Template.profile.rendered = function() {
     );
 };
 
-Template.registerHelper('userProfile', () => {
-    if (Meteor.user() === undefined || Meteor.user() === null) return;
-    Session.set("user", Meteor.user().profile);
-    return;
-});
-
 Template.registerHelper('adminPage', () => {
     return window.location.pathname.includes("/");
 });
@@ -145,7 +140,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
                     found.mine = false;
                 }
             }
-            if (classDisp.indexOf(courses[i]) !== -1) found.selected = true; // Filter selected.
+            found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected.
             array.push(found);
 
             var thisWork = work.find({
@@ -296,15 +291,6 @@ Template.main.helpers({
         if (Session.get("user").school === undefined || Session.get("user").school === null) return;
         return " - " + Session.get("user").school;
     },
-    iconColor(icon) { // Sidebar status color
-        if (Session.equals("sidebar", icon + "Container")) {
-            return Session.get("user").preferences.theme.statusIcons;
-        } else if (Session.equals("sidebar", "both")) {
-            return Session.get("user").preferences.theme.statusIcons;
-        } else {
-            return;
-        }
-    },
     avatar() { // Returns avatar.
         return Meteor.user().services.google.picture;
     },
@@ -319,31 +305,16 @@ Template.main.helpers({
     bgSrc() { // Returns background.
         return "Backgrounds/" + Session.get("user").preferences.theme.background;
     },
-    menuStatus() { // Status of of menu sidebar.
+    iconStatus(icon) {
-        if (Session.equals("sidebar", "menuContainer")) {
+        var sidebar = Session.get("sidebarMode");
-            return "0px";
+        return (sidebar[0] === icon && sidebar[1]) ? Session.get("user").preferences.theme.iconHighlight + ";background-color:rgba(0,0,0,0.2)" : "";
-        } else if (Session.equals("sidebar", "both")) {
-            return "0px";
-        } else {
-            return openValues.menu;
-        }
-    },
-    optionsStatus() { // Status of options sidebar.
-        if (Session.equals("sidebar", "optionsContainer")) {
-            return "0px";
-        } else if (Session.equals("sidebar", "both")) {
-            return "0px";
-        } else {
-            return openValues.options;
-        }
     },
     requestStatus() {
         if (Session.get("requests")) return "0px";
         return openValues.requests;
     },
     modeStatus(status) { // Color status of display modes.
-        if (!Session.equals("mode", status)) return;
+        return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
-        return Session.get("user").preferences.theme.modeHighlight;
     },
     currMode(name) { // Status of display mode.
         return Session.equals("mode", name);
@@ -397,6 +368,10 @@ Template.main.helpers({
                 });
                 var date = event.start.format().split("-");
                 current.dueDate = new Date(date[0], parseInt(date[1]) - 1, date[2], 11, 59, 59);
+                if(Date.parse(new Date) > Date.parse(current.dueDate)) {
+                    revertFunc();
+                    return;
+                } 
                 serverData = current;
                 sendData("editWork");
             },
@@ -426,12 +401,10 @@ Template.main.helpers({
         return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
     },
     calCreWork() { // Display instructions for creating a work.
-        if (Session.get("calCreWork")) return true;
+        return Session.get("calCreWork");
-        return false;
     },
     filterOn() {
-        if (Session.get("classDisp").length !== 0) return true;
+        return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
-        return false;
     },
     highlight() { // Calendar highlight/scale option.
         var hoverHighlight = Session.get("classDispHover");
@@ -461,7 +434,7 @@ Template.main.helpers({
             array.push({
                 "type": types[i],
                 "typeName": types[i][0].toUpperCase() + types[i].slice(1),
-                "selected": _.contains(Session.get("typeFilter"), types[i])
+                "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
             });
         }
         return array;
@@ -503,8 +476,7 @@ Template.main.events({
         if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
             if (!(e.includes("optionHolder") || e.includes("optionText"))) {
                 if(document.getElementById(modifyingInput).className.includes("dropdown")) {
-                    $(".optionHolder")
+                    $(".optionHolder").fadeOut(100);
-                        .fadeOut(250, "linear");
 
                     $(".selectedOption").removeClass("selectedOption");
                 } else {     
@@ -514,11 +486,10 @@ Template.main.events({
             }
         }
 
-        if (!Session.equals("sidebar", e) && // Sidebar closing.
+        if (!e.includes("fa-cog") && // Sidebar closing.
-            !e.includes("fa-cog") &&
             !e.includes("fa-bars") &&
             !document.getElementById("menuContainer").contains(event.target) &&
-            !document.getElementById("optionsContainer").contains(event.target)) {
+            !document.getElementById("menuBar").contains(event.target)) {
             if (Session.get("calCreWork")) {
                 if (!calWorkOpen) {
                     Session.set("calCreWork", false);
@@ -526,7 +497,9 @@ Template.main.events({
                 }
                 calWorkOpen = false;
             } else {
-                Session.set("sidebar", null);
+                Session.set("sidebarMode", Session.get("sidebarMode")[0], false);
+                toggleSidebar(false);
+                Session.set("sidebarMode", [null,null]);
             }
         }
 
@@ -542,30 +515,41 @@ Template.main.events({
         if (!document.getElementById("requests").contains(event.target)) Session.set("requests", false);
     },
     // MAIN MENU BUTTONS
-    'click .fa-bars' () { // Click menu button.
+    'click .fa-bars' (event) { // Click menu button.
-        var side = Session.get("sidebar");
+        var sidebar = Session.get("sidebarMode");
-        if (side === "menuContainer") {
+        if(sidebar[0] === "menu" && sidebar[1]) {
-            Session.set("sidebar", null);
+            Session.set("sidebarMode", ["menu",false]);
-        } else if (side === "optionsContainer") {
+            toggleSidebar(false);
-            Session.set("sidebar", "both");
-        } else if (side === "both") {
-            Session.set("sidebar", "optionsContainer");
         } else {
-            Session.set("sidebar", "menuContainer");
+            Session.set("sidebarMode", ["menu",true]);
+
+            $(".menuWrapper.option").fadeOut(200);
+            toggleSidebar(true);
+            $(".menuWrapper.menu").slideDown(350);
         }
     },
-    'click .fa-cog' () { // Click settings button.
+    'click .fa-cog' (event) { // Click settings button.
-        var side = Session.get("sidebar");
+        var sidebar = Session.get("sidebarMode");
-        if (side === "optionsContainer") {
+        if(sidebar[0] === "option" && sidebar[1]) {
-            Session.set("sidebar", null);
+            Session.set("sidebarMode", ["option",false]);
-        } else if (side === "menuContainer") {
+            toggleSidebar(false);
-            Session.set("sidebar", "both");
-        } else if (side === "both") {
-            Session.set("sidebar", "menuContainer");
         } else {
-            Session.set("sidebar", "optionsContainer");
+            Session.set("sidebarMode", ["option",true]);
+
+            $(".menuWrapper.menu").slideUp(200);
+            toggleSidebar(true);
+            $(".menuWrapper.option").slideDown(350);
         }
     },
+    'click #filterHead' (event) {
+        if(event.target.id === "disableFilter") return;
+        if(!filterOpen) {
+            $("#filterWrapper").slideDown(300);
+        } else {
+            $("#filterWrapper").slideUp(300);
+        }
+        filterOpen = !filterOpen;
+    },
     'click #requests .fa-question' () {
         Session.set("requests", !Session.get("requests"));
     },
@@ -578,7 +562,9 @@ Template.main.events({
             openDivFade(modeHolder);
         }, 300);
         setTimeout(startDragula, 500);
-        Session.set("sidebar", null); // Closes all sidebars.
+        Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
+        toggleSidebar(false);
+        Session.set("sidebarMode", [null,null]);
         Session.set("calCreWork", null);
     },
     'click .calendar' () { // Click calendar mode button.
@@ -589,7 +575,9 @@ Template.main.events({
             Session.set("mode", "calendar");
             openDivFade(modeHolder);
         }, 300);
-        Session.set("sidebar", null); // Closes all sidebars.
+        Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
+        toggleSidebar(false);
+        Session.set("sidebarMode", [null,null]); 
         Session.set("calCreWork", null);
     },
     'click .creWork' (event) { // Cick add work button.
@@ -610,10 +598,7 @@ Template.main.events({
         }, 100);
     },
     'click .workCard' (event) { // Display work information on work card click.
-        var dom = event.target;
-        while (event.target.className !== "workCard") event.target = event.target.parentNode;
         var workid = event.target.getAttribute("workid");
-
         var thisWork = work.findOne({
             _id: workid
         });
@@ -621,7 +606,7 @@ Template.main.events({
         Session.set("newWork", false);
         Session.set("currentWork", thisWork);
 
-        if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
+        if (!Session.get("newWork")) {
             var currClass = classes.findOne({
                 _id: thisWork["class"]
             });
@@ -692,7 +677,7 @@ Template.main.events({
     // HANDLING INPUT CHANGING
     'focus .clickModify' (event) {
         $(".optionHolder")
-            .fadeOut(250, "linear");
+            .fadeOut(100);
 
         if(modifyingInput !== null) {
             if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
@@ -761,7 +746,7 @@ Template.main.events({
             serverData = Session.get("currentWork");
 
             $("#" + modifyingInput).next()
-                .fadeOut(250, "linear");
+                .fadeOut(100);
             $(".selectedOption").removeClass("selectedOption");
             if(Session.get("newWork")) return;
             if(checkMissing()) return;
@@ -780,7 +765,7 @@ Template.main.events({
         }
 
         $("#" + modifyingInput).next()
-            .fadeOut(250, "linear");
+            .fadeOut(100);
 
         $(".selectedOption").removeClass("selectedOption");
     },
@@ -878,6 +863,7 @@ Template.main.events({
     },
     'click #disableFilter' () {
         Session.set("classDisp", []);
+        Session.set("typeFilter", []);
     },
     'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
         var div;
@@ -919,6 +905,16 @@ Template.main.events({
 
 // Other Functions
 
+function toggleSidebar(open) {
+    if(open) {
+        $("#menuContainer").show("slide",  {direction: "left"}, 250);
+        $("#divCenter").stop().animate({left: '36vh'}, 250);
+    } else {
+        $("#menuContainer").hide("slide",  {direction: "left"}, 250);
+        $("#divCenter").stop().animate({left: '6vh'}, 250);
+    }
+}
+
 function openDivFade(div) {
     div.style.display = "block";
     div.style.opacity = "0";

hourglass/client/profile/profile.css

@@ -15,7 +15,7 @@
 
 .profHea {
 	margin: 0;
-	font-size: 3vw;
+	font-size: 2vw;
 	font-weight: 200;
 	padding: 6% 6% 0 8%;
 }

hourglass/lib/constants.js

@@ -5,8 +5,8 @@ themeColors =  {
         "secondaryColor": "#E8E8E8",
         "sidebarColor": "#65839A",
         "userDropdownColor": "#E6E6E6",
-        "iconHighlight": "#33ADFF",
+        "iconHighlight": "#8695CF",
-        "modeHighlight": "#FF1A1A",
+        "modeHighlight": "#AA2121",
         "classCardColor":"#EBEBEB",
         "textColor": "#000"
     },
@@ -36,7 +36,7 @@ themeColors =  {
        "background": "Sea.jpg",
         "mainColor": "#1E926C",
         "secondaryColor": "#1C564F",
-        "sidebarColor": "#3CB08A",
+        "sidebarColor": "#1C7458",
         "userDropdownColor": "#2EA96A", 
         "iconHighlight": "#61D9A3",
         "modeHighlight": "#C9FE62",

hourglass/lib/router.js

@@ -14,8 +14,10 @@ Router.route('/', {
     },
     action: function() {
         if(_.contains([null, undefined, ""], Meteor.user().profile.school)) {
+            Session.set("user", Meteor.user().profile);
             this.redirect('/login');
         } else {
+            Session.set("user", Meteor.user().profile);
             this.render("main");
         }
     }
@@ -26,8 +28,10 @@ Router.route('/login', {
         if (!Meteor.userId()) {
             this.render("login");
         } else if (!Meteor.user().profile.school) {
+            Session.set("user", Meteor.user().profile);
             this.redirect('/profile');
         } else {
+            Session.set("user", Meteor.user().profile);
             this.redirect('/');
         }
     }
@@ -48,6 +52,7 @@ Router.route('/profile', {
         }
     },
     action: function() {
+        Session.set("user", Meteor.user().profile);
         this.render("profile");
     }
 });
@@ -64,8 +69,10 @@ Router.route('/user/:email', {
     action: function() {
         if(Meteor.users.findOne({'services.google.email': this.params.email}) !== undefined) {
             if(Meteor.user() && this.params.email === Meteor.user().services.google.email) {
+                Session.set("user", Meteor.user().profile);
                 this.redirect('/profile');
             } else {
+                Session.set("user", Meteor.user().profile);
                 this.render('user');
             }
         } else {