vier: make TopNavBar mobile friendly

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index d06cb410117586432e546c3d1f6494390e7e2e2e..cde49b7b72684dece0d5494613062d6b947a9b8f 100644 (file)
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -60,6 +60,9 @@ nav ul {
   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
     max-width: 350px;
   }
+  a.desktop-view { display: none; }
+  a.mobile-view { display: initial; }
+  #nav-apps-link { display: none; }
 }
 
 @media screen and (max-width: 480px) {

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index e53ac45f74ca2343b1b169eb95d6f74d108ead24..c854b26ddb1dfd406033aa064455f189fbdeaf34 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -372,6 +372,13 @@ code {
   z-index: 100000;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
+
+/* some settings for different form-factors */
+@media (min-width: 601px) {
+  a.mobile-view { display: none };
+  a.desktop-view { display: initial };
+}
+
 /* tool */
 .tool {
   height: auto;

diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 77bad93705bb20a6421bd35945cf6d5a77294cf1..90e8bc9cffde1cef8cae6a0c95097afee88d1374 100644 (file)
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -14,24 +14,28 @@
                </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>
+                               <a accesskey="p" class="{{$nav.home.2}} desktop-view" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>
+                               <a accesskey="p" class="{{$nav.home.2}} mobile-view" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="icon s22 icon-home"></i></a>
                                <span id="home-update" class="nav-notify"></span>
                        </li>
                {{/if}}
                {{if $nav.network}}
                        <li role="menuitem" id="nav-network-link" class="nav-menu {{$sel.network}}">
-                               <a accesskey="n" class="{{$nav.network.2}}" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >{{$nav.network.1}}</a>
+                               <a accesskey="n" class="{{$nav.network.2}} desktop-view" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >{{$nav.network.1}}</a>
+                               <a accesskey="n" class="{{$nav.network.2}} mobile-view" href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="icon s22 icon-th"></i></a>
                                <span id="net-update" class="nav-notify"></span>
                        </li>
                {{/if}}
                {{if $nav.events}}
                        <li role="menuitem" id="nav-events-link" class="nav-menu {{$sel.events}}">
-                               <a accesskey="e" class="{{$nav.events.2}}" href="{{$nav.events.0}}" title="{{$nav.events.3}}" >{{$nav.events.1}}</a>
+                               <a accesskey="e" class="{{$nav.events.2}} desktop-view" href="{{$nav.events.0}}" title="{{$nav.events.3}}" >{{$nav.events.1}}</a>
+                               <a accesskey="e" class="{{$nav.events.2}} mobile-view" href="{{$nav.events.0}}" title="{{$nav.events.3}}" ><i class="icon s22 icon-calendar"></i></a>
                        </li>
                {{/if}}
                {{if $nav.community}}
                        <li role="menuitem" id="nav-community-link" class="nav-menu {{$sel.community}}">
-                               <a accesskey="c" class="{{$nav.community.2}}" href="{{$nav.community.0}}" title="{{$nav.community.3}}" >{{$nav.community.1}}</a>
+                               <a accesskey="c" class="{{$nav.community.2}} desktop-view" href="{{$nav.community.0}}" title="{{$nav.community.3}}" >{{$nav.community.1}}</a>
+                               <a accesskey="c" class="{{$nav.community.2}} mobile-view" href="{{$nav.community.0}}" title="{{$nav.community.3}}" ><i class="icon s22 icon-bullseye"></i></a>
                        </li>
                {{/if}}