fix notifications badge positioning and rendering of submenus in collapsed mode

This commit is contained in:
Mario Vavti 2017-02-01 22:24:37 +01:00
parent 1a56045b42
commit d476b7477b
3 changed files with 36 additions and 35 deletions

View File

@ -3,10 +3,8 @@
/* nav overrides */
nav .badge {
position: relative;
top: -49px;
left: 2px;
float: left;
margin-top: -30px;
margin-left: -30px;
font-size: 10px;
line-height: 20px;
padding: 0px 5px;
@ -14,12 +12,7 @@ nav .badge {
min-width: 20px;
border-radius: 10px;
cursor: pointer;
}
@media screen and (max-width: 767px) {
nav .badge {
top: -46px;
}
display: inline-block !important;
}
#navbar-collapse-1 i,
@ -27,10 +20,6 @@ nav .badge {
font-size: 14px;
}
nav ul li {
max-height: 50px;
}
nav .navbar-header img {
height: 49px;
width: 49px;
@ -45,13 +34,12 @@ aside .nav-pills > li > a,
padding: 6px 10px;
}
.wall-item-tools .dropdown-menu {
min-width: auto;
nav .dropdown-menu {
margin-top: 0px;
}
.dropdown-menu li a {
overflow: hidden;
text-overflow: ellipsis;
.wall-item-tools .dropdown-menu {
min-width: auto;
}
.nav-tabs.nav-justified > li {

View File

@ -60,8 +60,10 @@
<ul class="nav navbar-nav navbar-left">
{{if $nav.network}}
<li class="{{$sel.network}} net-button" style="display: none;">
<a href="#" title="{{$nav.network.3}}" id="{{$nav.network.4}}" onclick="return false;" data-toggle="dropdown" rel="#nav-network-menu"><i class="fa fa-th"></i></a>
<span class="net-update badge" data-toggle="dropdown"></span>
<a href="#" title="{{$nav.network.3}}" id="{{$nav.network.4}}" data-toggle="dropdown" rel="#nav-network-menu">
<i class="fa fa-th"></i>
<span class="net-update badge"></span>
</a>
<ul id="nav-network-menu" role="menu" class="dropdown-menu" rel="network">
{{* <li id="nav-network-see-all"><a href="{{$nav.network.all.0}}">{{$nav.network.all.1}}</a></li> *}}
<li id="nav-network-mark-all"><a href="#" onclick="markRead('network'); return false;">{{$nav.network.mark.1}}</a></li>
@ -72,8 +74,10 @@
{{if $nav.home}}
<li class="{{$sel.home}} home-button" style="display: none;">
<a class="{{$nav.home.2}}" href="#" title="{{$nav.home.3}}" id="{{$nav.home.4}}" onclick="return false;" data-toggle="dropdown" rel="#nav-home-menu"><i class="fa fa-home"></i></a>
<span class="home-update badge" data-toggle="dropdown"></span>
<a class="{{$nav.home.2}}" href="#" title="{{$nav.home.3}}" id="{{$nav.home.4}}" data-toggle="dropdown" rel="#nav-home-menu">
<i class="fa fa-home"></i>
<span class="home-update badge" data-toggle="dropdown"></span>
</a>
<ul id="nav-home-menu" class="dropdown-menu" rel="home">
{{* <li id="nav-home-see-all"><a href="{{$nav.home.all.0}}">{{$nav.home.all.1}}</a></li> *}}
<li id="nav-home-mark-all"><a href="#" onclick="markRead('home'); return false;">{{$nav.home.mark.1}}</a></li>
@ -84,8 +88,10 @@
{{if $nav.messages}}
<li class="{{$sel.messages}} mail-button" style="display: none;">
<a class="{{$nav.messages.2}}" href="#" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}" onclick="return false;" data-toggle="dropdown" rel="#nav-messages-menu"><i class="fa fa-envelope"></i></a>
<span class="mail-update badge" data-toggle="dropdown"></span>
<a class="{{$nav.messages.2}}" href="#" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}" data-toggle="dropdown" rel="#nav-messages-menu">
<i class="fa fa-envelope"></i>
<span class="mail-update badge" data-toggle="dropdown"></span>
</a>
<ul id="nav-messages-menu" class="dropdown-menu" rel="messages">
<li id="nav-messages-see-all"><a href="{{$nav.messages.all.0}}">{{$nav.messages.all.1}}</a></li>
<li id="nav-messages-mark-all"><a href="#" onclick="markRead('messages'); return false;">{{$nav.messages.mark.1}}</a></li>
@ -96,8 +102,10 @@
{{if $nav.all_events}}
<li class="{{$sel.all_events}} all_events-button" style="display: none;">
<a class="{{$nav.all_events.2}}" href="#" title="{{$nav.all_events.3}}" id="{{$nav.all_events.4}}" onclick="return false;" data-toggle="dropdown" rel="#nav-all_events-menu"><i class="fa fa-calendar"></i></a>
<span class="all_events-update badge" data-toggle="dropdown"></span>
<a class="{{$nav.all_events.2}}" href="#" title="{{$nav.all_events.3}}" id="{{$nav.all_events.4}}" data-toggle="dropdown" rel="#nav-all_events-menu">
<i class="fa fa-calendar"></i>
<span class="all_events-update badge" data-toggle="dropdown"></span>
</a>
<ul id="nav-all_events-menu" class="dropdown-menu" rel="all_events">
<li id="nav-all_events-see-all"><a href="{{$nav.all_events.all.0}}">{{$nav.all_events.all.1}}</a></li>
<li id="nav-all_events-mark-all"><a href="#" onclick="markRead('all_events'); return false;">{{$nav.all_events.mark.1}}</a></li>
@ -108,8 +116,10 @@
{{if $nav.intros}}
<li class="{{$sel.intros}} intro-button" style="display: none;">
<a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" id="{{$nav.intros.4}}" data-toggle="dropdown" rel="#nav-intros-menu"><i class="fa fa-user"></i></a>
<span class="intro-update badge" data-toggle="dropdown"></span>
<a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" id="{{$nav.intros.4}}" data-toggle="dropdown" rel="#nav-intros-menu">
<i class="fa fa-user"></i>
<span class="intro-update badge" data-toggle="dropdown"></span>
</a>
<ul id="nav-intros-menu" class="dropdown-menu" rel="intros">
<li id="nav-intros-see-all"><a href="{{$nav.intros.all.0}}">{{$nav.intros.all.1}}</a></li>
<li class="empty">{{$emptynotifications}}</li>
@ -119,8 +129,10 @@
{{if $nav.notifications}}
<li class="{{$sel.notifications}} notify-button" style="display: none;">
<a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}" id="{{$nav.notifications.4}}" data-toggle="dropdown" rel="#nav-notify-menu"><i class="fa fa-exclamation"></i></a>
<span class="notify-update badge" data-toggle="dropdown"></span>
<a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}" id="{{$nav.notifications.4}}" data-toggle="dropdown" rel="#nav-notify-menu">
<i class="fa fa-exclamation"></i>
<span class="notify-update badge" data-toggle="dropdown"></span>
</a>
<ul id="nav-notify-menu" class="dropdown-menu" rel="notify">
<li id="nav-notify-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li>
<li id="nav-notify-mark-all"><a href="#" onclick="markRead('notify'); return false;">{{$nav.notifications.mark.1}}</a></li>
@ -168,10 +180,11 @@
<a class="{{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}" onclick="contextualHelp(); return false;"><i class="fa fa-question-circle"></i></a>
</li>
{{/if}}
<li class="dropdown-toggle" data-toggle="dropdown">
<a href="#"><i class="fa fa-bars"></i></a>
<li>
<a href="#" data-toggle="dropdown"><i class="fa fa-bars"></i></a>
{{$navapps}}
</li>
{{$navapps}}
</ul>
</div>

View File

@ -1,4 +1,4 @@
<ul class="dropdown-menu" style="max-height: 80vh">
<ul class="dropdown-menu">
{{foreach $apps as $app}}
<li><a href="{{$app.url}}">{{if $icon}}<i class="app-icon fa fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" />{{/if}}&nbsp;{{$app.name}}</a></li>
{{/foreach}}