From e5edd7b7db2b2953d2f1a31b5bd2d4623fb6a4c8 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 11 Nov 2015 18:39:32 +0100
Subject: [PATCH 1/4] mobile friendly tabs

---
 view/theme/vier/mobile.css | 25 +++++++++++++++++++++++++
 view/theme/vier/theme.php  |  5 ++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 1d65e53a7..3defddac3 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -115,3 +115,28 @@ aside {
 aside.show {
 	left: 0;
 }
+
+/* tabs */
+.tabs { position: relative; height: 25px!important; }
+.tabs li { width: 100%; }
+.tabs .tab { display: none;}
+.tabs .tab.active { display: block; }
+.tabs::after {
+	content: " ";
+	display: block;
+	position: absolute;
+	left: 0; right:0; top: 0; bottom: 0;
+}
+
+.tabs.show {
+	position: fixed;
+	z-index: 1000;
+	left: 10px;
+	right: 10px;
+	top: 0px;
+	bottom: 10px;
+	height: auto !important;
+	border: 1px solid #ccc;
+}
+.tabs.show::after { display: none; }
+.tabs.show .tab { display: block; }
diff --git a/view/theme/vier/theme.php b/view/theme/vier/theme.php
index f7b52dc35..8bd4f5916 100644
--- a/view/theme/vier/theme.php
+++ b/view/theme/vier/theme.php
@@ -33,7 +33,7 @@ function vier_init(&$a) {
 		$a->page['htmlhead'] .= '<meta name=viewport content="width=device-width, initial-scale=1">'."\n";
 		$a->page['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="view/theme/vier/mobile.css" media="screen"/>'."\n";
 	}
-		$a->page['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="view/theme/vier/mobile.css" media="screen and (max-width: 1000px)"/>'."\n";
+		#$a->page['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="view/theme/vier/mobile.css" media="screen and (max-width: 1000px)"/>'."\n";
 
 $a->page['htmlhead'] .= <<< EOT
 <link rel='stylesheet' type='text/css' href='view/theme/vier/narrow.css' media='screen and (max-width: 1100px)' />
@@ -92,6 +92,9 @@ $(document).ready(function() {
 		e.preventDefault();
 		$("aside").toggleClass("show");
 	});
+	$(".tabs").click(function(e){
+		$(this).toggleClass("show");
+	});
 });
 
 </script>

From b3e09b817f41f668174bcf4fc61770e37172fd14 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 11 Nov 2015 19:06:35 +0100
Subject: [PATCH 2/4] fix menu icon, add icon to tab

---
 view/theme/vier/mobile.css        | 5 ++++-
 view/theme/vier/templates/nav.tpl | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 3defddac3..7d14ed5c9 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -122,10 +122,13 @@ aside.show {
 .tabs .tab { display: none;}
 .tabs .tab.active { display: block; }
 .tabs::after {
-	content: " ";
+	font-family: FontAwesome;
+	text-align: right;
+	content: "\f13a";
 	display: block;
 	position: absolute;
 	left: 0; right:0; top: 0; bottom: 0;
+	padding: 8px 2px 0 0;
 }
 
 .tabs.show {
diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index d6b85447f..77bad9370 100644
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -9,7 +9,7 @@
 	<ul>
 		<li class="mobile-aside-toggle" style="display:none;">
 			<a href="#">
-				<i class="icons icon-list"></i>
+				<i class="icons icon-reorder"></i>
 			</a>
 		</li>
 		{{if $nav.home}}

From 54460bdf3557f189a06db3256be2a2682a608a13 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 11 Nov 2015 19:11:55 +0100
Subject: [PATCH 3/4] fix tab icon padding

---
 view/theme/vier/mobile.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 7d14ed5c9..16e4419a2 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -104,7 +104,6 @@ nav ul {
 
 aside {
 	display: block;
-	/* position: absolute; */
 	position: fixed;
 	max-width: 400px;
 	width: 80%;

From c81f63a5b33fccd8c884a6ad62e92b01a4d90b32 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Thu, 12 Nov 2015 09:30:54 +0100
Subject: [PATCH 4/4] vier mobile: prefixed transition in css, mobile-related
 javascript only on mobile

---
 view/theme/vier/mobile.css |  3 +++
 view/theme/vier/theme.php  | 28 +++++++++++++++++++---------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 16e4419a2..d06cb4101 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -108,6 +108,9 @@ aside {
 	max-width: 400px;
 	width: 80%;
 	left: -100%;
+	-webkit-transition: left 0.5s;
+	-moz-transition: left 0.5s;
+	-o-transition: left 0.5s;
 	transition: left 0.5s;
 }
 
diff --git a/view/theme/vier/theme.php b/view/theme/vier/theme.php
index 8bd4f5916..87f41ae15 100644
--- a/view/theme/vier/theme.php
+++ b/view/theme/vier/theme.php
@@ -87,19 +87,29 @@ function cmtBbClose(id) {
 	$("#comment-edit-bb-" + id).hide();
 }
 
-$(document).ready(function() {
-	$(".mobile-aside-toggle a").click(function(e){
-		e.preventDefault();
-		$("aside").toggleClass("show");
-	});
-	$(".tabs").click(function(e){
-		$(this).toggleClass("show");
-	});
-});
+
 
 </script>
 EOT;
 
+
+if ($a->is_mobile || $a->is_tablet){
+	$a->page['htmlhead'] .= <<< EOT
+<script>
+	$(document).ready(function() {
+		$(".mobile-aside-toggle a").click(function(e){
+			e.preventDefault();
+			$("aside").toggleClass("show");
+		});
+		$(".tabs").click(function(e){
+			$(this).toggleClass("show");
+		});
+	});
+</script>
+EOT;
+}
+
+
 	// Hide the left menu bar
 	if (($a->page['aside'] == "") AND in_array($a->argv[0], array("community", "events", "help", "manage", "notifications",
 									"probe", "webfinger", "login", "invite", "credits")))