diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/js/main.js | 26 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 28 | ||||
| -rwxr-xr-x | view/tpl/nav.tpl | 14 | ||||
| -rw-r--r-- | view/tpl/nav_header.tpl | 49 |
4 files changed, 47 insertions, 70 deletions
diff --git a/view/js/main.js b/view/js/main.js index 2813b3b19..748853939 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -443,6 +443,32 @@ function NavUpdate() { timer = setTimeout(NavUpdate, updateInterval); } +function contextualHelp() { + var container = $("#contextual-help-content"); + + if(container.hasClass('contextual-help-content-open')) { + container.removeClass('contextual-help-content-open'); + $('main').css('top', '') + } + else { + container.addClass('contextual-help-content-open'); + var mainTop = container.outerHeight(true); + $('main').css('top', mainTop + 'px'); + } +} + +function contextualHelpFocus(target, openSidePanel) { + if (openSidePanel) { + $("main").addClass('region_1-on'); // Open the side panel to highlight element + } + else { + $("main").removeClass('region_1-on'); + } + $('html,body').animate({ scrollTop: $(target).offset().top - $('nav').outerHeight(true) - $('#contextual-help-content').outerHeight(true)}, 'slow'); + for (i = 0; i < 3; i++) { + $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0); + } +} function updatePageItems(mode, data) { diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 5b8729111..bd5df5e63 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -201,29 +201,26 @@ header #banner #logo-text { } /* contextual help */ -.help-content { - background: $comment_item_colour; - color: $font_colour; +.contextual-help-content { + display: none; + +} + +.contextual-help-content-open { + display: block; position: fixed; - top: -50%; - left: 0px; - width: 100%; + top: 51px; max-height: 50%; + background: $comment_item_colour; padding: 20px; - /*transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);*/ - border-bottom: #CCC 1px solid; + border-bottom: #ccc 1px solid; overflow: auto; -} - -.help-content-open { - top: 51px; -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); box-shadow: 0px 3px 3px rgba(0,0,0,0.2); - /*transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);*/ } -.help-content dd { +.contextual-help-content dd { margin-bottom: 1em; } /* contextual help end */ @@ -1703,10 +1700,9 @@ nav .badge.mail-update:hover { #expand-aside, #expand-tabs, -#help_nav_btn_collapsed { +#context-help-btn { color: $nav_active_icon_colour; padding: 7px 10px; - text-decoration: none; } .nav-tabs.nav-justified { diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl index 2a6af3f6a..ca52fe066 100755 --- a/view/tpl/nav.tpl +++ b/view/tpl/nav.tpl @@ -12,9 +12,9 @@ <i class="icon-circle-arrow-right" id="expand-aside-icon"></i> </button> {{if $nav.help.6}} - <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}}> + <button id="context-help-btn"class="navbar-toggle" type="button" onclick="contextualHelp(); return false;"> <i class="icon-question-sign"></i> - </a> + </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> @@ -36,6 +36,10 @@ <li role="presentation" class="divider"></li> <li role="presentation"><a href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a></li> {{/if}} + {{if $nav.help}} + <li role="presentation" class="divider"></li> + <li role="presentation"><a href="{{$nav.help.0}}" title="{{$nav.help.3}}" role="menuitem" id="{{$nav.help.4}}">{{$nav.help.1}}</a></li> + {{/if}} {{if $nav.logout}} <li role="presentation" class="divider"></li> <li role="presentation"><a href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a></li> @@ -194,15 +198,15 @@ {{if $nav.help}} <li class="{{$sel.help}}{{if $nav.help.6}} hidden-xs{{/if}}"> - <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-question-sign"></i>{{else}}<i class="icon-question"></i>{{/if}}</a> + <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="contextualHelp(); return false;"{{/if}}>{{if $nav.help.6}}<i class="icon-question-sign"></i>{{else}}<i class="icon-question"></i>{{/if}}</a> </li> {{/if}} </ul> </div> </div> {{if $nav.help.6}} - <div id="help-content" class="help-content"> + <div id="contextual-help-content" class="contextual-help-content"> {{$nav.help.5}} - <p class="pull-right"><a href="{{$nav.help.0}}">Click here for more documentation...</a></p> + <button type="button" class="close pull-right" onclick="contextualHelp();">×</button> </div> {{/if}} diff --git a/view/tpl/nav_header.tpl b/view/tpl/nav_header.tpl deleted file mode 100644 index 27713b55b..000000000 --- a/view/tpl/nav_header.tpl +++ /dev/null @@ -1,49 +0,0 @@ -<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> |