friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

vier: make TopNavBar mobile friendly

This commit is contained in:
rabuzarus 2015-12-29 00:23:59 +01:00
parent 99861b9fa6
commit 51a8864519
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
view/theme/vier/mobile.css
View File

@ -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 { .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
max-width: 350px; max-width: 350px;
} }
a.desktop-view { display: none; }
a.mobile-view { display: initial; }
#nav-apps-link { display: none; }
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {

7
view/theme/vier/style.css
View File

@ -372,6 +372,13 @@ code {
z-index: 100000; z-index: 100000;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); 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 */
.tool { .tool {
height: auto; height: auto;

12
view/theme/vier/templates/nav.tpl
View File

@ -14,24 +14,28 @@
</li> </li>
{{if $nav.home}} {{if $nav.home}}
<li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.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> <span id="home-update" class="nav-notify"></span>
</li> </li>
{{/if}} {{/if}}
{{if $nav.network}} {{if $nav.network}}
<li role="menuitem" id="nav-network-link" class="nav-menu {{$sel.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> <span id="net-update" class="nav-notify"></span>
</li> </li>
{{/if}} {{/if}}
{{if $nav.events}} {{if $nav.events}}
<li role="menuitem" id="nav-events-link" class="nav-menu {{$sel.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> </li>
{{/if}} {{/if}}
{{if $nav.community}} {{if $nav.community}}
<li role="menuitem" id="nav-community-link" class="nav-menu {{$sel.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> </li>
{{/if}} {{/if}}