aside bar as menu in mobile

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 90e8e64d7754dbc1a64abcff79bfbff2766fc4aa..0b158e50d3330e92afe087952e68a530d186b5e0 100644 (file)
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -24,7 +24,7 @@ body, section, nav .nav-menu, div.pager, ul.tabs {
 }
 
 nav {
-  min-width: 480px;
+  min-width: 100%;
 }
 
 .wall-item-container .wall-item-content {
@@ -88,3 +88,29 @@ nav ul {
 .wall-item-container.thread_level_7 .wall-item-content {
   max-width: 100%;
 }
+
+/* aside in/out */
+.mobile-aside-toggle {
+       display: block !important;
+}
+.mobile-aside-toggle a {
+       line-height: 35px;
+       padding: 0 10px;
+}
+.mobile-aside-toggle a i {
+       font-size: 22px;
+       color: #CCC;
+}
+
+aside {
+       display: block;
+       position: absolute;
+       max-width: 400px;
+       width: 80%;
+       left: -100%;
+       transition: left 0.5s;
+}
+
+aside.show {
+       left: 0;
+}

diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 4888468cee43b5d269cc94123feb74d7d78a0224..d6b85447f47eccfcd1d3721ffd79bcc250e15375 100644 (file)
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -7,6 +7,11 @@
 </header>
 <nav role="menubar">
        <ul>
+               <li class="mobile-aside-toggle" style="display:none;">
+                       <a href="#">
+                               <i class="icons icon-list"></i>
+                       </a>
+               </li>
                {{if $nav.home}}
                        <li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
                                <a accesskey="p" class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>
@@ -29,7 +34,7 @@
                                <a accesskey="c" class="{{$nav.community.2}}" href="{{$nav.community.0}}" title="{{$nav.community.3}}" >{{$nav.community.1}}</a>
                        </li>
                {{/if}}
-               
+
                <li role="menu" aria-haspopup="true" id="nav-site-linkmenu" class="nav-menu-icon"><a><span class="icon s22 icon-question"><span class="sr-only">{{$nav.help.3}}</span></span></a>
                        <ul id="nav-site-menu" class="menu-popup">
                                {{if $nav.help}} <li role="menuitem"><a class="{{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" >{{$nav.help.1}}</a></li>{{/if}}
@@ -48,7 +53,7 @@
                                </ul>
                        </li>
                {{/if}}
-               
+
                {{if $userinfo}}
                        <li role="menu" aria-haspopup="true" id="nav-user-linkmenu" class="nav-menu">
                                <a accesskey="u" title="{{$sitelocation}}"><img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span id="nav-user-linklabel">{{$userinfo.name}}</span><span id="intro-update" class="nav-notify"></span></a>
@@ -56,7 +61,7 @@
                                        {{if $nav.introductions}}<li role="menuitem"><a class="{{$nav.introductions.2}}" href="{{$nav.introductions.0}}" title="{{$nav.introductions.3}}" >{{$nav.introductions.1}}</a><span id="intro-update-li" class="nav-notify"></span></li>{{/if}}
                                        {{if $nav.contacts}}<li role="menuitem"><a class="{{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}" >{{$nav.contacts.1}}</a></li>{{/if}}
                                        {{if $nav.messages}}<li role="menuitem"><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}}</a><span id="mail-update" class="nav-notify"></span></a></li>{{/if}}
-                                       {{if $nav.manage}}<li role="menuitem"><a class="{{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a></li>{{/if}}                         
+                                       {{if $nav.manage}}<li role="menuitem"><a class="{{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a></li>{{/if}}
                                        {{if $nav.usermenu.1}}<li role="menuitem"><a class="{{$nav.usermenu.1.2}}" href="{{$nav.usermenu.1.0}}" title="{{$nav.usermenu.1.3}}">{{$nav.usermenu.1.1}}</a></li>{{/if}}
                                        {{if $nav.settings}}<li role="menuitem"><a class="{{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">{{$nav.settings.1}}</a></li>{{/if}}
                                        {{if $nav.logout}}<li role="menuitem"><a class="menu-sep {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" >{{$nav.logout.1}}</a></li>{{/if}}
@@ -69,7 +74,7 @@
                                <a class="{{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" >{{$nav.login.1}}</a>
                        </li>
                {{/if}}
-               
+
                {{if $nav.search}}
                        <li role="search" id="search-box">
                                <form method="get" action="{{$nav.search.0}}">
@@ -89,7 +94,7 @@
                                <a accesskey="a" class="{{$nav.admin.2}} icon-sliders" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><span class="sr-only">{{$nav.admin.3}}</span></a>
                        </li>
                {{/if}}
-               
+
                {{if $nav.apps}}
                        <li role="menu" aria-haspopup="true" id="nav-apps-link" class="nav-menu {{$sel.apps}}">
                                <a class=" {{$nav.apps.2}}" title="{{$nav.apps.3}}" >{{$nav.apps.1}}</a>

diff --git a/view/theme/vier/theme.php b/view/theme/vier/theme.php
index 1a4eb3e5acd92b198183795dfe0f73b468584f2b..f7b52dc35c8bd685a70e25989ce2d7628c283e72 100644 (file)
--- a/view/theme/vier/theme.php
+++ b/view/theme/vier/theme.php
@@ -86,6 +86,14 @@ function cmtBbOpen(id) {
 function cmtBbClose(id) {
        $("#comment-edit-bb-" + id).hide();
 }
+
+$(document).ready(function() {
+       $(".mobile-aside-toggle a").click(function(e){
+               e.preventDefault();
+               $("aside").toggleClass("show");
+       });
+});
+
 </script>
 EOT;