Merge pull request #345 from anaqreon/context-help

New help panel that slides in from the top and pushes the content ...

15 files changed, 292 insertions, 315 deletions

diff --git a/doc/context/channel/help.html b/doc/context/channel/help.html
deleted file mode 100644
index 810913ff3..000000000
--- a/doc/context/channel/help.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-    var contextualHelp1 = function (target, openSidePanel) {
-        $("#help-content").removeClass('help-content-open');  // Close the help panel
-        $("#navbar-collapse-1").removeClass('in');  // Collapse the navbar for small screens
-        if (openSidePanel) {
-            $("main").addClass('region_1-on');  // Open the side panel to highlight element 
-        } else {
-            $("main").removeClass('region_1-on');
-        }
-        // Animate the page scroll to the element and then pulse the element to direct attention
-        $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - 20}, 'slow');
-        for (i = 0; i < 3; i++) {
-            $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
-        }
-    }
-</script>
-<dl class="dl-horizontal">
-  <dt>General</dt>
-  <dd>This is the home page of a channel. It is similar to someone's profile "wall" in a social network context. Posts created by the channel are displayed according to the observer's viewing permissions.</dd>
-  <dt>Create a Post</dt>
-  <dd>If you have permission to create posts on the channel page, then you will see the post editor at the top.</dd>
-  <dt><a href='#' onclick='contextualHelp1("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
-  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
-</dl>
\ No newline at end of file
diff --git a/doc/context/cloud/help.html b/doc/context/cloud/help.html
deleted file mode 100644
index 105947517..000000000
--- a/doc/context/cloud/help.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-    var contextualHelp1 = function (target, openSidePanel) {
-        $("#help-content").removeClass('help-content-open');  // Close the help panel
-        $("#navbar-collapse-1").removeClass('in');  // Collapse the navbar for small screens
-        if (openSidePanel) {
-            $("main").addClass('region_1-on');  // Open the side panel to highlight element 
-        } else {
-            $("main").removeClass('region_1-on');
-        }
-        // Animate the page scroll to the element and then pulse the element to direct attention
-        $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - 20}, 'slow');
-        for (i = 0; i < 3; i++) {
-            $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
-        }
-    }
-</script>
-<dl class="dl-horizontal">
-  <dt>General</dt>
-  <dd>This page displays a channel's "cloud" files. The files visible to the observer depend on the individual file permissions set by the channel owner. If you have permission to create/upload files you will see control buttons above the file list.</dd>
-  <dt><a href='#' onclick='contextualHelp1("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
-  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
-</dl>
\ No newline at end of file
diff --git a/doc/context/admin/security/help.html b/doc/context/en/admin/security/help.html
index e9a741a5e..e9a741a5e 100644
--- a/doc/context/admin/security/help.html
+++ b/doc/context/en/admin/security/help.html
diff --git a/doc/context/en/channel/help.html b/doc/context/en/channel/help.html
new file mode 100644
index 000000000..6e3181cbf
--- /dev/null
+++ b/doc/context/en/channel/help.html
@@ -0,0 +1,8 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>This is the home page of a channel. It is similar to someone's profile "wall" in a social network context. Posts created by the channel are displayed according to the observer's viewing permissions.</dd>
+  <dt>Create a Post</dt>
+  <dd>If you have permission to create posts on the channel page, then you will see the post editor at the top.</dd>
+  <dt><a href='#' onclick='contextualHelpFocus("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
+  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
+</dl>
\ No newline at end of file
diff --git a/doc/context/en/cloud/help.html b/doc/context/en/cloud/help.html
new file mode 100644
index 000000000..a8f193223
--- /dev/null
+++ b/doc/context/en/cloud/help.html
@@ -0,0 +1,6 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>This page displays a channel's "cloud" files. The files visible to the observer depend on the individual file permissions set by the channel owner. If you have permission to create/upload files you will see control buttons above the file list.</dd>
+  <dt><a href='#' onclick='contextualHelpFocus("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
+  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
+</dl>
\ No newline at end of file
diff --git a/doc/context/mail/help.html b/doc/context/en/mail/help.html
index a2361a135..a2361a135 100644
--- a/doc/context/mail/help.html
+++ b/doc/context/en/mail/help.html
diff --git a/doc/context/network/help.html b/doc/context/en/network/help.html
index 956af7380..53e993b69 100644
--- a/doc/context/network/help.html
+++ b/doc/context/en/network/help.html
@@ -1,25 +1,9 @@
-<script>
-    var contextualHelp1 = function (target, openSidePanel) {
-        $("#help-content").removeClass('help-content-open');  // Close the help panel
-        $("#navbar-collapse-1").removeClass('in');  // Collapse the navbar for small screens
-        if (openSidePanel) {
-            $("main").addClass('region_1-on');  // Open the side panel to highlight element 
-        } else {
-            $("main").removeClass('region_1-on');
-        }
-        // Animate the page scroll to the element and then pulse the element to direct attention
-        $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - 20}, 'slow');
-        for (i = 0; i < 3; i++) {
-            $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
-        }
-    }
-</script>
 <dl class="dl-horizontal">
   <dt>General</dt>
   <dd>The network page displays a stream of posts and conversations, typically ordered by the most recently updated. This page is highly customizable.</dd>
