From: fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 11 Nov 2015 17:39:32 +0000 (+0100)
Subject: mobile friendly tabs
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=e5edd7b7db2b2953d2f1a31b5bd2d4623fb6a4c8;p=friendica.git

mobile friendly tabs
---

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 1d65e53a7b..3defddac38 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 f7b52dc35c..8bd4f5916d 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>