From a846caa38791c3ec654180e01325de4e9e5d203c Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 16:27:33 -0400
Subject: [PATCH 01/12] added post button to mobile menu

---
 public/css/style.less       | 3 ++-
 public/templates/footer.tpl | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/css/style.less b/public/css/style.less
index 5b5216cba7..abe74ca575 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -583,10 +583,11 @@ body .navbar .nodebb-inline-block {
 }
 
 #mobile-menu {
-	#mobile-menu-btn {
+	button {
 		color: #eee;
 		padding: 10px;
 		text-shadow: none;
+		-webkit-tap-highlight-color: rgba(0,0,0,0);
 	}
 }
 
diff --git a/public/templates/footer.tpl b/public/templates/footer.tpl
index 818c79482b..a828b4f5c1 100644
--- a/public/templates/footer.tpl
+++ b/public/templates/footer.tpl
@@ -13,6 +13,7 @@
 
 	<div id="mobile-menu">
 		<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
+		<button id="mobile-post-btn" type="button" class="btn btn-none"><i class="icon-plus icon-2x"></i></button>
 	</div>
 	<script type="text/javascript" src="/src/forum/footer.js"></script>
 	<!-- END Forum Info -->

From 5bb9933f4a28092d55730ceb463da34c15897b7e Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:00:58 -0400
Subject: [PATCH 02/12] added functionality to post button. also introduced
 some underlying concepts regarding modules and pulling template vars

---
 public/src/ajaxify.js            |  3 ++-
 public/src/app.js                |  5 +++++
 public/src/modules/mobileMenu.js | 25 +++++++++++++++++++++++--
 public/src/templates.js          |  6 +++++-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js
index 1aa52e16de..9a70ebd194 100644
--- a/public/src/ajaxify.js
+++ b/public/src/ajaxify.js
@@ -47,7 +47,8 @@ var ajaxify = {};
 			}
 
 			jQuery('#footer, #content').fadeOut(100);
