mobile friendly tabs

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 1d65e53a7b23be04a406a2b86bc48ff24dacf939..3defddac3891009f856a797b9b1b9c2c4cf5c07e 100644 (file)
--- 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 f7b52dc35c8bd685a70e25989ce2d7628c283e72..8bd4f5916d4a8378eb1a6e8d88ecf5c4dc6bf4ee 100644 (file)
--- 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>