Fixed mobile bugs, changed version display

hourglass/client/login/login.html

@@ -22,7 +22,7 @@
 			</div>
 		</div>
 		<footer id="loginFooter">
-			<p id="version">Version 0.2.0</p>
+			<p id="version">Version 0.2.1</p>
 		</footer>
 	</div>
 	{{> loginButtons}}
@@ -50,7 +50,7 @@
 			</div>
 		</div>
 		<footer id="loginFooter">
-			<p id="mVersion">Version 0.2.0</p>
+			<p id="mVersion">Version 0.2.1</p>
 		</footer>
 	</div>
 	{{> loginButtons}}

hourglass/client/main/main.css

@@ -110,6 +110,7 @@ input {
 }
 
 #mainHeader h1 {
+	font-weight: 400;
 	margin-left: 1%;
 }
 

hourglass/client/main/main.js

@@ -849,12 +849,12 @@ function formReadable(input, val) { // Makes work information readable by users.
                 if (!_.contains(input.done, Meteor.userId())) return "fa-square-o";
                 return "fa-check-square-o";
             case "userConfirm":
-                if (!_.contains(input.confirmations, Meteor.userId())) return (Session.get("mobileMode")) ? "rgb(101,101,101)" : "";
+                if (!_.contains(input.confirmations, Meteor.userId())) return (Meteor.Device.isPhone()) ? "rgb(101,101,101)" : "";
                 return "#27A127";
             case "confirmations":
                 return input.confirmations.length;
             case "userReport":
-                if (!_.contains(input.reports, Meteor.userId()))  return (Session.get("mobileMode")) ? "rgb(101,101,101)" : "";
+                if (!_.contains(input.reports, Meteor.userId()))  return (Meteor.Device.isPhone()) ? "rgb(101,101,101)" : "";
                 return "#FF1A1A";
             case "reports":
                 return input.reports.length;
@@ -963,7 +963,7 @@ myClasses = function() {
                 }
             }
 