-
+			
+			templates.flush();
 			templates.load_template(function() {
 				exec_body_scripts(content);
 
diff --git a/public/src/app.js b/public/src/app.js
index eb35b16652..7e315533e2 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -191,6 +191,11 @@ var socket,
 			socket.emit('api:user.get_online_users', uids);
 		}
 
+		// here is where all modules' onNavigate should be called, I think.
+		require(['mobileMenu'], function(mobileMenu) {
+			mobileMenu.onNavigate();
+		});
+
 
 		populate_online_users();
 
diff --git a/public/src/modules/mobileMenu.js b/public/src/modules/mobileMenu.js
index 7f5183348f..2880e26464 100644
--- a/public/src/modules/mobileMenu.js
+++ b/public/src/modules/mobileMenu.js
@@ -4,7 +4,8 @@ define(function() {
 
 	var categories = null,
 		overlay = null,
-		menuBtn = null;
+		menuBtn = null,
+		postBtn = null;
 
 
 	function loadCategories(callback) {
@@ -63,9 +64,27 @@ define(function() {
 	}
 
 
+	mobileMenu.onNavigate = function() {
+		var cid = templates.get('category_id');
+
+		if (cid) {
+			postBtn.style.display = 'inline-block';
+			postBtn.onclick = function() {
+				require(['composer'], function(cmp) {
+				    cmp.push(0, cid); //todo check if in post
+				});
+			};
+		} else {
+			postBtn.style.display = 'none';
+		}
+
+	};
+
+
 	mobileMenu.init = function() {
 		overlay = overlay || document.getElementById('mobile-menu-overlay');
 		menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
+		postBtn = postBtn || document.getElementById('mobile-post-btn');
 		
 		menuBtn.onclick = function() {
 			animateIcons();
@@ -73,9 +92,11 @@ define(function() {
 
 
 		loadCategories(displayCategories);
+		mobileMenu.onNavigate();
 	}
 
 	return {
-		init: mobileMenu.init
+		init: mobileMenu.init,
+		onNavigate: mobileMenu.onNavigate
 	}
 });
\ No newline at end of file
diff --git a/public/src/templates.js b/public/src/templates.js
index b3ea78105c..4a39277c2b 100644
--- a/public/src/templates.js
+++ b/public/src/templates.js
@@ -169,7 +169,7 @@
 			if (!templates[tpl_url] || !template_data) return;
 
 			document.getElementById('content').innerHTML = templates[tpl_url].parse(JSON.parse(template_data));
-
+			
 			jQuery('#content [template-variable]').each(function(index, element) {
 				templates.set(element.getAttribute('template-variable'), element.value);
 			});
@@ -181,6 +181,10 @@
 
 	}
 
+	templates.flush = function() {
+		parsed_variables = {};
+	}
+
 	templates.get = function(key) {
 		return parsed_variables[key];
 	}

From 2a304c5c909674c3857498f23d20fc5c48ae66ad Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:05:44 -0400
Subject: [PATCH 03/12] improved animations for mobileMenu again (opacity).
 need to check if this seriously slows down older devices.

---
 public/css/style.less | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/public/css/style.less b/public/css/style.less
index abe74ca575..815bfb654a 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -592,7 +592,6 @@ body .navbar .nodebb-inline-block {
 }
 
 #mobile-menu-overlay {
-	display: none;
 
 	background: rgba(0, 0, 0, 0.85);
 	position: fixed;
@@ -609,9 +608,9 @@ body .navbar .nodebb-inline-block {
 	-ms-transition: opacity 150ms ease;
 	-o-transition: opacity 150ms ease;
 	transition: opacity 150ms ease;
-
+	z-index: -1;
 	&.menu-visible {
-		display: block;
+		z-index: 99;
 		opacity: 1;
 	}
 

From 220d80e3a1fa247d47495a600875c39382a2182c Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:08:11 -0400
Subject: [PATCH 04/12] added ability to add forum to iOS homescreen as an app

---
 public/templates/header.tpl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/templates/header.tpl b/public/templates/header.tpl
index b51176b196..a75863dd3e 100644
--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@@ -5,6 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="title" CONTENT="NodeBB">
 	<meta name="description" content="Node.js/Redis/Socket.io powered forums for a new generation">
+	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<link href="{cssSrc}" rel="stylesheet" media="screen">
 	<link href="/vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 	<link rel="stylesheet" href="/vendor/fontawesome/css/font-awesome.min.css">

From 3fa41ab3161fb7da309332cd291c440b0db2c6f9 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:09:47 -0400
Subject: [PATCH 05/12] rehide address bar on mobile after page load completes

---
 public/src/app.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/src/app.js b/public/src/app.js
index 7e315533e2..e6dc71d7f8 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -199,6 +199,7 @@ var socket,
 
 		populate_online_users();
 
+		window.scrollTo(0, 1);
 	}
 
 	socket.on('api:user.get_online_users', function(users) {

From 950fdefd7bd6b9ad560010f592af4b80a7e6c77f Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:10:00 -0400
Subject: [PATCH 06/12] rehide address bar on mobile after page load completes

---
 public/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/src/app.js b/public/src/app.js
index e6dc71d7f8..4ea87866bb 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -199,7 +199,7 @@ var socket,
 
 		populate_online_users();
 
-		window.scrollTo(0, 1);
+		window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.
 	}
 
 	socket.on('api:user.get_online_users', function(users) {

From 2638c03752f672fa0288e57b2113c12c2debf402 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:14:10 -0400
Subject: [PATCH 07/12] added timeout to address bar hiding (as per the
 official way of accomplishing this task )

---
 public/src/ajaxify.js | 2 +-
 public/src/app.js     | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js
index 9a70ebd194..d5daa8d907 100644
--- a/public/src/ajaxify.js
+++ b/public/src/ajaxify.js
@@ -47,7 +47,7 @@ var ajaxify = {};
 			}
 
 			jQuery('#footer, #content').fadeOut(100);
-			
+
 			templates.flush();
 			templates.load_template(function() {
 				exec_body_scripts(content);
diff --git a/public/src/app.js b/public/src/app.js
index 4ea87866bb..11095a8e1d 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -199,7 +199,9 @@ var socket,
 
 		populate_online_users();
 
-		window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.
+		setTimeout(function() {
+			window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.	
+		}, 100);
 	}
 
 	socket.on('api:user.get_online_users', function(users) {

From 95830c3c7cc8c9b940baa5798be94ff0f3f2fe8b Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:19:18 -0400
Subject: [PATCH 08/12] getting rid of the highlight colour on links and
 buttons to make it feel more app-ish

---
 public/css/style.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/css/style.less b/public/css/style.less
index 815bfb654a..fbb5618144 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -41,6 +41,10 @@ body {
 	}
 }
 
+button, a {
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
 .none {
 	display: none !important;
 }

From 1803595fa22753e7f21fb4b1f4b8f0b848cf252b Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 5 Jun 2013 17:59:20 -0400
Subject: [PATCH 09/12] starting: mobile sidebar menu (intending to take the
 span3 hidden on mobile and turn it into a slidein sidebar)

---
 public/src/app.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/public/src/app.js b/public/src/app.js
index 11095a8e1d..2a30f3c867 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -240,5 +240,23 @@ var socket,
 				}
 			}
 		}, false);
+
+
+		addTouchEvents();
 	});
+
+
+
+	
+	function addTouchEvents() {
+		var el = jQuery("#content"),
+			width = el.width();
+
+		el.on('touchmove', function(e) {
+			//this.style.marginLeft = - parseInt(width - event.touches[0].pageX) + 'px';
+		});
+		el.on('touchend', function(e) {
+			this.style.marginLeft = 'auto';
+		})
+	}
 }());

From a8f6222824dc12236cc534608ac7ae185fcd64a0 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 6 Jun 2013 10:51:13 -0400
Subject: [PATCH 10/12] part2 of mobile sidebar menu. still disabled for now
 going to come back to this later.

---
 public/css/style.less         | 12 +++++++++
 public/src/app.js             | 51 +++++++++++++++++++++++++++++++----
 public/templates/category.tpl |  2 +-
 public/templates/footer.tpl   |  4 +++
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/public/css/style.less b/public/css/style.less
index fbb5618144..5903c56a7d 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -647,4 +647,16 @@ body .navbar .nodebb-inline-block {
 		}
 
 	}
+}
+
+
+
+
+#mobile-sidebar {
+	height: 100%;
+	position: absolute;
+	left: 100%;
+	top: 0px;
+	overflow: hidden;
+	margin-top: 60px;
 }
