Merge branch 'dev' of https://github.com/redmatrix/hubzilla into dev_merge

10 files changed, 274 insertions, 329 deletions

diff --git a/view/css/bootstrap-red.css b/view/css/bootstrap-red.css
index cea911440..f1ebb204e 100644
--- a/view/css/bootstrap-red.css
+++ b/view/css/bootstrap-red.css
@@ -3,23 +3,15 @@
 /* nav overrides */
 
 nav .badge {
-	position: relative;
-	top: -49px;
-	left: 2px;
-	float: left;
+	position: absolute;
+	top: 1px;
+	left: 1px;
 	font-size: 10px;
 	line-height: 20px;
 	padding: 0px 5px;
 	height: 20px;
 	min-width: 20px;
 	border-radius: 10px;
-	cursor: pointer;
-}
-
-@media screen and (max-width: 767px) {
-	nav .badge {
-		top: -46px;
-	}
 }
 
 #navbar-collapse-1 i,
@@ -27,31 +19,12 @@ nav .badge {
 	font-size: 14px;
 }
 
-nav ul li {
-	max-height: 50px;
-}
-
 nav .navbar-header img {
 	height: 49px;
 	width: 49px;
 	margin-top: 1px;
 }
 
-nav .dropdown-menu {
-	max-height: 450px;
-	width: 270px;
-	overflow-y: auto;
-	margin-top: 0px;
-}
-
-nav .navbar-collapse .navbar-left {
-	float: left;
-}
-
-nav .navbar-collapse .navbar-right {
-	float: right;
-}
-
 /* nav overrides end */
 
 
@@ -60,13 +33,19 @@ aside .nav-pills > li > a,
 	padding: 6px 10px;
 }
 
-.wall-item-tools .dropdown-menu {
-	min-width: auto;
+nav .dropdown-menu {
+	margin-top: 0px;
+	max-height: 70vh;
+	overflow: auto;
+}
+
+nav .navbar-collapse.in .dropdown-menu {
+	max-height: none;
+	overflow: none;
 }
 
-.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/css/mod_apps.css b/view/css/mod_apps.css
index 7ccc11ffb..0a231bc84 100644
--- a/view/css/mod_apps.css
+++ b/view/css/mod_apps.css
@@ -5,12 +5,6 @@
 	padding: 20px;
 }
 