-            if (thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
+            if (thisWork[j] !== "no" && Session.get("user").preferences.done && !Meteor.Device.isPhone()) { // If done filter is true and not mobile.
                 if (thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
                     thisWork[j] = "no";
                 }

hourglass/client/mobile/mobile.css

@@ -178,7 +178,7 @@
 	width: 13vw;
 	height: 13vw;
 
-	background-color: rgb(17,17,17);
+	background-color: rgba(255,255,255, 0.1);
 
 	display: none;
 	opacity: 0;
@@ -489,8 +489,8 @@
 
 .mOption {
 	font-size: 3.7vw;
-	width: 95%;
+	width: 92%;
-	padding: 2.5%;
+	padding: 4%;
 	border-bottom: 1px solid #888;
 	background-color: rgba(255,255,255,0.05);
 	display: table;

hourglass/client/mobile/mobile.html

@@ -12,14 +12,14 @@
 				{{#each myWork}}
 					{{> mobileClass}}
 				{{/each}}
-				<h3 class="mNoneText" style="display:{{noMain}}">Nothing left here!</h3>
+				<h3 class="mNoneText" style="display:{{noneText 'main'}}">Nothing left here!</h3>
 			{{/if}}
 			{{#if showMode 'done'}}
 				<h4 class="minorHeader">Done</h4>
 				{{#each myWork "done"}}
 					{{> mobileClass}}
 				{{/each}}
-				<h3 class="mNoneText" style="display:{{noDone}}">You... should really get to work.</h3>
+				<h3 class="mNoneText" style="display:{{noneText 'done'}}">You... should really get to work.</h3>
 			{{/if}}
 			{{#if showMode 'addWork'}}
 				{{> mAddWork}}
@@ -260,10 +260,6 @@
 		<p class="mOpTitle">Hide Homework:</p>
 		<p class="mOpVal">{{pref 'timeHide'}}</p>
 	</div>
-	<div id="done" class="mOption">
-		<p class="mOpTitle">Hide Done:</p>
-		<p class="mOpVal">{{pref 'done'}}</p>
-	</div>
 	<div id="hideReport" class="mOption">
 		<p class="mOpTitle">Hide Reported:</p>
 		<p class="mOpVal">{{pref 'hideReport'}}</p>

hourglass/client/mobile/mobile.js

@@ -16,9 +16,13 @@ Template.registerHelper('optionInfo', (type) => {
 	}
 });
 
+Template.mobile.created = function() {
+	mobileWork();
+}
+
 Template.mobile.rendered = function() {
 	document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
-	
+	// Buttons
 	addMobileButton($("#mainCircleButton")[0], 50, "color", function() {
 		if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) {
 			Session.set("currentWork", null);
@@ -66,9 +70,7 @@ Template.mobile.rendered = function() {
 	addMobileButton($("#mSidebarToggle")[0], 0.2, "brightness", function() {
 		if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) {
 			toggleSidebar(true);
-		} else if(Session.equals("mobileMode","addWork") || 
+		} else {
-			Session.equals("mobileMode", "editWork") || 
-			Session.equals("mobileMode", "settings")) {
 			$("#mainCircleButton").velocity("fadeOut", 200);
 			$("#mobileBody").velocity("fadeOut", {
 				duration: 200,
@@ -117,6 +119,7 @@ Template.defaultSidebar.rendered = function() {
 		if(Session.equals("mobileMode", "main")) {
 			toggleSidebar(false);
 		} else {
+			mobileWork();
 			Session.set("mobileMode","main");
 			toggleSidebar(false);
 			timedPushback();
@@ -127,6 +130,7 @@ Template.defaultSidebar.rendered = function() {
 		if(Session.equals("mobileMode", "done")) {
 			toggleSidebar(false);
 		} else {
+			mobileWork();
 			Session.set("mobileMode","done");
 			toggleSidebar(false);
 			timedPushback();
@@ -241,6 +245,8 @@ Template.mobileClass.rendered = function() {
 					undo[1].velocity("fadeIn", {duration: 300});
 					var container = $(".mClassContainer[workid="+id+"]");
 					clearTile = setTimeout(function() {
+						undo[0].velocity("fadeOut", {duration: 100});
+						undo[1].velocity("fadeOut", {duration: 100});
 						container.velocity(
 						{
 							height: 0
@@ -263,7 +269,7 @@ Template.mobileClass.rendered = function() {
 		}
 	});
 
-	addMobileButton(undo[1], 30, "color", function() {
+	addMobileButton(undo[1], -0.05, "brightness", function() {
 		clearTimeout(clearTile);
 		movable.velocity({translateX: "0px"},300);
 		undo[0].velocity("fadeOut", {duration: 300});
@@ -290,6 +296,7 @@ Template.mobileClass.rendered = function() {
         }
 
    		if(inRole) {
+   			$("#mainCircleButton").velocity("fadeOut", 200);
    			$("#mobileBody").velocity("fadeOut", {
 				duration: 200,
 				complete: function() {
@@ -299,6 +306,7 @@ Template.mobileClass.rendered = function() {
 				}
 			});
    		} else {
+   			$("#mainCircleButton").velocity("fadeOut", 200);
    			$("#mobileBody").velocity("fadeOut", {
 				duration: 200,
 				complete: function() {
@@ -394,34 +402,7 @@ Template.mobile.helpers({
 		return (Session.get("sidebarMode") === "mobile") ? Session.get("user").preferences.theme.iconHighlight : "";
 	},
 	myWork(done) {
-		var array = myClasses();
+		
-		if(array === undefined) return;
-		var notDoneWork = [];
-		var doneWork = [];
-		for(var i = 0; i < array.length; i++) {
-			for(var j = 0; j < array[i].thisClassWork.length; j++) {
-				var classid = array[i].thisClassWork[j].classid;
-				var desc = array[i].thisClassWork[j].description;
-				if(desc) {
-					array[i].thisClassWork[j].shortdesc = (desc.length <= 40 ) ? desc : desc.substring(0,40) +"...";
-				}
-				array[i].thisClassWork[j]["class"] = (classid === Meteor.userId()) ? "Personal" : classes.findOne({_id:classid}).name;
-				if(_.contains(array[i].thisClassWork[j].done, Meteor.userId())) {
-					array[i].thisClassWork[j].isDone = true;
-					doneWork.push(array[i].thisClassWork[j]);
-				} else {
-					notDoneWork.push(array[i].thisClassWork[j]);
-				}
-			}
-		}
-		doneWork = doneWork.sort(function(a,b) {
-			return Date.parse(a.realDate) - Date.parse(b.realDate);
-		});
-		notDoneWork = notDoneWork.sort(function(a,b) {
-			return Date.parse(a.realDate) - Date.parse(b.realDate);
-		});
-
-		Session.set("mobileWork", [notDoneWork, doneWork]);
 		return (done === "done") ? Session.get("mobileWork")[1] : Session.get("mobileWork")[0];
 	},
 	showMode(mode) {
@@ -439,15 +420,12 @@ Template.mobile.helpers({
         }
         return array;
     },
-    noMain() {
+    noneText(type) {
-    	try {
+    	if(type === "main") {
-    		return (Session.get("mobileWork")[0].length === 0) ? "block" : "none";	
+    		return Session.get("noneText")[0];
-    	} catch(err) {}
+    	} else {
-    },
+    		return Session.get("noneText")[1];
-    noDone() {
+    	}
-    	try {
-    		return (Session.get("mobileWork")[1].length === 0) ? "block" : "none";
-    	} catch(err) {}
     },
     buttonType() {
     	if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) {
@@ -463,7 +441,7 @@ Template.mobile.helpers({
     		return "bars";
     	} else if(Session.equals("mobileMode","addWork") || Session.equals("mobileMode","editWork")) {
     		return "times";
-    	} else if(Session.equals("mobileMode", "settings")) {
+    	} else if(Session.equals("mobileMode", "viewWork") || Session.equals("mobileMode", "settings")) {
     		return "arrow-left";
     	}
     },
@@ -693,7 +671,6 @@ function toggleSidebar(open) {
 function timedPushback() {
 	var fadeTime = 10;
 	$(".mClassContainer").velocity("stop", true);
-	$(".mNoneText").velocity("fadeOut", fadeTime);
 	$(".mClassContainer").velocity("fadeOut", fadeTime);
 	setTimeout(function() {
 		$(".mClassContainer").velocity({left: "-150vw"}, 0);
@@ -706,5 +683,36 @@ function timedPushback() {
 			i += 1;
 		}, 100);
 	}, fadeTime);
-	
+}
+
+function mobileWork() {
+	var array = myClasses();
+	if(array === undefined) return;
+	var notDoneWork = [];
+	var doneWork = [];
+	for(var i = 0; i < array.length; i++) {
+		for(var j = 0; j < array[i].thisClassWork.length; j++) {
+			var classid = array[i].thisClassWork[j].classid;
+			var desc = array[i].thisClassWork[j].description;
+			if(desc) {
+				array[i].thisClassWork[j].shortdesc = (desc.length <= 40 ) ? desc : desc.substring(0,40) +"...";
+			}
+			array[i].thisClassWork[j]["class"] = (classid === Meteor.userId()) ? "Personal" : classes.findOne({_id:classid}).name;
+			if(_.contains(array[i].thisClassWork[j].done, Meteor.userId())) {
+				array[i].thisClassWork[j].isDone = true;
+				doneWork.push(array[i].thisClassWork[j]);
+			} else {
+				notDoneWork.push(array[i].thisClassWork[j]);
+			}
+		}
+	}
+	doneWork = doneWork.sort(function(a,b) {
+		return Date.parse(a.realDate) - Date.parse(b.realDate);
+	});
+	notDoneWork = notDoneWork.sort(function(a,b) {
+		return Date.parse(a.realDate) - Date.parse(b.realDate);
+	});
+
+	Session.set("mobileWork", [notDoneWork, doneWork]);
+	Session.set("noneText", [(notDoneWork.length === 0) ? "block": "none", (doneWork.length === 0) ? "block": "none"]);
 }

hourglass/lib/router.js

@@ -72,7 +72,11 @@ Router.route('/profile', {
         if (!Meteor.userId() || completeProfile()) {
             this.redirect('/login');
         } else {
-            this.render("profile");
+            if(Meteor.Device.isPhone()) {
+                this.render("mProfile");
+            } else {
+                this.render("profile");
+            }
         }
     }
 });