\ No newline at end of file
diff --git a/public/src/app.js b/public/src/app.js
index 2a30f3c867..6002156e4c 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -249,14 +249,55 @@ var socket,
 
 	
 	function addTouchEvents() {
+		return; // later.
+
+
+		// click simulation just for testing/sanity purposes.
+
 		var el = jQuery("#content"),
+			sidebar = jQuery('#mobile-sidebar'),
 			width = el.width();
 
-		el.on('touchmove', function(e) {
-			//this.style.marginLeft = - parseInt(width - event.touches[0].pageX) + 'px';
+		function onTouchMove(ev) {
+			var coordinates = window.event ? window.event.touches[0] : ev.touches[0];
+
+			el.css({
+				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+				paddingRight: parseInt(width - coordinates.pageX) + 'px'});
+
+			sidebar.css({
+				marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+				width: parseInt(width - coordinates.pageX) + 'px'
+			});
+		}
+
+		function onMouseMove(ev) {
+			ev.touches = [{pageX: ev.pageX, pageY: ev.pageY}];
+			onTouchMove(ev);
+		}
+
+		function onTouchEnd() {
+			el.css({
+				marginLeft: '0px',
+				paddingRight: '0px'
+			});
+
+			sidebar.css({
+				marginLeft: '0px',
+				width: '0px'
+			});
+		}
+
+		el.on('touchmove', onTouchMove);
+		el.on('mousedown', function() {
+			el.on('mousemove', onMouseMove);
 		});
-		el.on('touchend', function(e) {
-			this.style.marginLeft = 'auto';
-		})
+
+		el.on('touchend', onTouchEnd);
+		el.on('mouseup', function() {
+			el.off('mousemove');
+			onTouchEnd();
+		});
+		
 	}
 }());
diff --git a/public/templates/category.tpl b/public/templates/category.tpl
index 39ccda6c94..e730e33e34 100644
--- a/public/templates/category.tpl
+++ b/public/templates/category.tpl
@@ -45,7 +45,7 @@
 		<hr />
 		<button id="new_post" class="btn btn-primary btn-large {show_category_features}">New Topic</button>
 	</div>
-	<div class="span3 {show_category_features} category-sidebar">
+	<div class="span3 {show_category_features} category-sidebar mobile-sidebar">
 		<div class="sidebar-block img-polaroid">
 			<div class="block-header">
 				<a target="_blank" href="../{category_id}.rss"><i class="icon-rss-sign icon-2x"></i></a>&nbsp;
