CSS fixes, more mobile sidebar functionality

hourglass/client/main/main.css

@@ -174,7 +174,7 @@ input {
 	color: inherit;
 }
 
-.fa-bars, .fa-cog, .fa-question {
+.barIco {
 	font-size: 3.5vh;
 	width: 6vh;
 	height: calc(6vh - 1px);
@@ -193,7 +193,7 @@ input {
 	transition: color 0.5s ease, background-color 0.5s ease; 
 }
 
-.fa-bars:hover, .fa-cog:hover, .fa-question:hover {
+.barIco:hover {
 	background-color: rgba(0,0,0,0.2);
 }
 
@@ -294,7 +294,6 @@ input {
 .status {
 	width: 3% !important;
 	height: 100%;
-	border-spacing: 6%;
 	display: table-cell;
 
 	-webkit-transition: background-color 0.3s ease;  

hourglass/client/main/main.html

@@ -10,9 +10,9 @@
         <img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
         <div id="divLeftBar">
             <div id="menuBar" style="background-color:{{divColor 'sidebarColor'}}">
-                <i class="fa fa-bars" style="color:{{iconStatus 'menu'}}" aria-hidden="true"></i>
+                <i class="barIco 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="barIco fa fa-cog" style="color:{{iconStatus 'option'}}" aria-hidden="true"></i>
-                <i class="fa fa-question" style="color:{{iconStatus 'requests'}}" aria-hidden="true"></i>
+                <i class="barIco fa fa-question" style="color:{{iconStatus 'requests'}}" aria-hidden="true"></i>
             </div>
             <div id="menuContainer" style="background-color:{{divColor 'sidebarColor'}};">
                 <div class="menuWrapper">

hourglass/client/mobile/mobile.css

@@ -34,6 +34,7 @@
 	background-color: rgba(255,255,255,0);
 
 	display: inline-block;
+	text-align: center;
 
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
@@ -241,6 +242,21 @@
 	line-height: 13vw;
 }
 
+.mOpenable .fa {
+	font-size: 4vw;
+	height: 13vw;
+	padding: 0;
+	padding-right: 6%;
+	float: right;
+	line-height: 13vw;
+}
+
+.mOpenable h3:first-child {
+	font-weight: 200;
+	display: inline-block;
+	pointer-events: none;
+}
+
 .mSectionMode {
 	font-size: 4vw !important;
 	width: 100%;
@@ -252,7 +268,6 @@
 .mStatus {
 	width: 2% !important;
 	height: 100%;
-	border-spacing: 6%;
 	display: table-cell;
 	
 	-webkit-transition: background-color 0.3s ease;  
@@ -262,6 +277,7 @@
 }
 
 .mSectionMode .fa {
+	font-size: 4vw;
 	width: 10%;
 	padding: 0 6% 0 6%;
 	line-height: 13vw;
@@ -278,6 +294,58 @@
 	vertical-align: middle;
 }
 
+#mFilterWrapper {
+	display: none;
+}
+
 #mTypeFilterWrapper {
 	margin-top: 0;
+}
+
+#mClassFilterWrapper {
+	margin-top: 0;
+}
+
+.mSideFilter, .mSideClass {
+	width: 100%;
+
+	background-color: rgba(0,0,0,0.1);
+	display: table;
+}
+
+.mSideTypeName {
+	font-size: 3.5vw;
+	width: 92%;
+	margin: 0;
+	padding: 5%;
+	padding-left: 5%;
+	
+	display: table-cell;
+}
+
+.mSideClass span {
+	font-weight: 200;
+	margin: 0;
+	font-size: 3.5vw;
+	padding: 5%;
+	display: table-cell;
+	pointer-events: none;
+}
+
+.mSideClassName {
+	width: 50%;
+	padding-left: 5%;
+}
+
+.mSideClassHour {
+	width: 50%;
+	color: #CCC;
+}
+
+#mSettings {
+	background-color: rgba(255,255,255,0.1);
+}
+
+#mSettings h3 {
+	padding: 0;
 }

hourglass/client/mobile/mobile.html

@@ -40,24 +40,33 @@
 	            <i class="fa fa-check-square" aria-hidden="true"></i>
 	            <h4>Done Work</h4>
 			</div>
-			<div class="mSectionTitle downOffset">
+			<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
 		        <h3>Filters</h3>
+		        <i class="fa fa-angle-down" aria-hidden="true"></i>
 		    </div>
