diff options
Diffstat (limited to 'view/tpl')
| -rwxr-xr-x | view/tpl/admin_site.tpl | 1 | ||||
| -rwxr-xr-x | view/tpl/nav.tpl | 22 | ||||
| -rw-r--r-- | view/tpl/nav_header.tpl | 49 |
3 files changed, 63 insertions, 9 deletions
diff --git a/view/tpl/admin_site.tpl b/view/tpl/admin_site.tpl index 54f625e0b..6b8729ee6 100755 --- a/view/tpl/admin_site.tpl +++ b/view/tpl/admin_site.tpl @@ -49,6 +49,7 @@ {{include file="field_input.tpl" field=$frontpage}} {{include file="field_checkbox.tpl" field=$mirror_frontpage}} {{include file="field_checkbox.tpl" field=$login_on_homepage}} + {{include file="field_checkbox.tpl" field=$enable_context_help}} {{if $directory_server}} {{include file="field_select.tpl" field=$directory_server}} {{/if}} diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl index 90d741e96..1c7f8f5b2 100755 --- a/view/tpl/nav.tpl +++ b/view/tpl/nav.tpl @@ -1,4 +1,4 @@ -<div class="container-fluid"> + <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> @@ -11,6 +11,9 @@ <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> + <a class="navbar-toggle" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}_collapsed"{{if $nav.help.6}} onclick="return false;"{{/if}}> + {{if $nav.help.6}}<i class="icon-caret-down"></i> {{/if}}<i class="icon-question"></i> + </a> {{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}} @@ -188,15 +191,16 @@ {{/if}} {{if $nav.help}} - <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> + <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}}"{{if $nav.help.6}} onclick="return false;"{{/if}}>{{if $nav.help.6}}<i class="icon-caret-down"></i> {{/if}}<i class="icon-question"></i></a> + </li> {{/if}} </ul> </div> </div> + {{if $nav.help.6}} + <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}} diff --git a/view/tpl/nav_header.tpl b/view/tpl/nav_header.tpl new file mode 100644 index 000000000..27713b55b --- /dev/null +++ b/view/tpl/nav_header.tpl @@ -0,0 +1,49 @@ +<script> + /* contextual help */ + {{if $enable_context_help}} + $('.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, #help_nav_btn_collapsed').is(e.target) || $('#help_nav_btn, #help_nav_btn_collapsed').has(e.target).length !== 0) + && container.hasClass('help-content-open') + )) { + container.removeClass('help-content-open'); + $('main').removeClass('help-content-open'); + $('main').css('top', '') + } + else if (($('#help_nav_btn, #help_nav_btn_collapsed').is(e.target) || $('#help_nav_btn, #help_nav_btn_collapsed').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').outerHeight(true) < $('#help-content').height()) { + mainTop = $('#help-content').outerHeight(true); + } + + $('main').css('top', mainTop + 'px'); + } + + }); + {{/if}} + 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); + } + } +</script> |