mexon/friendica
1
0
Fork 0
Code Pull requests Activity

Merge pull request #2069 from fabrixxm/vier_aside_mobile

Browse source 
Vier mobile
This commit is contained in:
Tobias Diekershoff 2015-11-12 10:18:52 +01:00
parent c687069709 c81f63a5b3
commit dab544ab76
3 changed files with 52 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
view/theme/vier/mobile.css
View file

@ -104,14 +104,44 @@ nav ul {
aside { aside {
display: block; display: block;
/* position: absolute; */
position: fixed; position: fixed;
max-width: 400px; max-width: 400px;
width: 80%; width: 80%;
left: -100%; left: -100%;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
transition: left 0.5s; transition: left 0.5s;
} }
aside.show { aside.show {
left: 0; 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; }

2
view/theme/vier/templates/nav.tpl
View file

@ -9,7 +9,7 @@
<ul> <ul>
<li class="mobile-aside-toggle" style="display:none;"> <li class="mobile-aside-toggle" style="display:none;">
<a href="#"> <a href="#">
<i class="icons icon-list"></i> <i class="icons icon-reorder"></i>
</a> </a>
</li> </li>
{{if $nav.home}} {{if $nav.home}}

27
view/theme/vier/theme.php
View file

@ -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'] .= '<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"/>'."\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 $a->page['htmlhead'] .= <<< EOT
<link rel='stylesheet' type='text/css' href='view/theme/vier/narrow.css' media='screen and (max-width: 1100px)' /> <link rel='stylesheet' type='text/css' href='view/theme/vier/narrow.css' media='screen and (max-width: 1100px)' />
@ -87,16 +87,29 @@ function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide(); $("#comment-edit-bb-" + id).hide();
} }
$(document).ready(function() {
$(".mobile-aside-toggle a").click(function(e){
e.preventDefault();
$("aside").toggleClass("show");
});
});
</script> </script>
EOT; 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 // Hide the left menu bar
if (($a->page['aside'] == "") AND in_array($a->argv[0], array("community", "events", "help", "manage", "notifications", if (($a->page['aside'] == "") AND in_array($a->argv[0], array("community", "events", "help", "manage", "notifications",
"probe", "webfinger", "login", "invite", "credits"))) "probe", "webfinger", "login", "invite", "credits")))