-  <dt><a href='#' onclick='contextualHelp1("#profile-jot-wrapper", 0); return false;' title="Click to highlight element...">Create a Post</a></dt>
+  <dt><a href='#' onclick='contextualHelpFocus("#profile-jot-wrapper", 0); return false;' title="Click to highlight element...">Create a Post</a></dt>
   <dd>At the top of the page there is a text box that says "Share". Clicking this box opens a new post editor. The post editor is customizable, but the basic editor provides fields for a post body and an optional post <b>Title</b>. Buttons below the text area to the left provide shortcuts to text formatting and inserting links, images, and other data into the post. The buttons to the right provide a post preview, the post permissions setting, and a <b>Submit</b> button to send the post.</dd>
-  <dt><a href='#' onclick='contextualHelp1("#group-sidebar", 1); return false;' title="Click to highlight element...">Privacy Groups</a></dt>
+  <dt><a href='#' onclick='contextualHelpFocus("#group-sidebar", 1); return false;' title="Click to highlight element...">Privacy Groups</a></dt>
   <dd>The privacy groups you have created are displayed in the side panel. Selecting them filters posts to those created by channels in the chosen group.</dd>
   <dt><a href='#' onclick='$("#dbtn-acl").click(); return false;' title="Click to highlight element...">Post Permissions</a></dt>
   <dd>The access control list (ACL) is what you use to set who can see your new post. Pressing the ACL button beside the Submit button will display a dialog in which you can select what channels and/or privacy groups can see the post. You can also select who is explicitly denied access. For example, say you are planning a surprise party for a friend. You can send an invitation post to everyone in your <b>Friends</b> group <i>except</i> the friend you are surprising. In this case you "show" the <b>Friends</b> group but "don't show" that one person.</dd>
