From 51a8864519943345263109f6485accac571e7889 Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Tue, 29 Dec 2015 00:23:59 +0100 Subject: [PATCH 1/2] vier: make TopNavBar mobile friendly --- view/theme/vier/mobile.css | 3 +++ view/theme/vier/style.css | 7 +++++++ view/theme/vier/templates/nav.tpl | 12 ++++++++---- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css index d06cb4101..cde49b7b7 100644 --- 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 e53ac45f7..c854b26dd 100644 --- 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 77bad9370..90e8bc9cf 100644 --- 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}} From 89c0a8f8a8b0ea56de16b9c853402770a1680b3b Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Wed, 30 Dec 2015 00:48:11 +0100 Subject: [PATCH 2/2] vier: remove double available accesskeys --- view/theme/vier/templates/nav.tpl | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl index 90e8bc9cf..f1602597c 100644 --- a/view/theme/vier/templates/nav.tpl +++ b/view/theme/vier/templates/nav.tpl @@ -15,27 +15,27 @@ {{if $nav.home}} <li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}"> <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> + <a 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}} 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> + <a 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}} 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> + <a 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}} 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> + <a class="{{$nav.community.2}} mobile-view" href="{{$nav.community.0}}" title="{{$nav.community.3}}" ><i class="icon s22 icon-bullseye"></i></a> </li> {{/if}}