Merge pull request #2069 from fabrixxm/vier_aside_mobile

Vier mobile

view/theme/vier/mobile.css

@@ -104,14 +104,44 @@ nav ul {
 
 aside {
 	display: block;
-	/* position: absolute; */
 	position: fixed;
 	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;
 }
 
 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 {
+	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 {
+	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; }

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}}

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)' />
@@ -87,15 +87,28 @@ function cmtBbClose(id) {
 	$("#comment-edit-bb-" + id).hide();
 }
 
+
+
+</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",