-.app-detail {
-	height: 130px;
-	overflow-x: hidden;
-	overflow-y: hidden;
-}
-
-.app-tools {
-	margin-bottom: 0;
+.app-name {
+	margin: 10px 0px;
 }
diff --git a/view/js/main.js b/view/js/main.js
index 2fc912093..db37925e5 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -308,12 +308,6 @@ $(function() {
 		}
 	}
 
-	// fancyboxes
-	// Is this actually used anywhere?
-	$("a.popupbox").colorbox({
-		'transition' : 'elastic'
-	});
-
 	NavUpdate(); 
 	// Allow folks to stop the ajax page updates with the pause/break key
 	$(document).keydown(function(event) {
@@ -374,30 +368,38 @@ function NavUpdate() {
 
 			updateCountsOnly = false;
 
+			if(data.network || data.home || data.intros || data.mail || data.all_events || data.notify) {
+				$('#notifications-btn').css('color', 'white').prop('disabled', false);
+			}
+			else {
+				$('#notifications-btn').css('color', 'grey').prop('disabled', true);
+				$('#navbar-collapse-1').removeClass('in');
+			}
+
 			if(data.network == 0) {
 				data.network = '';
-				$('.net-update').removeClass('show');
+				$('.net-update, .net-button').hide();
 			} else {
-				$('.net-update').addClass('show');
+				$('.net-update, .net-button').show();
 			}
 			$('.net-update').html(data.network);
 
-			if(data.home == 0) { data.home = ''; $('.home-update').removeClass('show'); } else { $('.home-update').addClass('show'); }
+			if(data.home == 0) { data.home = ''; $('.home-update, .home-button').hide(); } else { $('.home-update, .home-button').show(); }
 			$('.home-update').html(data.home);
 
-			if(data.intros == 0) { data.intros = ''; $('.intro-update').removeClass('show'); } else { $('.intro-update').addClass('show'); }
+			if(data.intros == 0) { data.intros = ''; $('.intro-update, .intro-button').hide(); } else { $('.intro-update, .intro-button').show(); }
 			$('.intro-update').html(data.intros);
 
-			if(data.mail == 0) { data.mail = ''; $('.mail-update').removeClass('show'); } else { $('.mail-update').addClass('show'); }
+			if(data.mail == 0) { data.mail = ''; $('.mail-update, .mail-button').hide(); } else { $('.mail-update, .mail-button').show(); }
 			$('.mail-update').html(data.mail);
 
-			if(data.notify == 0) { data.notify = ''; $('.notify-update').removeClass('show'); } else { $('.notify-update').addClass('show'); }
+			if(data.notify == 0) { data.notify = ''; $('.notify-update, .notify-button').hide(); } else { $('.notify-update, .notify-button').show(); }
 			$('.notify-update').html(data.notify);
 
 			if(data.register == 0) { data.register = ''; $('.register-update').removeClass('show'); } else { $('.register-update').addClass('show'); }
 			$('.register-update').html(data.register);
 
-			if(data.events == 0) { data.events = ''; $('.events-update').removeClass('show'); } else { $('.events-update').addClass('show'); }
+			if(data.events == 0) { data.events = ''; $('.events-update, .events-button').hide(); } else { $('.events-update, .events-button').show(); }
 			$('.events-update').html(data.events);
 
 			if(data.events_today == 0) { data.events_today = ''; $('.events-today-update').removeClass('show'); } else { $('.events-today-update').addClass('show'); $('.events-update').html(data.events + '*'); }
@@ -409,7 +411,7 @@ function NavUpdate() {
 			if(data.birthdays_today == 0) { data.birthdays_today = ''; $('.birthdays-today-update').removeClass('show'); } else { $('.birthdays-today-update').addClass('show'); $('.birthdays-update').html(data.birthdays + '*'); }
 			$('.birthdays-today-update').html(data.birthdays_today);
 
-			if(data.all_events == 0) { data.all_events = ''; $('.all_events-update').removeClass('show'); } else { $('.all_events-update').addClass('show'); }
+			if(data.all_events == 0) { data.all_events = ''; $('.all_events-update, .all_events-button').hide(); } else { $('.all_events-update, .all_events-button').show(); }
 			$('.all_events-update').html(data.all_events);
 
 			if(data.all_events_today == 0) { data.all_events_today = ''; $('.all_events-today-update').removeClass('show'); } else { $('.all_events-today-update').addClass('show'); $('.all_events-update').html(data.all_events + '*'); }
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index f5da8a222..02ee689ce 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1188,6 +1188,16 @@ margin-right: 50px;
 	color: $toolicon_colour;
 }
 
+.generic-icons-nav {
+	font-size: 1.2em;
+	margin-right: 7px;
+}
+
+nav .navbar-collapse.in .generic-icons,
+nav .navbar-collapse.collapsing .generic-icons {
+	color: $nav_active_icon_colour;
+}
+
 .admin-icons {
 	font-size: 1.2em;
 	color: $toolicon_colour;
@@ -1524,7 +1534,6 @@ img.mail-conv-sender-photo {
 
 /* nav bootstrap */
 
-
 nav img {
 	border-radius: $radiuspx;
 }
@@ -1747,22 +1756,11 @@ blockquote {
 	border-radius: $radiuspx;
 }
 
-nav .badge:hover {
-	background-color: #999;
-}
-
 nav .badge.home-update,
 nav .badge.notify-update,
 nav .badge.intro-update,
 nav .badge.mail-update {
-	background-color:#C9302C;
-}
-
-nav .badge.home-update:hover,
-nav .badge.notify-update:hover,
-nav .badge.intro-update:hover,
-nav .badge.mail-update:hover {
-	background-color:#D9534F;
+	background-color: #C9302C;
 }
 
 .dropdown-menu {
@@ -1830,7 +1828,8 @@ nav .badge.mail-update:hover {
 #expand-aside,
 #expand-tabs,
 #doco-return-to-top-btn,
-#context-help-btn {
+#context-help-btn,
+#notifications-btn {
 	color: $nav_active_icon_colour;
 	padding: 7px 10px;
 }
@@ -2103,6 +2102,8 @@ dl.bb-dl > dd > li {
 
 .app-icon {
 	font-size: 80px;
+	color: $toolicon_colour;
+	text-shadow: 3px 3px 3px lightgrey;
 	text-align: center;
 }
 
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 5410999b4..81a95c68b 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -53,8 +53,8 @@ $(document).ready(function() {
 	});
 
 	$('.usermenu-head').click(function() {
-		if($('#navbar-collapse-1').hasClass('in')){
-			$('#navbar-collapse-1').removeClass('in');
+		if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('in')){
+			$('#navbar-collapse-1, #navbar-collapse-2').removeClass('in');
 		}
 	});
 	
diff --git a/view/tpl/app.tpl b/view/tpl/app.tpl
index 434653e1e..2ecb5a701 100644
--- a/view/tpl/app.tpl
+++ b/view/tpl/app.tpl
@@ -1,6 +1,7 @@
+{{if !$navapps}}
 <div class="app-container">
 	<div class="app-detail{{if $deleted}} app-deleted{{/if}}">
-		<a href="{{$app.url}}" {{if $ap.target}}target="{{$ap.target}}" {{/if}}{{if $app.desc}}title="{{$app.desc}}{{if $app.price}} ({{$app.price}}){{/if}}"{{else}}title="{{$app.name}}"{{/if}}>{{if $icon}}<i class="app-icon fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="80" height="80" />{{/if}}
+		<a href="{{$app.url}}"{{if $app.target}} target="{{$app.target}}"{{/if}}{{if $app.desc}} title="{{$app.desc}}{{if $app.price}} ({{$app.price}}){{/if}}"{{else}}title="{{$app.name}}"{{/if}}>{{if $icon}}<i class="app-icon fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="80" height="80" />{{/if}}
 			<div class="app-name" style="text-align:center;">{{$app.name}}</div>
 		</a>
 	</div>
@@ -10,17 +11,21 @@
 		<a href="{{$app.page}}" class="btn btn-default" title="{{$purchase}}" ><i class="fa fa-external"></i></a>
 	</div>
 	{{/if}}
-	{{if $install || $update || $delete }}
+
 	<div class="app-tools">
 		<form action="{{$hosturl}}appman" method="post">
 		<input type="hidden" name="papp" value="{{$app.papp}}" />
+		{{if $install || $update || $delete }}
 		{{if $install}}<button type="submit" name="install" value="{{$install}}" class="btn btn-default btn-xs" title="{{$install}}" ><i class="fa fa-arrow-circle-o-down" ></i></button>{{/if}}
 		{{if $edit}}<input type="hidden" name="appid" value="{{$app.guid}}" /><button type="submit" name="edit" value="{{$edit}}" class="btn btn-default btn-xs" title="{{$edit}}" ><i class="fa fa-pencil" ></i></button>{{/if}}
 		{{if $delete}}<button type="submit" name="delete" value="{{if $deleted}}{{$undelete}}{{else}}{{$delete}}{{/if}}" class="btn btn-default btn-xs" title="{{if $deleted}}{{$undelete}}{{else}}{{$delete}}{{/if}}" ><i class="fa fa-trash-o drop-icons"></i></button>{{/if}}
+		{{/if}}
 		<button type="submit" name="feature" value="feature" class="btn btn-default btn-xs" ><i class="fa fa-star"{{if $featured}} style="color: gold"{{/if}}></i></button>
 		</form>
 	</div>
 	{{/if}}
-	{{/if}}
 </div>
+{{else}}
+<li><a href="{{$app.url}}">{{if $icon}}<i class="generic-icons-nav fa fa-fw fa-{{$icon}}"></i>{{else}}<img src="{{$app.photo}}" width="16" height="16" style="margin-right:9px;"/>{{/if}}{{$app.name}}</a></li>
+{{/if}}
 
diff --git a/view/tpl/app_create.tpl b/view/tpl/app_create.tpl
index 32ab7fd4c..7a0521436 100644
--- a/view/tpl/app_create.tpl
+++ b/view/tpl/app_create.tpl
@@ -1,36 +1,40 @@
-<h2>{{$banner}}</h2>
-
-
-<form action="appman" method="post">
-{{if $guid}}
-<input type="hidden" name="guid" value="{{$guid}}" />
-{{/if}}
-{{if $author}}
-<input type="hidden" name="author" value="{{$author}}" />
-{{/if}}
-{{if $addr}}
-<input type="hidden" name="addr" value="{{$addr}}" />
-{{/if}}
-
-<input type="hidden" name="requires" value="{{$requires}}" />
-<input type="hidden" name="system" value="{{$system}}" />
-<input type="hidden" name="plugin" value="{{$plugin}}" />
-
-
-{{include file="field_input.tpl" field=$name}}
-{{include file="field_input.tpl" field=$categories}}
-{{include file="field_input.tpl" field=$url}}
-{{include file="field_textarea.tpl" field=$desc}}
-{{include file="field_input.tpl" field=$photo}}
-{{include file="field_input.tpl" field=$version}}
-{{include file="field_input.tpl" field=$price}}
-{{include file="field_input.tpl" field=$page}}
-
-{{if $embed}}
-{{include file="field_textarea.tpl" field=$embed}}
-{{/if}}
-
-<input type="submit" name="submit" value="{{$submit}}" />
-
-</form>
-
+<div class="generic-content-wrapper">
+	<div class="section-title-wrapper">
+		<h2>{{$banner}}</h2>
+	</div>
+
+	<div class="section-content-wrapper">
+		<form action="appman" method="post">
+		{{if $guid}}
+		<input type="hidden" name="guid" value="{{$guid}}" />
+		{{/if}}
+		{{if $author}}
+		<input type="hidden" name="author" value="{{$author}}" />
+		{{/if}}
+		{{if $addr}}
+		<input type="hidden" name="addr" value="{{$addr}}" />
+		{{/if}}
+
+		<input type="hidden" name="requires" value="{{$requires}}" />
+		<input type="hidden" name="system" value="{{$system}}" />
+		<input type="hidden" name="plugin" value="{{$plugin}}" />
+
+
+		{{include file="field_input.tpl" field=$name}}
+		{{include file="field_input.tpl" field=$categories}}
+		{{include file="field_input.tpl" field=$url}}
+		{{include file="field_textarea.tpl" field=$desc}}
+		{{include file="field_input.tpl" field=$photo}}
+		{{include file="field_input.tpl" field=$version}}
+		{{include file="field_input.tpl" field=$price}}
+		{{include file="field_input.tpl" field=$page}}
+
+		{{if $embed}}
+		{{include file="field_textarea.tpl" field=$embed}}
+		{{/if}}
+
+		<input type="submit" name="submit" value="{{$submit}}" />
+
+		</form>
+	</div>
+</div>
diff --git a/view/tpl/myapps.tpl b/view/tpl/myapps.tpl
index c654993b7..074965985 100755
--- a/view/tpl/myapps.tpl
+++ b/view/tpl/myapps.tpl
@@ -1,8 +1,11 @@
-<div class="generic-content-wrapper-styled">
-<h3>{{$title}}{{$cat}}</h3>
-
-{{foreach $apps as $ap}}
-{{$ap}}
-{{/foreach}}
-<div class="clear"></div>
+<div class="generic-content-wrapper">
+	<div class="section-title-wrapper">
+		<h2>{{$title}}{{$cat}}</h2>
+	</div>
+	<div class="section-content-wrapper">
+		{{foreach $apps as $ap}}
+		{{$ap}}
+		{{/foreach}}
+		<div class="clear"></div>
+	</div>
 </div>
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index c504e5515..236cde230 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -1,225 +1,190 @@
-	<div class="container-fluid">
-		<div class="navbar-header">
-			<div>
-				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
-				<button id="expand-tabs" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tabs-collapse-1">
-					<i class="fa fa-arrow-circle-down" id="expand-tabs-icon"></i>
-				</button>
-				<button id="expand-aside" type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#region_1">
-					<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
-				</button>
-				{{if $nav.help.6}}
-				<button id="context-help-btn" class="navbar-toggle" type="button" onclick="contextualHelp(); return false;">
-					<i class="fa fa-question-circle"></i>
-				</button>
-				{{/if}}
-			</div>
-			{{if $userinfo}}
-				<div class="usermenu-head dropdown-toggle fakelink" data-toggle="dropdown">
-					<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
-					<span class="caret" id="usermenu-caret"></span>
-				</div>
-				{{if $localuser}}
-					<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
-						{{foreach $nav.usermenu as $usermenu}}
-						<li role="presentation"><a href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a></li>
-						{{/foreach}}
-						<li role="presentation" class="divider"></li>
-						{{if $nav.profiles}}<li role="presentation"><a href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a></li>{{/if}}
-						{{if $nav.settings}}<li role="presentation"><a href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a></li>{{/if}}
-						{{if $nav.manage}}<li role="presentation"><a href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a></li>{{/if}}	
-						{{if $nav.channels}}
-						{{foreach $nav.channels as $chan}}
-							<li role="presentation" class="nav-channel-select"><a href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem">{{$chan.channel_name}}</a></li>
-						{{/foreach}}
-						{{/if}}
-						{{if $nav.admin}}
-						<li role="presentation" class="divider"></li>
-						<li role="presentation"><a href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a></li>
-						{{/if}}
-						{{if $nav.logout}}
-						<li role="presentation" class="divider"></li>
-						<li role="presentation"><a href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a></li>
-						{{/if}}
-					</ul>
-				{{else}}
-					{{if $nav.rusermenu}}
-						<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
-							<li role="presentation"><a href="{{$nav.rusermenu.0}}" role="menuitem">{{$nav.rusermenu.1}}</a></li>
-							<li role="presentation"><a href="{{$nav.rusermenu.2}}" role="menuitem">{{$nav.rusermenu.3}}</a></li>
-						</ul>
-					{{/if}}
-				{{/if}}
-			{{/if}}
+<div class="container-fluid">
+	<div class="navbar-header">
+		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+		</button>
+		{{if $localuser}}
+		<button id="notifications-btn" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" style="color: grey;">
+			<i class="fa fa-exclamation-circle"></i>
+		</button>
+		{{/if}}
+		<button id="expand-tabs" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tabs-collapse-1">
+			<i class="fa fa-arrow-circle-down" id="expand-tabs-icon"></i>
+		</button>
+		<button id="expand-aside" type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#region_1">
+			<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
+		</button>
+		{{if $nav.help.6}}
+		<button id="context-help-btn" class="navbar-toggle" type="button" onclick="contextualHelp(); return false;">
+			<i class="fa fa-question-circle"></i>
+		</button>
+		{{/if}}
+		{{if $userinfo}}
+		<div class="usermenu-head dropdown-toggle fakelink" data-toggle="dropdown">
+			<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
+			<span class="caret" id="usermenu-caret"></span>
 		</div>
-		<div class="collapse navbar-collapse" id="navbar-collapse-1">
-			<ul class="nav navbar-nav navbar-left">
-
+		{{if $localuser}}
+		<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
+			{{foreach $nav.usermenu as $usermenu}}
+			<li role="presentation"><a href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a></li>
+			{{/foreach}}
+			{{if $nav.manage}}
+			<li role="presentation"><a href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a></li>
+			{{/if}}	
+			{{if $nav.channels}}
+			{{foreach $nav.channels as $chan}}
+			<li role="presentation" class="nav-channel-select"><a href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem">{{$chan.channel_name}}</a></li>
+			{{/foreach}}
+			{{/if}}
+			<li role="presentation" class="divider"></li>
+			{{if $nav.profiles}}
+			<li role="presentation"><a href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a></li>
+			{{/if}}
+			{{if $nav.settings}}
+			<li role="presentation"><a href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a></li>
+			{{/if}}
+			{{if $nav.admin}}
+			<li role="presentation" class="divider"></li>
+			<li role="presentation"><a href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a></li>
+			{{/if}}
+			{{if $nav.logout}}
+			<li role="presentation" class="divider"></li>
+			<li role="presentation"><a href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a></li>
+			{{/if}}
+		</ul>
+		{{else}}
+		{{if $nav.rusermenu}}
+		<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
+			<li role="presentation"><a href="{{$nav.rusermenu.0}}" role="menuitem">{{$nav.rusermenu.1}}</a></li>
+			<li role="presentation"><a href="{{$nav.rusermenu.2}}" role="menuitem">{{$nav.rusermenu.3}}</a></li>
+		</ul>
+		{{/if}}
+		{{/if}}
+		{{/if}}
+	</div>
+	<div class="collapse navbar-collapse" id="navbar-collapse-1">
+		<ul class="nav navbar-nav navbar-left">
 			{{if $nav.network}}
-				<li class="{{$sel.network}} hidden-xs">
-					<a href="{{$nav.network.0}}" title="{{$nav.network.3}}" id="{{$nav.network.4}}"><i class="fa fa-th"></i></a>
-					<span class="net-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-network-menu"></span>
-					<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>
-						<li class="empty">{{$emptynotifications}}</li>
-					</ul>
-				</li>
-				<li class="{{$sel.network}} visible-xs">
-					<a href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="fa fa-th"></i></a>
-					<span class="net-update badge" rel="#nav-network-menu"></span>
-				</li>
+			<li class="{{$sel.network}} net-button" style="display: none;">
+				<a href="#" title="{{$nav.network.3}}" id="{{$nav.network.4}}" data-toggle="dropdown" rel="#nav-network-menu">
+					<i class="fa fa-fw 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>
+					<li class="empty">{{$emptynotifications}}</li>
+				</ul>
+			</li>
 			{{/if}}
-
 			{{if $nav.home}}
-				<li class="{{$sel.home}} hidden-xs">
-					<a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" id="{{$nav.home.4}}"><i class="fa fa-home"></i></a>
-					<span class="home-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-home-menu"></span>
-					<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>
-						<li class="empty">{{$emptynotifications}}</li>
-					</ul>
-				</li>
-				<li class="{{$sel.home}} visible-xs">
-					<a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="fa fa-home"></i></a>
-					<span class="home-update badge" rel="#nav-home-menu"></span>
-				</li>
+			<li class="{{$sel.home}} home-button" style="display: none;">
+				<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-fw fa-home"></i>
+					<span class="home-update badge"></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>
+					<li class="empty">{{$emptynotifications}}</li>
+				</ul>
+			</li>
 			{{/if}}
-
 			{{if $nav.messages}}
-				<li class="{{$sel.messages}} hidden-xs">
-					<a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}"><i class="fa fa-envelope"></i></a>
-					<span class="mail-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-messages-menu"></span>
-					<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>
-						<li class="empty">{{$emptynotifications}}</li>
-					</ul>
-				</li>
-				<li class="{{$sel.messages}} visible-xs">
-					<a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope"></i></a>
-					<span class="mail-update badge" rel="#nav-messages-menu"></span>
-				</li>
+			<li class="{{$sel.messages}} mail-button" style="display: none;">
+				<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-fw fa-envelope"></i>
+					<span class="mail-update badge"></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>
+					<li class="empty">{{$emptynotifications}}</li>
+				</ul>
+			</li>
 			{{/if}}
-
 			{{if $nav.all_events}}
-				<li class="{{$sel.all_events}} hidden-xs">
-					<a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" id='{{$nav.all_events.4}}'><i class="fa fa-calendar"></i></a>
-					<span class="all_events-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-all_events-menu"></span>
-					<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>
-						<li class="empty">{{$emptynotifications}}</li>
-					</ul>
-				</li>
-				<li class="{{$sel.all_events}} visible-xs">
-					<a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" ><i class="fa fa-calendar"></i></a>
-					<span class="all_events-update badge" rel="#nav-all_events-menu"></span>
-				</li>
+			<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}}" data-toggle="dropdown" rel="#nav-all_events-menu">
+					<i class="fa fa-fw fa-calendar"></i>
+					<span class="all_events-update badge"></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>
+					<li class="empty">{{$emptynotifications}}</li>
+				</ul>
+			</li>
 			{{/if}}
-
 			{{if $nav.intros}}
-				<li class="{{$sel.intros}} hidden-xs">
-					<a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" id="{{$nav.intros.4}}"><i class="fa fa-user"></i></a>
-					<span class="intro-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-intros-menu"></span>
-					<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>
-					</ul>
-				</li>
-				<li class="{{$sel.intros}} visible-xs">
-					<a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" ><i class="fa fa-user"></i></a>
-					<span class="intro-update badge" rel="#nav-intros-menu"></span>
-				</li>
+			<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-fw fa-users"></i>
+					<span class="intro-update badge"></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>
+				</ul>
+			</li>
 			{{/if}}
-		
 			{{if $nav.notifications}}
-				<li class="{{$sel.notifications}} hidden-xs">
-					<a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}" id="{{$nav.notifications.4}}"><i class="fa fa-exclamation"></i></a>
-					<span class="notify-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-notify-menu"></span>
-					<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>
-						<li class="empty">{{$emptynotifications}}</li>
-					</ul>
-				</li>
-				<li class="{{$sel.notifications}} visible-xs">
-					<a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-exclamation"></i></a>
-					<span class="notify-update badge" rel="#nav-notify-menu"></span>
-				</li>
+			<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-fw fa-exclamation"></i>
+					<span class="notify-update badge"></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>
+					<li class="empty">{{$emptynotifications}}</li>
+				</ul>
+			</li>
 			{{/if}}
-
 			{{if $nav.login && !$userinfo}}
-				<li class="">
-					<a href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-toggle="modal" data-target="#nav-login">{{$nav.loginmenu.1.1}}</a>
-				</li>
+			<li class="">
+				<a href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}" data-toggle="modal" data-target="#nav-login">{{$nav.loginmenu.1.1}}</a>
+			</li>
 			{{/if}}
-
 			{{if $nav.register}}
-				<li class="{{$nav.register.2}}"><a href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a></li>
+			<li class="{{$nav.register.2}} hidden-xs"><a href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a></li>
 			{{/if}}
-
 			{{if $nav.alogout}}
-				<li class="{{$nav}}-alogout.2"><a href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a></li>
+			<li class="{{$nav}}-alogout.2 hidden-xs"><a href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a></li>
 			{{/if}}
-			</ul>
-
-			<ul class="nav navbar-nav navbar-right">
-				<li class="hidden-xs">
-					<form method="get" action="search" role="search">
-						<div id="nav-search-spinner"></div><input class="fa-search" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();"/>
-					</form>
-				</li>
-				<li class="visible-xs">
-					<a href="/search" title="{{$nav.search.3}}"><i class="fa fa-search"></i></a>
-				</li>
-
-			{{if $powered_by}}
-				<div id="powered-by">{{$powered_by}}</div>
-			{{/if}}
-{{if ! $navapps}}
-			{{if $nav.directory}}
-				<li class="{{$sel.directory}}">
-					<a class="{{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" id="{{$nav.directory.4}}"><i class="fa fa-sitemap"></i></a>
-				</li>
-			{{/if}}
-
-			{{if $nav.apps}}
-				<li class="{{$sel.apps}}">
-					<a class="{{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" id="{{$nav.apps.4}}"><i class="fa fa-cogs"></i></a>
-				</li>
-			{{/if}}
-
-			{{if $nav.help}}
-				<li class="{{$sel.help}}{{if $nav.help.6}} hidden-xs{{/if}}">
-					<a class="{{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}"{{if $nav.help.6}} onclick="contextualHelp(); return false;"{{/if}}>{{if $nav.help.6}}<i class="fa fa-question-circle"></i>{{else}}<i class="fa fa-question"></i>{{/if}}</a>
-				</li>
+		</ul>
+		<ul class="nav navbar-nav navbar-right hidden-xs">
+			<li class="">
+				<form method="get" action="search" role="search">
+					<div id="nav-search-spinner"></div><input class="fa-search" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();"/>
+				</form>
+			</li>
+			{{if $nav.help.6}}
+			<li class="{{$sel.help}}">
+				<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}}
-{{/if}}
-
-			{{if $navapps}}
-				{{if $nav.help.6}}
-				<li class="{{$sel.help}} hidden-xs">
-					<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>
-				{{$navapps}}
-			{{/if}}
-
-			</ul>
-
-		</div>
-		<div class="collapse navbar-collapse" id="navbar-collapse-2">
+			<li class="">
+				<a href="#" data-toggle="dropdown"><i class="fa fa-bars"></i></a>
+				<ul class="dropdown-menu">
+					{{foreach $navapps as $navapp}}
+					{{$navapp}}
+					{{/foreach}}
+					{{if $localuser}}
+					<li class="divider"></li>
+					<li><a href="/apps"><i class="generic-icons-nav fa fa-fw fa-plus-circle"></i>Add Apps</a></li>
+					{{/if}}
+				</ul>
+			</li>
+		</ul>
+	</div>
+	<div class="collapse navbar-collapse" id="navbar-collapse-2">
+		<ul class="nav navbar-nav navbar-left hidden-sm hidden-md hidden-lg">
 			{{$navapps}}
-		</div>
+		</ul>
 	</div>
 
 	{{if $nav.help.6}}
@@ -231,3 +196,4 @@
 		</div>
 	</div>
 	{{/if}}
+</div>
diff --git a/view/tpl/navapps.tpl b/view/tpl/navapps.tpl
deleted file mode 100644
index de4a6223c..000000000
--- a/view/tpl/navapps.tpl
+++ /dev/null
@@ -1,9 +0,0 @@
-<ul class="dropdown-menu" style="max-height: 80vh">
-	{{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}}
-	{{if $localuser}}
-	<li class="divider"></li>
-	<li><a href="/apps/edit"><i class="app-icon fa fa-plus-circle"></i>&nbsp;Add Apps</a></li>
-	{{/if}}
-</ul>