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.

2 files changed, 67 insertions, 25 deletions

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