New help panel that slides in from the top and pushes the content down so it is not covered. Panel toggles with help button. Still some bugs with small screen viewing.

view/theme/redbasic/css/style.css

@@ -1901,23 +1901,30 @@ nav .badge.mail-update:hover {
   background: rgba(255, 255, 255, 0.9);
   color: #333333;
   position: fixed;
-	top: 50px;
+  top: -1000px;
-	left: -80%;
+  left: 0%;
-	width: 80%;
+  right: 100%;
-        height: 60%;
+  width: 100%;
+  height: auto;
   padding: 20px;
-	transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
+  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;
+  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;

view/theme/redbasic/js/redbasic.js

@@ -69,13 +69,48 @@ function makeFullScreen(full) {
 }
 
 /* contextual help */
-$(document).mouseup(function (e) {
+$('.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...
+  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');
+  }
+
 });
+
+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);
+  }
+}

view/tpl/nav.tpl

@@ -11,11 +11,6 @@
 			<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}}
@@ -68,7 +63,9 @@
 				{{/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>
@@ -84,6 +81,7 @@
 					<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>
@@ -99,6 +97,8 @@
 					<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>
@@ -114,6 +114,7 @@
 					<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>
@@ -129,6 +130,7 @@
 					<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>
@@ -143,6 +145,7 @@
 					<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>
@@ -168,6 +171,7 @@
 				<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>
 			{{/if}}
@@ -176,20 +180,23 @@
 					<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>
 			{{/if}}
+
 			{{if $nav.help}}
-			<li class="{{$sel.help}} hidden-xs">
+				<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="$('#help-content').toggleClass('help-content-open'); return false;"><i class="icon-question"></i></a>
+                                  <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>
-			{{/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>
 			</div>
-</div>
+			{{/if}}
+			</ul>
+		</div>
+	</div>