diff --git a/doc/context/en/photos/help.html b/doc/context/en/photos/help.html
new file mode 100644
index 000000000..78b442bb4
--- /dev/null
+++ b/doc/context/en/photos/help.html
@@ -0,0 +1,6 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>This page displays a channel's photo albums. The images visible to the observer depend on the individual image permissions.</dd>
+  <dt><a href='#' onclick='contextualHelpFocus("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
+  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
+</dl>
\ No newline at end of file
diff --git a/doc/context/en/profile/help.html b/doc/context/en/profile/help.html
new file mode 100644
index 000000000..563e0df99
--- /dev/null
+++ b/doc/context/en/profile/help.html
@@ -0,0 +1,6 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>This is the profile page of a channel. It typically displays information describing the channel. If the channel represents a person in a social network, for example, then the profile might provide contact information and other personal details about the person. Channels can have multiple profiles, where the displayed profile depends on the observer.</dd>
+  <dt><a href='#' onclick='contextualHelpFocus("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
+  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
+</dl>
\ No newline at end of file
diff --git a/doc/context/photos/help.html b/doc/context/photos/help.html
deleted file mode 100644
index f41611f8d..000000000
--- a/doc/context/photos/help.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-    var contextualHelp1 = function (target, openSidePanel) {
-        $("#help-content").removeClass('help-content-open');  // Close the help panel
-        $("#navbar-collapse-1").removeClass('in');  // Collapse the navbar for small screens
-        if (openSidePanel) {
-            $("main").addClass('region_1-on');  // Open the side panel to highlight element 
-        } else {
-            $("main").removeClass('region_1-on');
-        }
-        // Animate the page scroll to the element and then pulse the element to direct attention
-        $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - 20}, 'slow');
-        for (i = 0; i < 3; i++) {
-            $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
-        }
-    }
-</script>
-<dl class="dl-horizontal">
-  <dt>General</dt>
-  <dd>This page displays a channel's photo albums. The images visible to the observer depend on the individual image permissions.</dd>
-  <dt><a href='#' onclick='contextualHelp1("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
-  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
-</dl>
\ No newline at end of file
diff --git a/doc/context/profile/help.html b/doc/context/profile/help.html
deleted file mode 100644
index 0d4abb8cb..000000000
--- a/doc/context/profile/help.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-    var contextualHelp1 = function (target, openSidePanel) {
-        $("#help-content").removeClass('help-content-open');  // Close the help panel
-        $("#navbar-collapse-1").removeClass('in');  // Collapse the navbar for small screens
-        if (openSidePanel) {
-            $("main").addClass('region_1-on');  // Open the side panel to highlight element 
-        } else {
-            $("main").removeClass('region_1-on');
-        }
-        // Animate the page scroll to the element and then pulse the element to direct attention
-        $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - 20}, 'slow');
-        for (i = 0; i < 3; i++) {
-            $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
-        }
-    }
-</script>
-<dl class="dl-horizontal">
-  <dt>General</dt>
-  <dd>This is the profile page of a channel. It typically displays information describing the channel. If the channel represents a person in a social network, for example, then the profile might provide contact information and other personal details about the person. Channels can have multiple profiles, where the displayed profile depends on the observer.</dd>
-  <dt><a href='#' onclick='contextualHelp1("#tabs-collapse-1", 0); return false;' title="Click to highlight element...">Channel Content Tabs</a></dt>
-  <dd>The channel content tabs are links to other content published by the channel. The <b>About</b> tab links to the channel profile. The <b>Photos</b> tab links to the channel photo galleries. The <b>Files</b> tab links to the general shared files published by the channel.</dd>
-</dl>
\ No newline at end of file
diff --git a/mod/help.php b/mod/help.php
index fb0339cd9..8c27156ab 100644
--- a/mod/help.php
+++ b/mod/help.php
@@ -88,9 +88,17 @@ function load_context_help() {
 	
 	$path = App::$cmd;
 	$args = App::$argv;
-
+	$lang = App::$language;
+        
+	if(! isset($lang) || !is_dir('doc/context/' . $lang . '/')) {
+                $lang = 'en';
+        }
 	while($path) {
-		$context_help = load_doc_file('doc/context/' . $path . '/help.html');
+		$context_help = load_doc_file('doc/context/' . $lang . '/' . $path . '/help.html');
+                if(!$context_help) {
+                  // Fallback to English if the translation is absent
+                  $context_help = load_doc_file('doc/context/en/' . $path . '/help.html');
+                }
 		if($context_help)
 			break;
 		array_pop($args);
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index de48ff74a..5f38f60f1 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1898,28 +1898,35 @@ nav .badge.mail-update:hover {
 
 /* contextual help */
 .help-content {
-	background: rgba(255, 255, 255, 0.9);
-	color: #333333;
-	position: fixed;
-	top: 50px;
-	left: -80%;
-	width: 80%;
-        height: 60%;
-	padding: 20px;
-	transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
-	box-sizing: border-box;
-	border: #CCC thin solid;
-        overflow: auto;
+  background: rgba(255, 255, 255, 0.9);
+  color: #333333;
+  position: fixed;
+  top: -1000px;
+  left: 0%;
+  right: 100%;
+  width: 100%;
+  height: auto;
+  padding: 20px;
+  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
+  box-sizing: border-box;
+  border: #CCC thin solid;
+  overflow: auto;
 }
 
 .help-content-open {
-	left: 0px;
-	-moz-box-shadow: 3px 3px 3px #ccc;
-	-webkit-box-shadow: 3px 3px 3px #ccc;
-	box-shadow: 3px 3px 3px #ccc;
+  top: 50px;
+  -moz-box-shadow: 3px 3px 3px #ccc;
+  -webkit-box-shadow: 3px 3px 3px #ccc;
+  box-shadow: 3px 3px 3px #ccc;
+}
+main {
+  top: auto;
+}
+main.help-content-open {
+  top: 200px;
 }
 
 .help-content dd {
-	margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 /* contextual help end */
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index b4cde6efc..ccc24d2b3 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -69,13 +69,48 @@ function makeFullScreen(full) {
 }
 
 /* contextual help */
-$(document).mouseup(function (e) {
-        var container = $("#help-content");
+$('.help-content').css('top', '-' + $('#help-content').height() + 'px')
+$(document).mouseup(function (e)
+{
+  e.preventDefault;
+
+  var container = $("#help-content");
+
+  if ((!container.is(e.target) // if the target of the click isn't the container...
+          && container.has(e.target).length === 0 // ... nor a descendant of the container
+          && container.hasClass('help-content-open'))
+          ||
+          (
+                  ($('#help_nav_btn').is(e.target) || $('#help_nav_btn').has(e.target).length !== 0)
+                  && container.hasClass('help-content-open')
+                  )) {
+    container.removeClass('help-content-open');
+    $('main').removeClass('help-content-open');
+    $('main').css('top', 'auto')
+  }
+  else if (($('#help_nav_btn').is(e.target) || $('#help_nav_btn').has(e.target).length !== 0)
+          && !container.hasClass('help-content-open')) {
+    $('#help-content').addClass('help-content-open');
+    $('main').removeClass('help-content-open');
+    var mainTop = $('#navbar-collapse-1').height();
+    if ($('#navbar-collapse-1').height() < $('#help-content').height()) {
+      mainTop = $('#help-content').height();
+    }
+
+    $('main').css('top', +mainTop + +50 + 'px');
+  }
 
-        if (!container.is(e.target) // if the target of the click isn't the container...
-                && container.has(e.target).length === 0 // ... nor a descendant of the container
-                && container.hasClass('help-content-open'))
-        {
-            container.removeClass('help-content-open');
-        }
 });
+
+var contextualHelpFocus = function (target, openSidePanel) {
+  if (openSidePanel) {
+    $("main").addClass('region_1-on');  // Open the side panel to highlight element 
+  } else {
+    $("main").removeClass('region_1-on');
+  }
+  // Animate the page scroll to the element and then pulse the element to direct attention
+  $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - $('#help-content').height() - 50}, 'slow');
+  for (i = 0; i < 3; i++) {
+    $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
+  }
+}
\ No newline at end of file
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 7f6c33c61..90d741e96 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -1,195 +1,202 @@
 <div class="container-fluid">
-	<div class="navbar-header">
-		<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="icon-circle-arrow-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="icon-circle-arrow-right" id="expand-aside-icon"></i>
-		</button>
-		{{if $nav.help}}
-		<button id="help-btn" type="button" class="navbar-toggle" title="{{$nav.help.3}}" onclick="$('#help-content').toggleClass('help-content-open');">
-			<i class="icon-question"></i>
-		</button>
-		{{/if}}
-		{{if $userinfo}}
-			<img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret" id="usermenu-caret"></span>
-			{{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}}
+		<div class="navbar-header">
+			<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="icon-circle-arrow-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="icon-circle-arrow-right" id="expand-aside-icon"></i>
+			</button>
+			{{if $userinfo}}
+				<img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret" id="usermenu-caret"></span>
+				{{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.lock}}
+						<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
+							<li role="presentation"><a href="{{$nav.lock.0}}" title="{{$nav.lock.3}}" role="menuitem">{{$nav.lock.3}}</a></li>
+						</ul>
 					{{/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.lock}}
-				<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
-					<li role="presentation"><a href="{{$nav.lock.0}}" title="{{$nav.lock.3}}" role="menuitem">{{$nav.lock.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.register}}<li class="{{$nav.register.2}}"><a href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a></li>{{/if}}
-		{{if !$userinfo}}
+		</div>
+		<div class="collapse navbar-collapse" id="navbar-collapse-1">
+			<ul class="nav navbar-nav navbar-left">
+			{{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>{{/if}}
+			{{if !$userinfo}}
 			{{if $nav.loginmenu}}
-			<li class="{{$nav.loginmenu.0.2}} hidden-xs">
-				<a data-toggle="dropdown" data-target="#" href="{{$nav.loginmenu.0.0}}" title="{{$nav.loginmenu.0.3}}" id="{{$nav.loginmenu.0.4}}">{{$nav.loginmenu.0.1}} <span class="caret" id="loginmenu-caret"></span></a>
-				<ul class="dropdown-menu" role="menu">
-					{{foreach $nav.loginmenu as $loginmenu}}
-					<li role="presentation"><a class="{{$loginmenu.2}}" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem" id="{{$loginmenu.4}}">{{$loginmenu.1}}</a></li>
-					{{/foreach}}
-				</ul>
-			</li>
-			{{foreach $nav.loginmenu as $loginmenu}}
-			<li role="presentation"><a class="{{$loginmenu.2}} visible-xs" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem">{{$loginmenu.1}}</a></li>
-			{{/foreach}}
+				<li class="{{$nav.loginmenu.0.2}} hidden-xs">
+					<a data-toggle="dropdown" data-target="#" href="{{$nav.loginmenu.0.0}}" title="{{$nav.loginmenu.0.3}}" id="{{$nav.loginmenu.0.4}}">{{$nav.loginmenu.0.1}} <span class="caret" id="loginmenu-caret"></span></a>
+					<ul class="dropdown-menu" role="menu">
+						{{foreach $nav.loginmenu as $loginmenu}}
+						<li role="presentation"><a class="{{$loginmenu.2}}" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem" id="{{$loginmenu.4}}">{{$loginmenu.1}}</a></li>
+						{{/foreach}}
+					</ul>
+				</li>
+				{{foreach $nav.loginmenu as $loginmenu}}
+				<li role="presentation"><a class="{{$loginmenu.2}} visible-xs" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem">{{$loginmenu.1}}</a></li>
+				{{/foreach}}
+			{{/if}}
+			{{/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>{{/if}}
+
+			{{if $nav.network}}
+				<li class="{{$sel.network}} hidden-xs">
+					<a href="{{$nav.network.0}}" title="{{$nav.network.3}}" id="{{$nav.network.4}}"><i class="icon-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="icon-th"></i></a>
+					<span class="net-update badge" rel="#nav-network-menu"></span>
+				</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="icon-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="icon-home"></i></a>
+					<span class="home-update badge" rel="#nav-home-menu"></span>
+				</li>
 			{{/if}}
-		{{/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>{{/if}}
-		{{if $nav.network}}
-			<li class="{{$sel.network}} hidden-xs">
-				<a href="{{$nav.network.0}}" title="{{$nav.network.3}}" id="{{$nav.network.4}}"><i class="icon-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="icon-th"></i></a>
-				<span class="net-update badge" rel="#nav-network-menu"></span>
-			</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="icon-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="icon-home"></i></a>
-				<span class="home-update badge" rel="#nav-home-menu"></span>
-			</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="icon-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="icon-envelope"></i></a>
-				<span class="mail-update badge" rel="#nav-messages-menu"></span>
-			</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="icon-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="icon-calendar"></i></a>
-				<span class="all_events-update badge" rel="#nav-all_events-menu"></span>
-			</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="icon-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="icon-user"></i></a>
-				<span class="intro-update badge" rel="#nav-intros-menu"></span>
-			</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="icon-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="icon-exclamation"></i></a>
-				<span class="notify-update badge" rel="#nav-notify-menu"></span>
-			</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="icon-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="icon-search"></i></a>
-			</li>
+
+
+			{{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="icon-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="icon-envelope"></i></a>
+					<span class="mail-update badge" rel="#nav-messages-menu"></span>
+				</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="icon-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="icon-calendar"></i></a>
+					<span class="all_events-update badge" rel="#nav-all_events-menu"></span>
+				</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="icon-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="icon-user"></i></a>
+					<span class="intro-update badge" rel="#nav-intros-menu"></span>
+				</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="icon-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="icon-exclamation"></i></a>
+					<span class="notify-update badge" rel="#nav-notify-menu"></span>
+				</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="icon-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="icon-search"></i></a>
+				</li>
+
 			{{if $powered_by}}
-			<div id="powered-by">{{$powered_by}}</div>
+				<div id="powered-by">{{$powered_by}}</div>
 			{{/if}}
 			{{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="icon-sitemap"></i></a>
-			</li>
+				<li class="{{$sel.directory}}">
+					<a class="{{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" id="{{$nav.directory.4}}"><i class="icon-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="icon-cogs"></i></a>
-			</li>
+				<li class="{{$sel.apps}}">
+					<a class="{{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" id="{{$nav.apps.4}}"><i class="icon-cogs"></i></a>
+				</li>
 			{{/if}}
+
 			{{if $nav.help}}
-			<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="$('#help-content').toggleClass('help-content-open'); return false;"><i class="icon-question"></i></a>
-			</li>
+				<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="return false;"><i class="icon-question"></i></a>
+				</li>
+                                
+			<div id="help-content" class="help-content">
+                            {{$nav.help.5}}
+                            <p class="pull-right"><a href="{{$nav.help.0}}">Click here for more documentation...</a></p>
+			</div>
 			{{/if}}
-		</ul>
-	</div>
-	<div id="help-content" class="help-content">
-		{{$nav.help.5}}
-		<p class="pull-right"><a href="{{$nav.help.0}}">Click here for more documentation...</a></p>
+			</ul>
+		</div>
 	</div>
-</div>