fix notifications badge positioning and rendering of submenus in collapsed mode

3 files changed, 36 insertions, 35 deletions

diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index e98065b2b..b7310954a 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -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 {
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 666fdfd67..bd829d4d3 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -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>
diff --git a/view/tpl/navapps.tpl b/view/tpl/navapps.tpl
index de4a6223c..a90fdbaf2 100644
--- a/view/tpl/navapps.tpl
+++ b/view/tpl/navapps.tpl
@@ -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}}