Added mobile sidebar

hourglass/client/mobile/mobile.css

@@ -1,26 +1,43 @@
 #mobileHeader {
-	box-shadow: -1px 2px 2px 1px #444;
+	border-bottom: 3px solid #999;
 	position: relative;
 }
 
 #mobileHeader h2 {
-	font-size: 3vh;
+	font-size: 5vw;
 	font-weight: 200;
 
 	padding: 0;
-	height: 8vh;
+	height: 13vw;
 
 	display: inline;
 
-	line-height: 8vh;
+	line-height: 13vw;
 	text-align: right;
 }
 
 #mobileHeader .fa-bars {
-	margin-left: 1vh;
+	font-size: 5vw;
-	height: 8vh;
+	width: 10vw;
+	height: 10vw;
 	border: 0;
-	line-height: 8vh;
+	line-height: 10vw;
+
+	pointer-events: none;
+}
+
+#mSidebarToggle {
+	margin: 1.5vw 1vw 1.5vw 1vw;
+	width: 10vw;
+	height: 10vw;
+
+	background-color: rgba(255,255,255,0);
+
+	display: inline-block;
+
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;	
 }
 
 #mobileBody {
@@ -75,7 +92,7 @@
 	font-size: 4vw !important;
 	width: 100%;
 	padding: 2%;
-	background-color: rgba(255,255,255,0.2);
+	background-color: rgba(255,255,255,0.15);
 }
 
 .mContTop {
@@ -187,9 +204,13 @@
 
 	background-color: rgba(0,0,0,0.3);
 
+	display: none;
+	opacity: 0;
+
 	position: absolute;
 	top: 0;
 	left: 0;
+
 }
 
 #mSidebar {
@@ -198,7 +219,61 @@
 
 	background-color: #fff;
 	box-shadow: 2px 0px 1px 1px #222;
+
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: -100vw;
+
+	overflow-y: auto;
+}
+
+.mSectionTitle {
+	width: 100%;
+	height: 13vw;
+	margin-top: 13vw;
+	background-color: rgba(255,255,255,0.1);
+}
+
+.mSectionTitle h3 {
+	font-weight: 200;
+	font-size: 4vw;
+	padding-left: 6%;
+	line-height: 13vw;
+}
+
+.mSectionMode {
+	font-size: 4vw !important;
+	width: 100%;
+	height: 13vw;
+	display: table;
+	background-color: rgba(0,0,0,0.1);
+}
+
+.mStatus {
+	width: 2% !important;
+	height: 100%;
+	border-spacing: 6%;
+	display: table-cell;
+	
+	-webkit-transition: background-color 0.3s ease;  
+	-moz-transition: background-color 0.3s ease; 
+	-ms-transition: background-color 0.3s ease;
+	transition: background-color 0.3s ease; 
+}
+
+.mSectionMode .fa {
+	width: 10%;
+	padding: 0 6% 0 6%;
+	line-height: 13vw;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.mSectionMode h4 {
+	font-size: 3.5vw !important;
+	width: 65%;
+	padding-left: 5%;
+	line-height: 13vw;
+	display: table-cell;
+	vertical-align: middle;
 }

hourglass/client/mobile/mobile.html

@@ -1,7 +1,9 @@
 <template name="mobile">
 	<div class="noScroll">
 		<header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}">
+			<div id="mSidebarToggle">
 				<i class="fa fa-bars" style="color:{{iconStatus}}" aria-hidden="true"></i>
+			</div>
 			<h2>{{schoolName}}</h2>
 		</header>
 		<div id="mobileBody">
@@ -23,15 +25,42 @@
 		<div id="mAddWork">
 			<i class="fa fa-pencil" aria-hidden="true"></i>
 		</div>
-		<div id="mOverlay">
+		<div id="mOverlay"></div>
-			<div id="mSidebar">
+		<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}}">
-				<div class="mSectionTitle">
+			<div class="mSectionTitle downOffset">
+		        <h3>Main</h3>
+		    </div>
+			<div class="mSectionMode">
 				<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
 	            <i class="fa fa-list-ul" aria-hidden="true"></i>