diff --git a/public/templates/footer.tpl b/public/templates/footer.tpl
index a828b4f5c1..a73a705311 100644
--- a/public/templates/footer.tpl
+++ b/public/templates/footer.tpl
@@ -1,6 +1,10 @@
 
 
 	</div><!--END container -->
+
+	<div id="mobile-sidebar">
+	</div>
+
 	<!-- START Forum Info -->
 	<div id="footer" class="container hidden-phone" style="padding-top: 50px; display: none">
 		<div class="alert alert-info">

From 97ea98ed3f0f8e503f6c95de0f56ebd7b71d000a Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 6 Jun 2013 11:01:14 -0400
Subject: [PATCH 11/12] topics: reply button in mobile menu + icon

---
 public/src/modules/mobileMenu.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/src/modules/mobileMenu.js b/public/src/modules/mobileMenu.js
index 2880e26464..c21bc5bed9 100644
--- a/public/src/modules/mobileMenu.js
+++ b/public/src/modules/mobileMenu.js
@@ -65,15 +65,25 @@ define(function() {
 
 
 	mobileMenu.onNavigate = function() {
-		var cid = templates.get('category_id');
+		var cid = templates.get('category_id'),
+			tid = templates.get('topic_id');
 
 		if (cid) {
 			postBtn.style.display = 'inline-block';
 			postBtn.onclick = function() {
 				require(['composer'], function(cmp) {
-				    cmp.push(0, cid); //todo check if in post
+				    cmp.push(0, cid);
 				});
 			};
+			postBtn.children[0].className = 'icon-plus icon-2x';
+		} else if (tid) {
+			postBtn.style.display = 'inline-block';
+			postBtn.onclick = function() {
+				require(['composer'], function(cmp) {
+				    cmp.push(tid);
+				});
+			};
+			postBtn.children[0].className = 'icon-reply icon-2x'
 		} else {
 			postBtn.style.display = 'none';
 		}

From 64ecbfce8bb48fad363f8105f1a6d97f7f94c3c3 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 6 Jun 2013 11:14:55 -0400
Subject: [PATCH 12/12] topics: removed some less important buttons from mobile
 view, removed reply button on main posts in exchange for the smaller reply
 button

---
 public/templates/topic.tpl | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl
index afdbd7e3b3..695366763e 100644
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@@ -29,14 +29,14 @@
 					<hr />
 
 					<div class="topic-buttons pull-left">
-						<a href="/users/{main_posts.username}" class="username-field btn">{main_posts.username}</a>
-						<a target="_blank" class="btn" href="../{topic_id}.rss"><i class="icon-rss-sign"></i></a>
+						<a href="/users/{main_posts.username}" class="username-field btn hidden-phone">{main_posts.username}</a>
+						<a target="_blank" class="btn hidden-phone" href="../{topic_id}.rss"><i class="icon-rss-sign"></i></a>
 						<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools}" type="button"><i class="icon-pencil"></i></button>
 						<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools}" type="button"><i class="icon-trash"></i></button>
 						<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote" type="button"><i class="icon-quote-left"></i></button>
 
 						<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn" type="button"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
-						<button id="post_reply" class="btn btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
+						<button id="post_reply" class="btn btn-primary btn post_reply hidden-phone" type="button">Reply <i class="icon-reply"></i></button>
 					</div>
 					<div style="clear:both; margin-bottom: 10px;"></div>
 
@@ -46,6 +46,9 @@
 						<img class="hidden-desktop" src="{main_posts.gravatar}?s=10&default=identicon" align="left" /> posted by <strong><a class="" href="/users/{main_posts.username}">{main_posts.username}</a></strong> {main_posts.relativeTime} ago
 						<span class="{main_posts.edited-class} hidden-phone">| last edited by <strong><a href="/users/{main_posts.editor}">{main_posts.editor}</a></strong> {main_posts.relativeEditTime} ago</span>
 						<span class="{main_posts.edited-class}"><i class="icon-edit visible-phone" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
+						<div class="post-buttons visible-phone">
+							<div class="post_reply"><i class="icon-reply"></i></div>
+						</div>
 					</div>
 				</div>
 			</div>