diff options
Diffstat (limited to 'view/theme')
| -rw-r--r-- | view/theme/redbasic/css/style.css | 41 | ||||
| -rw-r--r-- | view/theme/redbasic/js/redbasic.js | 51 |
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 |