-	        <div id="mTypeFilterWrapper" class="mSectionTitle">
+		    <div id="mFilterWrapper">
-	            <h3>By Type</h3>
+		        <div id="mTypeFilterWrapper" class="mSectionTitle mOpenable">
-	        </div>
+		            <h3>By Type</h3>
-	        <div id="mClassFilterHolder">
+		            <i class="fa fa-angle-down" aria-hidden="true"></i>
-	            {{#each types}}
+		        </div>
-	                {{> mSideTypeFilter}}
+		        <div id="mClassFilterHolder">
-	            {{/each}}
+		            {{#each types}}
-	        </div>
+		                {{> mSideTypeFilter}}
-	        <div id="mClassFilterWrapper" class="mSectionTitle">
+		            {{/each}}
-                <h3>By Class</h3>
+		        </div>
-	        </div> 
+		        <div id="mClassFilterWrapper" class="mSectionTitle mOpenable">
-	        <div id="mClassListHolder">    
+	                <h3>By Class</h3>
-	            {{#each myClasses}}
+	                <i class="fa fa-angle-down" aria-hidden="true"></i>
-	                {{> mSidebarClasses}}
+		        </div> 
-	            {{/each}}
+		        <div id="mClassListHolder">    
+		            {{#each myClasses}}
+		                {{> mSidebarClasses}}
+		            {{/each}}
+		        </div>
+		    </div>
+	        <div id="mSettings" class="mSectionTitle mSectionMode">
+	        	<i class="fa fa-cog" aria-hidden="true"></i>
+	        	<h3>Settings</h3>
 	        </div>
 		</div>
 		
@@ -90,7 +99,7 @@
 <template name="mSideTypeFilter">
 	<div class="mSideFilter" type="{{type}}">
         <div class="mStatus" style="background-color:{{selected}}"></div>
-        <span class="sideTypeName">{{typeName}}</span>
+        <span class="mSideTypeName">{{typeName}}</span>
     </div>
 </template>
 

hourglass/client/mobile/mobile.js

@@ -2,6 +2,8 @@ Session.set("mobileWork", []);
 Session.set("mobileMode", "main");
 Session.set("mobileSidebar", false);
 
+var filterOpen = [false, true, true];
+
 Template.mobile.rendered = function() {
 	document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
 	
@@ -38,8 +40,95 @@ Template.mobile.rendered = function() {
 			toggleSidebar(false);
 		}
 	});
+
+	addMobileButton($("#mSettings"), 0.1, "brightness" , function() {
+		console.log("Go to settings!"); // Render setting template
+	});
+
+	addMobileButton($("#mFilterHead"), 0.1, "brightness", function() {
+		if (event.target.id === "disableFilter") return;
+        if (!filterOpen[0]) {
+            $("#mFilterWrapper").slideDown(300);
+        } else {
+            $("#mFilterWrapper").slideUp(300);
+        }
+        filterOpen[0] = !filterOpen[0];
+	});
+
+	addMobileButton($("#mTypeFilterWrapper"), 0.1, "brightness", function() {
+		if (!filterOpen[1]) {
+            $("#mClassFilterHolder").slideDown(300);
+        } else {
+            $("#mClassFilterHolder").slideUp(300);
+        }
+        filterOpen[1] = !filterOpen[1];
+	});
+
+	addMobileButton($("#mClassFilterWrapper"), 0.1, "brightness", function() {
+		if (!filterOpen[2]) {
+            $("#mClassListHolder").slideDown(300);
+        } else {
+            $("#mClassListHolder").slideUp(300);
+        }
+        filterOpen[2] = !filterOpen[2];
+	});
+
+	// FOR SIDEBAR SLIDEBACK
+	/*var deltaX = 0;
+	var sidebar = $("#mSidebar");
+	new Hammer(sidebar[0], {
+		domEvents: true
+	});
+
+	sidebar.on('panmove', function(e) {
+		var dX = deltaX + (e.originalEvent.gesture.deltaX);
+		if(dX > 0) {
+			$.Velocity.hook(jQuery(e.target), 'translateX', dX/70 + 'px');
+			$.Velocity.hook(jQuery)
+		} else {
+			$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
+		}
+	});
+
+	movable.on('panend', function(e) {
+		deltaX = deltaX + (e.originalEvent.gesture.deltaX);
+		if(deltaX <= window.innerWidth * 0.3) {
+			deltaX = 0;
+			jQuery(e.target).velocity(
+			{
+				translateX: window.innerWidth*1.2+"px"
+			},
+			{
+				duration: 150,
+				complete: function() {
+					undo[0].velocity("fadeIn", {duration: 300});
+					undo[1].velocity("fadeIn", {duration: 300});
+					var container = $(".mClassContainer[workid="+id+"]");
+					clearTile = setTimeout(function() {
+						container.velocity(
+						{
+							height: 0
+						},
+						{
+							duration: 200,
+							complete: function() {
+								serverData = [container[0].getAttribute("workid"), "done"];
+    							sendData("toggleWork");
+								container.remove();
+							}
+						});
+					}, 3000);
+				}
+			});
+
+		} else {
+			deltaX = 0;
+			jQuery(e.target).velocity({translateX: "0px"},300);
+		}
+	});*/
 }
 
+
 Template.mobileClass.rendered = function() {
 	var deltaX = 0;
 	var clearTile;
@@ -53,11 +142,10 @@ Template.mobileClass.rendered = function() {
 	movable.on('panmove', function(e) {
 		var dX = deltaX + (e.originalEvent.gesture.deltaX);
 		if(dX < 0) {
-			$.Velocity.hook(jQuery(e.target), 'translateX', dX/45 + 'px');
+			$.Velocity.hook(jQuery(e.target), 'translateX', dX/25 + 'px');
 		} else {
 			$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
 		}
-		
 	});
 
 	movable.on('panend', function(e) {
@@ -179,7 +267,8 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
 		parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"))
 	];
 
-	ele.on('touchstart mousedown', function(e) {
+	ele.on('touchstart', function(e) {
+		console.log("start!");
 		care = true;
 		switch(type) {
 			case "color":
@@ -194,7 +283,7 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
 		}
 	});
 
-	ele.on('touchend mouseup', function(e) {
+	ele.on('touchend', function(e) {
 		if(!care) return;
 		ele.velocity("stop");
 		switch(type) {