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.

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

View File

@ -1898,28 +1898,35 @@ nav .badge.mail-update:hover {
/* contextual help */ /* contextual help */
.help-content { .help-content {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
color: #333333; color: #333333;
position: fixed; position: fixed;
top: 50px; top: -1000px;
left: -80%; left: 0%;
width: 80%; right: 100%;
height: 60%; width: 100%;
padding: 20px; height: auto;
transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); padding: 20px;
box-sizing: border-box; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
border: #CCC thin solid; box-sizing: border-box;
overflow: auto; border: #CCC thin solid;
overflow: auto;
} }
.help-content-open { .help-content-open {
left: 0px; top: 50px;
-moz-box-shadow: 3px 3px 3px #ccc; -moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc; -webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc; box-shadow: 3px 3px 3px #ccc;
}
main {
top: auto;
}
main.help-content-open {
top: 200px;
} }
.help-content dd { .help-content dd {
margin-bottom: 1em; margin-bottom: 1em;
} }
/* contextual help end */ /* contextual help end */

View File

@ -69,13 +69,48 @@ function makeFullScreen(full) {
} }
/* contextual help */ /* contextual help */
$(document).mouseup(function (e) { $('.help-content').css('top', '-' + $('#help-content').height() + 'px')
var container = $("#help-content"); $(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);
}
}

View File

