diff options
Diffstat (limited to 'view/tpl/nav.tpl')
| -rwxr-xr-x | view/tpl/nav.tpl | 106 |
1 files changed, 37 insertions, 69 deletions
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl index 886f73947..c0e17d6b5 100755 --- a/view/tpl/nav.tpl +++ b/view/tpl/nav.tpl @@ -1,45 +1,4 @@ -<script> - $(document).mouseup(function (e) - { - 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')) - { - container.removeClass('help-content-open'); - } - }); -</script> -<style> -.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; -} - -.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; -} - -.help-content dd { - margin-bottom: 1em; -} -</style> - -<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> @@ -47,13 +6,18 @@ <span class="icon-bar"></span> </button> <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="fa fa-arrow-circle-down" id="expand-tabs-icon"></i> </button> <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="fa fa-arrow-circle-right" id="expand-aside-icon"></i> + </button> + {{if $nav.help.6}} + <button id="context-help-btn"class="navbar-toggle" type="button" onclick="contextualHelp(); return false;"> + <i class="fa fa-question-circle"></i> </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> + <img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret dropdown-toggle fakelink" data-toggle="dropdown" id="usermenu-caret"></span> {{if $localuser}} <ul class="dropdown-menu" role="menu" aria-labelledby="avatar"> {{foreach $nav.usermenu as $usermenu}} @@ -109,7 +73,7 @@ {{if $nav.network}} <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> + <a href="{{$nav.network.0}}" title="{{$nav.network.3}}" id="{{$nav.network.4}}"><i class="fa fa-th"></i></a> <span class="net-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-network-menu"></span> <ul id="nav-network-menu" role="menu" class="dropdown-menu" rel="network"> {{* <li id="nav-network-see-all"><a href="{{$nav.network.all.0}}">{{$nav.network.all.1}}</a></li> *}} @@ -118,14 +82,14 @@ </ul> </li> <li class="{{$sel.network}} visible-xs"> - <a href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="icon-th"></i></a> + <a href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="fa fa-th"></i></a> <span class="net-update badge" rel="#nav-network-menu"></span> </li> {{/if}} {{if $nav.home}} <li class="{{$sel.home}} hidden-xs"> - <a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" id="{{$nav.home.4}}"><i class="icon-home"></i></a> + <a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" id="{{$nav.home.4}}"><i class="fa fa-home"></i></a> <span class="home-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-home-menu"></span> <ul id="nav-home-menu" class="dropdown-menu" rel="home"> {{* <li id="nav-home-see-all"><a href="{{$nav.home.all.0}}">{{$nav.home.all.1}}</a></li> *}} @@ -134,7 +98,7 @@ </ul> </li> <li class="{{$sel.home}} visible-xs"> - <a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="icon-home"></i></a> + <a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="fa fa-home"></i></a> <span class="home-update badge" rel="#nav-home-menu"></span> </li> {{/if}} @@ -142,7 +106,7 @@ {{if $nav.messages}} <li class="{{$sel.messages}} hidden-xs"> - <a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}"><i class="icon-envelope"></i></a> + <a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" id="{{$nav.messages.4}}"><i class="fa fa-envelope"></i></a> <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> @@ -151,14 +115,14 @@ </ul> </li> <li class="{{$sel.messages}} visible-xs"> - <a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="icon-envelope"></i></a> + <a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope"></i></a> <span class="mail-update badge" rel="#nav-messages-menu"></span> </li> {{/if}} {{if $nav.all_events}} <li class="{{$sel.all_events}} hidden-xs"> - <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> + <a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" id='{{$nav.all_events.4}}'><i class="fa fa-calendar"></i></a> <span class="all_events-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-all_events-menu"></span> <ul id="nav-all_events-menu" class="dropdown-menu" rel="all_events"> <li id="nav-all_events-see-all"><a href="{{$nav.all_events.all.0}}">{{$nav.all_events.all.1}}</a></li> @@ -167,14 +131,14 @@ </ul> </li> <li class="{{$sel.all_events}} visible-xs"> - <a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" ><i class="icon-calendar"></i></a> + <a class="{{$nav.all_events.2}}" href="{{$nav.all_events.0}}" title="{{$nav.all_events.3}}" ><i class="fa fa-calendar"></i></a> <span class="all_events-update badge" rel="#nav-all_events-menu"></span> </li> {{/if}} {{if $nav.intros}} <li class="{{$sel.intros}} hidden-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}}" id="{{$nav.intros.4}}"><i class="fa fa-user"></i></a> <span class="intro-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-intros-menu"></span> <ul id="nav-intros-menu" class="dropdown-menu" rel="intros"> <li id="nav-intros-see-all"><a href="{{$nav.intros.all.0}}">{{$nav.intros.all.1}}</a></li> @@ -182,14 +146,14 @@ </ul> </li> <li class="{{$sel.intros}} visible-xs"> - <a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" ><i class="icon-user"></i></a> + <a class="{{$nav.intros.2}}" href="{{$nav.intros.0}}" title="{{$nav.intros.3}}" ><i class="fa fa-user"></i></a> <span class="intro-update badge" rel="#nav-intros-menu"></span> </li> {{/if}} {{if $nav.notifications}} <li class="{{$sel.notifications}} hidden-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}}" id="{{$nav.notifications.4}}"><i class="fa fa-exclamation"></i></a> <span class="notify-update badge dropdown-toggle" data-toggle="dropdown" rel="#nav-notify-menu"></span> <ul id="nav-notify-menu" class="dropdown-menu" rel="notify"> <li id="nav-notify-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li> @@ -198,7 +162,7 @@ </ul> </li> <li class="{{$sel.notifications}} visible-xs"> - <a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}"><i class="icon-exclamation"></i></a> + <a href="{{$nav.notifications.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-exclamation"></i></a> <span class="notify-update badge" rel="#nav-notify-menu"></span> </li> {{/if}} @@ -206,11 +170,11 @@ <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=" {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();"/> + <div id="nav-search-spinner"></div><input class="fa-search" id="nav-search-text" type="text" value="" placeholder=" {{$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> + <a href="/search" title="{{$nav.search.3}}"><i class="fa fa-search"></i></a> </li> {{if $powered_by}} @@ -218,26 +182,30 @@ {{/if}} {{if $nav.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="fa fa-sitemap"></i></a> </li> {{/if}} {{if $nav.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="fa fa-cogs"></i></a> </li> {{/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="$('#help-content').toggleClass('help-content-open'); 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}}{{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="contextualHelp(); return false;"{{/if}}>{{if $nav.help.6}}<i class="fa fa-question-circle"></i>{{else}}<i class="fa fa-question"></i>{{/if}}</a> + </li> {{/if}} </ul> </div> </div> + {{if $nav.help.6}} + <div id="contextual-help-content" class="contextual-help-content"> + {{$nav.help.5}} + <div class="pull-right"> + <a class="contextual-help-tool" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-question"></i></a> + <a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-times"></i></a> + </div> + </div> + {{/if}} |