vier: make TopNavBar mobile friendly
This commit is contained in:
parent
99861b9fa6
commit
51a8864519
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}}
|
||||
|
||||
|
|
Loading…
Reference in a new issue