@ -1,195 +1,202 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<button id="expand-tabs" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tabs-collapse-1"> <button id="expand-tabs" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tabs-collapse-1">
<i class="icon-circle-arrow-down" id="expand-tabs-icon"></i> <i class="icon-circle-arrow-down" id="expand-tabs-icon"></i>
</button> </button>
<button id="expand-aside" type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#region_1"> <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> <i class="icon-circle-arrow-right" id="expand-aside-icon"></i>
</button> </button>
{{if $nav.help}} {{if $userinfo}}
<button id="help-btn" type="button" class="navbar-toggle" title="{{$nav.help.3}}" onclick="$('#help-content').toggleClass('help-content-open');"> <img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret" id="usermenu-caret"></span>
<i class="icon-question"></i> {{if $localuser}}
</button> <ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
{{/if}} {{foreach $nav.usermenu as $usermenu}}
{{if $userinfo}} <li role="presentation"><a href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a></li>
<img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret" id="usermenu-caret"></span> {{/foreach}}
{{if $localuser}} <li role="presentation" class="divider"></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="avatar"> {{if $nav.profiles}}<li role="presentation"><a href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a></li>{{/if}}
{{foreach $nav.usermenu as $usermenu}} {{if $nav.settings}}<li role="presentation"><a href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a></li>{{/if}}
<li role="presentation"><a href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a></li> {{if $nav.manage}}<li role="presentation"><a href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a></li>{{/if}}
{{/foreach}} {{if $nav.channels}}
<li role="presentation" class="divider"></li> {{foreach $nav.channels as $chan}}
{{if $nav.profiles}}<li role="presentation"><a href="{{$nav.profiles.0}}" title="{{$nav.profiles.3}}" role="menuitem" id="{{$nav.profiles.4}}">{{$nav.profiles.1}}</a></li>{{/if}} <li role="presentation" class="nav-channel-select"><a href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem">{{$chan.channel_name}}</a></li>
{{if $nav.settings}}<li role="presentation"><a href="{{$nav.settings.0}}" title="{{$nav.settings.3}}" role="menuitem" id="{{$nav.settings.4}}">{{$nav.settings.1}}</a></li>{{/if}} {{/foreach}}
{{if $nav.manage}}<li role="presentation"><a href="{{$nav.manage.0}}" title="{{$nav.manage.3}}" role="menuitem" id="{{$nav.manage.4}}">{{$nav.manage.1}}</a></li>{{/if}} {{/if}}
{{if $nav.channels}} {{if $nav.admin}}
{{foreach $nav.channels as $chan}} <li role="presentation" class="divider"></li>
<li role="presentation" class="nav-channel-select"><a href="manage/{{$chan.channel_id}}" title="{{$chan.channel_name}}" role="menuitem">{{$chan.channel_name}}</a></li> <li role="presentation"><a href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a></li>
{{/foreach}} {{/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>
{{/if}}
</ul>
{{else}}
{{if $nav.lock}}
<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
<li role="presentation"><a href="{{$nav.lock.0}}" title="{{$nav.lock.3}}" role="menuitem">{{$nav.lock.3}}</a></li>
</ul>
{{/if}} {{/if}}
{{if $nav.admin}}
<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.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>
{{/if}}
</ul>
{{else}}
{{if $nav.lock}}
<ul class="dropdown-menu" role="menu" aria-labelledby="avatar">
<li role="presentation"><a href="{{$nav.lock.0}}" title="{{$nav.lock.3}}" role="menuitem">{{$nav.lock.3}}</a></li>
</ul>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{/if}} </div>
</div> <div class="collapse navbar-collapse" id="navbar-collapse-1">
<div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-left">
<ul class="nav navbar-nav navbar-left"> {{if $nav.register}}<li class="{{$nav.register.2}}"><a href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a></li>{{/if}}
{{if $nav.register}}<li class="{{$nav.register.2}}"><a href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a></li>{{/if}} {{if !$userinfo}}
{{if !$userinfo}}
{{if $nav.loginmenu}} {{if $nav.loginmenu}}
<li class="{{$nav.loginmenu.0.2}} hidden-xs"> <li class="{{$nav.loginmenu.0.2}} hidden-xs">
<a data-toggle="dropdown" data-target="#" href="{{$nav.loginmenu.0.0}}" title="{{$nav.loginmenu.0.3}}" id="{{$nav.loginmenu.0.4}}">{{$nav.loginmenu.0.1}} <span class="caret" id="loginmenu-caret"></span></a> <a data-toggle="dropdown" data-target="#" href="{{$nav.loginmenu.0.0}}" title="{{$nav.loginmenu.0.3}}" id="{{$nav.loginmenu.0.4}}">{{$nav.loginmenu.0.1}} <span class="caret" id="loginmenu-caret"></span></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
{{foreach $nav.loginmenu as $loginmenu}} {{foreach $nav.loginmenu as $loginmenu}}
<li role="presentation"><a class="{{$loginmenu.2}}" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem" id="{{$loginmenu.4}}">{{$loginmenu.1}}</a></li> <li role="presentation"><a class="{{$loginmenu.2}}" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem" id="{{$loginmenu.4}}">{{$loginmenu.1}}</a></li>
{{/foreach}} {{/foreach}}
</ul> </ul>
</li> </li>
{{foreach $nav.loginmenu as $loginmenu}} {{foreach $nav.loginmenu as $loginmenu}}
<li role="presentation"><a class="{{$loginmenu.2}} visible-xs" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem">{{$loginmenu.1}}</a></li> <li role="presentation"><a class="{{$loginmenu.2}} visible-xs" href="{{$loginmenu.0}}" title="{{$loginmenu.3}}" role="menuitem">{{$loginmenu.1}}</a></li>
{{/foreach}} {{/foreach}}
{{/if}} {{/if}}
{{/if}} {{/if}}
{{if $nav.alogout}}<li class="{{$nav}}-alogout.2"><a href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a></li>{{/if}}
{{if $nav.network}} {{if $nav.alogout}}<li class="{{$nav}}-alogout.2"><a href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a></li>{{/if}}
<li class="{{$sel.network}} hidden-xs">
<a href="{{$nav.network.0}}" title="{{$nav.network.3}}" id="{{$nav.network.4}}"><i class="icon-th"></i></a> {{if $nav.network}}
<span class="net-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-network-menu"></span> <li class="{{$sel.network}} hidden-xs">
<ul id="nav-network-menu" role="menu" class="dropdown-menu" rel="network"> <a href="{{$nav.network.0}}" title="{{$nav.network.3}}" id="{{$nav.network.4}}"><i class="icon-th"></i></a>
{{* <li id="nav-network-see-all"><a href="{{$nav.network.all.0}}">{{$nav.network.all.1}}</a></li> *}} <span class="net-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-network-menu"></span>
<li id="nav-network-mark-all"><a href="#" onclick="markRead('network'); return false;">{{$nav.network.mark.1}}</a></li> <ul id="nav-network-menu" role="menu" class="dropdown-menu" rel="network">
<li class="empty">{{$emptynotifications}}</li> {{* <li id="nav-network-see-all"><a href="{{$nav.network.all.0}}">{{$nav.network.all.1}}</a></li> *}}
</ul> <li id="nav-network-mark-all"><a href="#" onclick="markRead('network'); return false;">{{$nav.network.mark.1}}</a></li>
</li> <li class="empty">{{$emptynotifications}}</li>
<li class="{{$sel.network}} visible-xs"> </ul>
<a href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="icon-th"></i></a> </li>
<span class="net-update badge" rel="#nav-network-menu"></span> <li class="{{$sel.network}} visible-xs">
</li> <a href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="icon-th"></i></a>
{{/if}} <span class="net-update badge" rel="#nav-network-menu"></span>
{{if $nav.home}} </li>
<li class="{{$sel.home}} hidden-xs"> {{/if}}
<a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" id="{{$nav.home.4}}"><i class="icon-home"></i></a>
<span class="home-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-home-menu"></span> {{if $nav.home}}
<ul id="nav-home-menu" class="dropdown-menu" rel="home"> <li class="{{$sel.home}} hidden-xs">
{{* <li id="nav-home-see-all"><a href="{{$nav.home.all.0}}">{{$nav.home.all.1}}</a></li> *}} <a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" id="{{$nav.home.4}}"><i class="icon-home"></i></a>
<li id="nav-home-mark-all"><a href="#" onclick="markRead('home'); return false;">{{$nav.home.mark.1}}</a></li> <span class="home-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-home-menu"></span>
<li class="empty">{{$emptynotifications}}</li> <ul id="nav-home-menu" class="dropdown-menu" rel="home">
</ul> {{* <li id="nav-home-see-all"><a href="{{$nav.home.all.0}}">{{$nav.home.all.1}}</a></li> *}}
</li> <li id="nav-home-mark-all"><a href="#" onclick="markRead('home'); return false;">{{$nav.home.mark.1}}</a></li>
<li class="{{$sel.home}} visible-xs"> <li class="empty">{{$emptynotifications}}</li>
<a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="icon-home"></i></a> </ul>
<span class="home-update badge" rel="#nav-home-menu"></span> </li>
</li> <li class="{{$sel.home}} visible-xs">
{{/if}} <a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="icon-home"></i></a>
{{if $nav.messages}} <span class="home-update badge" rel="#nav-home-menu"></span>
<li class="{{$sel.messages}} hidden-xs"> </li>
<a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}"><i class="icon-envelope"></i></a> {{/if}}
<span class="mail-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-messages-menu"></span>
<ul id="nav-messages-menu" class="dropdown-menu" rel="messages">
<li id="nav-messages-see-all"><a href="{{$nav.messages.all.0}}">{{$nav.messages.all.1}}</a></li> {{if $nav.messages}}
<li id="nav-messages-mark-all"><a href="#" onclick="markRead('messages'); return false;">{{$nav.messages.mark.1}}</a></li> <li class="{{$sel.messages}} hidden-xs">
<li class="empty">{{$emptynotifications}}</li> <a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}"><i class="icon-envelope"></i></a>
</ul> <span class="mail-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-messages-menu"></span>
</li> <ul id="nav-messages-menu" class="dropdown-menu" rel="messages">
<li class="{{$sel.messages}} visible-xs"> <li id="nav-messages-see-all"><a href="{{$nav.messages.all.0}}">{{$nav.messages.all.1}}</a></li>
<a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="icon-envelope"></i></a> <li id="nav-messages-mark-all"><a href="#" onclick="markRead('messages'); return false;">{{$nav.messages.mark.1}}</a></li>
<span class="mail-update badge" rel="#nav-messages-menu"></span> <li class="empty">{{$emptynotifications}}</li>
</li> </ul>
{{/if}} </li>
{{if $nav.all_events}} <li class="{{$sel.messages}} visible-xs">
<li class="{{$sel.all_events}} hidden-xs"> <a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="icon-envelope"></i></a>
<a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" id='{{$nav.all_events.4}}'><i class="icon-calendar"></i></a> <span class="mail-update badge" rel="#nav-messages-menu"></span>
<span class="all_events-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-all_events-menu"></span> </li>
<ul id="nav-all_events-menu" class="dropdown-menu" rel="all_events"> {{/if}}
<li id="nav-all_events-see-all"><a href="{{$nav.all_events.all.0}}">{{$nav.all_events.all.1}}</a></li>
<li id="nav-all_events-mark-all"><a href="#" onclick="markRead('all_events'); return false;">{{$nav.all_events.mark.1}}</a></li> {{if $nav.all_events}}
<li class="empty">{{$emptynotifications}}</li> <li class="{{$sel.all_events}} hidden-xs">
</ul> <a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" id='{{$nav.all_events.4}}'><i class="icon-calendar"></i></a>
</li> <span class="all_events-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-all_events-menu"></span>
<li class="{{$sel.all_events}} visible-xs"> <ul id="nav-all_events-menu" class="dropdown-menu" rel="all_events">
<a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" ><i class="icon-calendar"></i></a> <li id="nav-all_events-see-all"><a href="{{$nav.all_events.all.0}}">{{$nav.all_events.all.1}}</a></li>
<span class="all_events-update badge" rel="#nav-all_events-menu"></span> <li id="nav-all_events-mark-all"><a href="#" onclick="markRead('all_events'); return false;">{{$nav.all_events.mark.1}}</a></li>
</li> <li class="empty">{{$emptynotifications}}</li>
{{/if}} </ul>
{{if $nav.intros}} </li>
<li class="{{$sel.intros}} hidden-xs"> <li class="{{$sel.all_events}} visible-xs">
<a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" id="{{$nav.intros.4}}"><i class="icon-user"></i></a> <a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" ><i class="icon-calendar"></i></a>
<span class="intro-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-intros-menu"></span> <span class="all_events-update badge" rel="#nav-all_events-menu"></span>
<ul id="nav-intros-menu" class="dropdown-menu" rel="intros"> </li>
<li id="nav-intros-see-all"><a href="{{$nav.intros.all.0}}">{{$nav.intros.all.1}}</a></li> {{/if}}
<li class="empty">{{$emptynotifications}}</li>
</ul> {{if $nav.intros}}
</li> <li class="{{$sel.intros}} hidden-xs">
<li class="{{$sel.intros}} visible-xs"> <a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" id="{{$nav.intros.4}}"><i class="icon-user"></i></a>
<a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" ><i class="icon-user"></i></a> <span class="intro-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-intros-menu"></span>
<span class="intro-update badge" rel="#nav-intros-menu"></span> <ul id="nav-intros-menu" class="dropdown-menu" rel="intros">
</li> <li id="nav-intros-see-all"><a href="{{$nav.intros.all.0}}">{{$nav.intros.all.1}}</a></li>
{{/if}} <li class="empty">{{$emptynotifications}}</li>
{{if $nav.notifications}} </ul>
<li class="{{$sel.notifications}} hidden-xs"> </li>
<a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}" id="{{$nav.notifications.4}}"><i class="icon-exclamation"></i></a> <li class="{{$sel.intros}} visible-xs">
<span class="notify-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-notify-menu"></span> <a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" ><i class="icon-user"></i></a>
<ul id="nav-notify-menu" class="dropdown-menu" rel="notify"> <span class="intro-update badge" rel="#nav-intros-menu"></span>
<li id="nav-notify-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li> </li>
<li id="nav-notify-mark-all"><a href="#" onclick="markRead('notify'); return false;">{{$nav.notifications.mark.1}}</a></li> {{/if}}
<li class="empty">{{$emptynotifications}}</li>
</ul> {{if $nav.notifications}}
</li> <li class="{{$sel.notifications}} hidden-xs">
<li class="{{$sel.notifications}} visible-xs"> <a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}" id="{{$nav.notifications.4}}"><i class="icon-exclamation"></i></a>
<a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}"><i class="icon-exclamation"></i></a> <span class="notify-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-notify-menu"></span>
<span class="notify-update badge" rel="#nav-notify-menu"></span> <ul id="nav-notify-menu" class="dropdown-menu" rel="notify">
</li> <li id="nav-notify-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li>
{{/if}} <li id="nav-notify-mark-all"><a href="#" onclick="markRead('notify'); return false;">{{$nav.notifications.mark.1}}</a></li>
</ul> <li class="empty">{{$emptynotifications}}</li>
<ul class="nav navbar-nav navbar-right"> </ul>
<li class="hidden-xs"> </li>
<form method="get" action="search" role="search"> <li class="{{$sel.notifications}} visible-xs">
<div id="nav-search-spinner"></div><input class="icon-search" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();"/> <a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}"><i class="icon-exclamation"></i></a>
</form> <span class="notify-update badge" rel="#nav-notify-menu"></span>
</li> </li>
<li class="visible-xs"> {{/if}}
<a href="/search" title="{{$nav.search.3}}"><i class="icon-search"></i></a> </ul>
</li> <ul class="nav navbar-nav navbar-right">
<li class="hidden-xs">
<form method="get" action="search" role="search">
<div id="nav-search-spinner"></div><input class="icon-search" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();"/>
</form>
</li>
<li class="visible-xs">
<a href="/search" title="{{$nav.search.3}}"><i class="icon-search"></i></a>
</li>
{{if $powered_by}} {{if $powered_by}}
<div id="powered-by">{{$powered_by}}</div> <div id="powered-by">{{$powered_by}}</div>
{{/if}} {{/if}}
{{if $nav.directory}} {{if $nav.directory}}
<li class="{{$sel.directory}}"> <li class="{{$sel.directory}}">
<a class="{{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" id="{{$nav.directory.4}}"><i class="icon-sitemap"></i></a> <a class="{{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" id="{{$nav.directory.4}}"><i class="icon-sitemap"></i></a>
</li> </li>
{{/if}} {{/if}}
{{if $nav.apps}} {{if $nav.apps}}
<li class="{{$sel.apps}}"> <li class="{{$sel.apps}}">
<a class="{{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" id="{{$nav.apps.4}}"><i class="icon-cogs"></i></a> <a class="{{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" id="{{$nav.apps.4}}"><i class="icon-cogs"></i></a>
</li> </li>
{{/if}} {{/if}}
{{if $nav.help}} {{if $nav.help}}
<li class="{{$sel.help}} hidden-xs"> <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="$('#help-content').toggleClass('help-content-open'); return false;"><i class="icon-question"></i></a> <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> </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>
{{/if}} {{/if}}
</ul> </ul>
</div>
</div> </div>
<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>
</div>