harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Andrew Manning
2016-04-17 07:09:42 -04:00
parent ce582ccada
commit d7fe48d1b6
3 changed files with 254 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
view/theme/redbasic/css/style.css
View File

@@ -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 */

51
view/theme/redbasic/js/redbasic.js
View File

@@ -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);
}
}