-		            <h4>Create Classes</h4>
+	            <h4>Main Work</h4>
-				</div>
+			</div>
+			<div class="mSectionMode">
+				<div class="mStatus" style="background-color:{{modeStatus 'done'}}"></div>
+	            <i class="fa fa-check-square" aria-hidden="true"></i>
+	            <h4>Done Work</h4>
+			</div>
+			<div class="mSectionTitle downOffset">
+		        <h3>Filters</h3>
+		    </div>
+	        <div id="typeFilterWrapper" class="mSectionTitle">
+	            <h3>By Type</h3>
+	        </div>
+	        <div id="classFilterHolder">
+	            {{#each types}}
+	                {{> mSideTypeFilter}}
+	            {{/each}}
+	        </div>
+	        <div id="classFilterWrapper" class="mSectionTitle">
+                <h3>By Class</h3>
+	        </div> 
+	        <div id="classListHolder">    
+	            {{#each myClasses}}
+	                {{> mSidebarClasses}}
+	            {{/each}}
 	        </div>
 		</div>
+		
 	</div>
 </template>
 
@@ -57,3 +86,18 @@
 		</div>
 	</div>
 </template>
+
+<template name="mSideTypeFilter">
+	<div class="mSideFilter" type="{{type}}">
+        <div class="mStatus" style="background-color:{{selected}}"></div>
+        <span class="sideTypeName">{{typeName}}</span>
+    </div>
+</template>
+
+<template name="mSidebarClasses">
+    <div class="mSideClass" classid="{{_id}}">
+        <div class="mStatus" style="background-color:{{selected}}"></div>
+        <span class="mSideClassName">{{name}}</span>
+        <span class="mSideClassHour">{{hour}}</span>
+    </div>
+</template>

hourglass/client/mobile/mobile.js

@@ -1,5 +1,6 @@
 Session.set("mobileWork", []);
 Session.set("mobileMode", "main");
+Session.set("mobileSidebar", false);
 
 Template.mobile.rendered = function() {
 	document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
@@ -15,9 +16,23 @@ Template.mobile.rendered = function() {
 				$("#mobileBody").velocity("fadeIn", 200);
 			}
 		});
-		
-
 	});
+
+	addMobileSideButton($("#mSidebarToggle")[0], 0.2, function() {
+		Session.set("mobileSidebar", true);
+		toggleSidebar(true);
+	});
+
+	addMobileSideButton($(".mSectionMode")[0], 0.2, function() {
+		Session.set("mobileMode","main");
+		toggleSidebar(false);
+	});
+
+	addMobileSideButton($(".mSectionMode")[1], 0.2, function() {
+		Session.set("mobileMode","done");
+		toggleSidebar(false);
+	});
+	
 }
 
 Template.mobile.helpers({
@@ -63,7 +78,20 @@ Template.mobile.helpers({
 	},
 	modeStatus(mode) {
 		return (Session.equals("mobileMode", mode)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
+	},
+	types() {
+        var types = Object.keys(workColors);
+        var array = [];
+        for (var i = 0; i < types.length; i++) {
+            array.push({
+                "type": types[i],
+                "typeName": types[i][0].toUpperCase() + types[i].slice(1),
+                "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
+            });
         }
+        return array;
+    }
+
 });
 
 function addListeners() {
@@ -172,3 +200,43 @@ function addMobileButton(element, lighten, thisFunction) {
 		});
 	});
 }
+
+function addMobileSideButton(element, lighten, thisFunction) {
+	let button = new Hammer.Manager(element);
+	let add = lighten;
+	let ele = jQuery(element);
+	let execute = thisFunction;
+	let colors = parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"));
+	var press = new Hammer.Press({
+		event: 'press',
+		pointers: 1,
+		time: 0.01,
+		threshold: 3000
+	});
+	button.add(press);
+
+	button.on('press', function(e) {
+		ele.velocity({backgroundColorAlpha: colors + add},100);
+	});
+	button.on('pressup', function(e) {
+		ele.velocity("stop");
+		ele.velocity(
+		{
+			backgroundColorAlpha: colors
+		},
+		{
+			duration: 200,
+			complete: execute()
+		});
+	});
+}
+
+function toggleSidebar(open) {
+	if(open) {
+		$("#mOverlay").velocity("fadeIn", 300);
+		$("#mSidebar").velocity({left: '0vw'}, 300);
+	} else {
+		$("#mOverlay").velocity("fadeOut", 300);
+		$("#mSidebar").velocity({left: '-100vw'});
+	}
+}