2016-04-19 00:06:02 +00:00
{ { * we have modified the navmenu ( look at function frio_remote_nav ( ) ) to have remote links . $nav.userinfo is a new variable and replaces the original $userinfo variable * } }
{ { if $nav.userinfo } }
2016-04-03 12:06:13 +00:00
<header>
{ { * { { $langselector } } * } }
<div id="site-location"> { { $sitelocation } } </div>
<div id="banner" class="hidden-sm hidden-xs">
2016-04-19 00:06:02 +00:00
{ { * show on remote / visitor connections an other logo which symols that fact * } }
{ { if $nav.remote } }
<a href=" { { $baseurl } } "><div id="remote-logo-img"></div></a>
{ { else } }
2016-04-03 12:06:13 +00:00
<a href=" { { $baseurl } } "><div id="logo-img"></div></a>
2016-04-19 00:06:02 +00:00
{ { / if } }
2016-04-03 12:06:13 +00:00
</div>
</header>
2016-03-28 14:29:05 +00:00
<nav id="topbar-first" class="topbar">
<div class="container">
2016-04-03 12:06:13 +00:00
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"><!-- div for navbar width-->
2016-03-28 14:29:05 +00:00
<!-- Brand and toggle get grouped for better mobile display -->
2016-04-26 16:52:57 +00:00
<div class="topbar-nav" role=”navigation”>
2016-03-28 14:29:05 +00:00
{ { * Buttons for the mobile view * } }
2016-04-26 16:52:57 +00:00
<button role="menu" type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas" data-target="#myNavmenu">
2016-03-28 14:29:05 +00:00
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v"></i>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search" style="color:#FFF;"></i>
</button>
<button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside" >
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v"></i>
</button>
{ { * Left section of the NavBar with navigation shortcuts / icons * } }
2016-04-26 16:52:57 +00:00
<ul class="nav navbar-nav navbar-left" role="menubar">
<li id="nav-communication" class="nav-segment" role="presentation">
2016-03-28 14:29:05 +00:00
{ { if $nav.network } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-menu { { $sel.network } } " href=" { { $nav.network.0 } } " data-toggle="tooltip" title=" { { $nav.network.3 } } "><i class="fa fa-lg fa-th"></i><span id="net-update" class="nav-network-badge badge nav-notify"></span></a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.home } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-menu { { $sel.home } } " href=" { { $nav.home.0 } } " data-toggle="tooltip" title=" { { $nav.home.3 } } "><i class="fa fa-lg fa-home"></i><span id="home-update" class="nav-home-badge badge nav-notify"></span></a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.community } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-menu { { $sel.community } } " href=" { { $nav.community.0 } } " data-toggle="tooltip" title=" { { $nav.community.3 } } "><i class="fa fa-lg fa-bullseye"></i></a>
2016-03-28 14:29:05 +00:00
{ { / if } }
</li>
2016-04-26 16:52:57 +00:00
<li id="nav-personal" class="nav-segment hidden-xs" role="presentation">
2016-03-28 14:29:05 +00:00
{ { if $nav.messages } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" id="nav-messages-link" href=" { { $nav.messages.0 } } " data-toggle="tooltip" title=" { { $nav.messages.1 } } " class="nav-menu { { $sel.messages } } "><i class="fa fa-envelope fa-lg"></i><span id="mail-update" class="nav-mail-badge badge nav-notify"></span></a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.events } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" id="nav-events-link" href=" { { $nav.events.0 } } " data-toggle="tooltip" data-toggle="tooltip" title=" { { $nav.events.1 } } " class="nav-menu"><i class="fa fa-lg fa-calendar"></i></a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.contacts } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" id="nav-contacts-link" class="nav-menu { { $sel.contacts } } { { $nav.contacts.2 } } " href=" { { $nav.contacts.0 } } " data-toggle="tooltip" title=" { { $nav.contacts.1 } } " ><i class="fa fa-users fa-lg"></i></a>
<span id="intro-update" class="nav-intro-badge badge nav-notify" href="#" onclick="window.location.href = ' { { $nav.introductions.0 } } ' " data-toggle="tooltip" title=" { { $nav.introductions.3 } } "></span>
2016-03-28 14:29:05 +00:00
{ { / if } }
</li>
{ { * The notifications dropdown * } }
{ { if $nav.notifications } }
2016-04-26 16:52:57 +00:00
<li id="nav-notification" class="nav-segment hidden-xs" role="presentation">
<a role="menuitem" href=" { { $nav.notifications.0 } } " rel="#nav-notifications-menu" data-toggle="tooltip" data-toggle="tooltip" title=" { { $nav.notifications.1 } } " class="btn-link" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2016-03-28 14:29:05 +00:00
<i class="fa fa-exclamation-circle fa-lg"></i>
<span class="sr-only"> { { $nav.notifications.1 } } </span>
<span id="notify-update" class="nav-notify-badge badge nav-notify dropdown" data-toggle="dropdown"></span>
</a>
{ { * The notifications dropdown menu . There are two parts of menu . The second is at the bottom of this file . It is loaded via js . Look at nav - notifications - template * } }
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
{ { * the following list entry must have the id "nav-notificaionts-mark-all" . Without it this isn ' t visable . . . . . strange behavior : - / * } }
<li role="menuitem" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div>
{ { $nav.notifications.1 } }
<div class="dropdown-header-link">
2016-04-19 00:58:33 +00:00
<a href="#" onclick="notifyMarkAll(); return false;" data-toggle="tooltip" title=" { { $nav.notifications.mark.1 } } " class="">Mark as read { { * * * @ todo Translation * * * } } </a>
2016-03-28 14:29:05 +00:00
</div>
</li>
<li role="menuitem">
<p class="text-muted"><i> { { $emptynotifications } } </i></p>
</li>
</ul>
</li>
{ { / if } }
</ul>
</div>
{ { * This is the right part of the NavBar . It includes the search and the user menu * } }
<div class="topbar-actions pull-right">
<ul class="nav">
{ { * The search box * } }
{ { if $nav.search } }
<li id="search-box" class="hidden-xs">
<form class="navbar-form" role="search" method="get" action=" { { $nav.search.0 } } ">
2016-04-19 00:06:02 +00:00
<!-- <img class="hidden-xs" src=" { { $nav.userinfo.icon } } " alt=" { { $nav.userinfo.name } } " style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
2016-03-28 14:29:05 +00:00
<div class="form-group form-group-search">
2016-04-16 21:07:29 +00:00
<input id="nav-search-input-field" class="form-control form-search" type="text" name="search" placeholder="Search">
2016-03-28 14:29:05 +00:00
<button class="btn btn-default btn-sm form-button-search" type="submit">Search</button>
</div>
</form>
</li>
{ { / if } }
{ { * The user dropdown menu * } }
2016-04-19 00:06:02 +00:00
{ { if $nav.userinfo } }
2016-04-26 16:52:57 +00:00
<li role="menu" id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
2016-03-28 14:29:05 +00:00
<a href="#" id="main-menu" class="dropdown-toggle nav-avatar " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="user-title pull-left hidden-xs hidden-sm hidden-md">
2016-04-20 16:03:22 +00:00
<strong> { { $nav.userinfo.name } } </strong><br>
{ { if $nav.remote } } <span class="trunctate"> { { $nav.remote } } </span> { { / if } }
2016-03-28 14:29:05 +00:00
</div>
2016-04-19 00:06:02 +00:00
<img id="avatar" src=" { { $nav.userinfo.icon } } " alt=" { { $nav.userinfo.name } } ">
2016-03-28 14:29:05 +00:00
<span class="caret"></span>
</a>
{ { * The list of available usermenu links * } }
2016-04-26 16:52:57 +00:00
<ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="group" aria-labelledby="main-menu">
2016-04-20 16:03:22 +00:00
{ { if $nav.remote } } { { if $nav.sitename } }
<li id="nav-sitename" role="menuitem"> { { $nav.sitename } } </li>
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-04-20 16:03:22 +00:00
{ { / if } } { { / if } }
2016-03-28 14:29:05 +00:00
{ { foreach $nav.usermenu as $usermenu } }
<li role="menuitem"><a class=" { { $usermenu.2 } } " href=" { { $usermenu.0 } } " title=" { { $usermenu.3 } } "> { { $usermenu.1 } } </a></li>
{ { / foreach } }
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-03-28 14:29:05 +00:00
<li role="menuitem"><a href="https://github.com/rabuzarus/frio" target="new" title="frio on GitHub"><i class="fa fa-github"></i> frio on GitHub</a></li>
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-03-28 14:29:05 +00:00
{ { if $nav.notifications } }
<li role="menuitem"><a href=" { { $nav.notifications.0 } } " title=" { { $nav.notifications.1 } } "><i class="fa fa-exclamation-circle fa-fw"></i> { { $nav.notifications.1 } } </a></li>
{ { / if } }
{ { if $nav.messages } }
<li role="menuitem"><a class="nav-commlink { { $nav.messages.2 } } { { $sel.messages } } " href=" { { $nav.messages.0 } } " title=" { { $nav.messages.3 } } " ><i class="fa fa-envelope fa-fw"></i> { { $nav.messages.1 } } <span id="mail-update-li" class="nav-mail-badge badge nav-notify"></span></a></li>
{ { / if } }
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-03-28 14:29:05 +00:00
{ { if $nav.contacts } }
<li role="menuitem"><a id="nav-contacts-link" class="nav-link { { $nav.contacts.2 } } " href=" { { $nav.contacts.0 } } " title=" { { $nav.contacts.3 } } "><i class="fa fa-users fa-fw"></i> { { $nav.contacts.1 } } </a><span id="intro-update-li" class="nav-intro-badge badge nav-notify"></span></li>
{ { / if } }
{ { if $nav.manage } }
<li role="menuitem"><a id="nav-manage-link" class="nav-commlink { { $nav.manage.2 } } { { $sel.manage } } " href=" { { $nav.manage.0 } } " title=" { { $nav.manage.3 } } "><i class="fa fa-flag fa-fw"></i> { { $nav.manage.1 } } </a></li>
{ { / if } }
<li role="menuitem"><a id="nav-directory-link" class="nav-link { { $nav.directory.2 } } " href=" { { $nav.directory.0 } } " title=" { { $nav.directory.3 } } "><i class="fa fa-sitemap fa-fw"></i> { { $nav.directory.1 } } </a></li>
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-03-28 14:29:05 +00:00
{ { if $nav.apps } }
<li role="menuitem"><a id="nav-apps-link" class="nav-link { { $nav.apps.2 } } { { $sel.manage } } " href=" { { $nav.apps.0 } } " title=" { { $nav.apps.3 } } " ><i class="fa fa-puzzle-piece fa-fw"></i> { { $nav.apps.1 } } </a>
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-04-20 16:03:22 +00:00
{ { / if } }
2016-03-28 14:29:05 +00:00
{ { if $nav.help } }
<li role="menuitem"><a id="nav-help-link" class="nav-link { { $nav.help.2 } } " target="friendica-help" href=" { { $nav.help.0 } } " title=" { { $nav.help.3 } } " ><i class="fa fa-question-circle fa-fw"></i> { { $nav.help.3 } } </a></li>
{ { / if } }
{ { if $nav.settings } }
<li role="menuitem"><a id="nav-settings-link" class="nav-link { { $nav.settings.2 } } " href=" { { $nav.settings.0 } } " title=" { { $nav.settings.3 } } "><i class="fa fa-cog fa-fw"></i> { { $nav.settings.1 } } </a></li>
{ { / if } }
{ { if $nav.admin } }
<li role="menuitem"><a id="nav-admin-link" class="nav-link { { $nav.admin.2 } } " href=" { { $nav.admin.0 } } " title=" { { $nav.admin.3 } } " ><i class="fa fa-user-secret fa-fw"></i> { { $nav.admin.1 } } </a></li>
{ { / if } }
2016-04-26 16:52:57 +00:00
<li role="seperator" class="divider"></li>
2016-03-28 14:29:05 +00:00
{ { if $nav.logout } }
<li role="menuitem"><a id="nav-logout-link" class="nav-link { { $nav.logout.2 } } " href=" { { $nav.logout.0 } } " title=" { { $nav.logout.3 } } " ><i class="fa fa fa-sign-out fa-fw"></i> { { $nav.logout.1 } } </a></li>
2016-04-19 00:06:02 +00:00
{ { else } }
2016-03-28 14:29:05 +00:00
<li role="menuitem"><a id="nav-login-link" class="nav-login-link { { $nav.login.2 } } " href=" { { $nav.login.0 } } " title=" { { $nav.login.3 } } " ><i class="fa fa-power-off fa-fw"></i> { { $nav.login.1 } } </a></li>
{ { / if } }
</ul>
</li> { { * End of userinfo dropdown menu * } }
{ { / if } }
<!-- Language selector, I do not find it relevant, activate if necessary.
<li> { { $langselector } } </li>
-->
</ul>
</div> { { * End of right navbar * } }
{ { * The usermenu dropdown for the mobile view . It is called via the buttons . Have a look at the top of this file * } }
<div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
<div class="nav-container">
<div class="list-group">
2016-04-20 16:03:22 +00:00
{ { if $nav.remote } } { { if $nav.sitename } }
2016-04-26 16:52:57 +00:00
<li role="menuitem" class="nav-sitename list-group-item" role="menuitem"> { { $nav.sitename } } </li>
2016-04-20 16:03:22 +00:00
{ { / if } } { { / if } }
2016-04-26 16:52:57 +00:00
<li role="menuitem" class="list-group-item"><img src=" { { $nav.userinfo.icon } } " alt=" { { $nav.userinfo.name } } " style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;"> { { $nav.userinfo.name } } { { if $nav.remote } } ( { { $nav.remote } } ) { { / if } } </li>
2016-03-28 14:29:05 +00:00
{ { foreach $nav.usermenu as $usermenu } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class=" { { $usermenu.2 } } list-group-item" href=" { { $usermenu.0 } } " title=" { { $usermenu.3 } } "> { { $usermenu.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / foreach } }
{ { if $nav.notifications } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" href=" { { $nav.notifications.0 } } " title=" { { $nav.notifications.1 } } " class="list-group-item"><i class="fa fa-exclamation-circle fa-fw"></i> { { $nav.notifications.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.contacts } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-link { { $nav.contacts.2 } } list-group-item" href=" { { $nav.contacts.0 } } " title=" { { $nav.contacts.3 } } "><i class="fa fa-users fa-fw"></i> { { $nav.contacts.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.messages } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-link { { $nav.messages.2 } } { { $sel.messages } } list-group-item" href=" { { $nav.messages.0 } } " title=" { { $nav.messages.3 } } " ><i class="fa fa-envelope fa-fw"></i> { { $nav.messages.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.manage } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-commlink { { $nav.manage.2 } } { { $sel.manage } } list-group-item" href=" { { $nav.manage.0 } } " title=" { { $nav.manage.3 } } "><i class="fa fa-flag fa-fw"></i> { { $nav.manage.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.settings } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-link { { $nav.settings.2 } } list-group-item" href=" { { $nav.settings.0 } } " title=" { { $nav.settings.3 } } "><i class="fa fa-cog fa-fw"></i> { { $nav.settings.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.admin } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-link { { $nav.admin.2 } } list-group-item" href=" { { $nav.admin.0 } } " title=" { { $nav.admin.3 } } " ><i class="fa fa-user-secret fa-fw"></i> { { $nav.admin.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
{ { if $nav.logout } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-link { { $nav.logout.2 } } list-group-item" href=" { { $nav.logout.0 } } " title=" { { $nav.logout.3 } } " ><i class="fa fa fa-sign-out fa-fw"></i> { { $nav.logout.1 } } </a>
2016-04-19 00:06:02 +00:00
{ { else } }
2016-04-26 16:52:57 +00:00
<a role="menuitem" class="nav-login-link { { $nav.login.2 } } list-group-item" href=" { { $nav.login.0 } } " title=" { { $nav.login.3 } } " ><i class="fa fa-power-off fa-fw"></i> { { $nav.login.1 } } </a>
2016-03-28 14:29:05 +00:00
{ { / if } }
</div>
</div>
</div><!--/.sidebar-offcanvas-->
</div><!-- end of div for navbar width-->
</div><!-- /.container -->
</nav><!-- /.navbar -->
{ { / if } }
{ { * The navbar for users which are not logged in * } }
2016-04-19 00:06:02 +00:00
{ { if $nav.userinfo = = '' } }
2016-03-28 14:29:05 +00:00
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
2016-04-19 00:06:02 +00:00
<a class="navbar-brand" href="#"><div id="navbrand-container">
<div id="logo-img"></div>
<div id="navbar-brand-text"> Friendica</div></div>
2016-03-28 14:29:05 +00:00
</a>
</div>
<div class="hidden-sm hidden-xs">
<ul class="nav navbar-nav navbar-right">
2016-04-19 00:58:33 +00:00
<li><a href="register" data-toggle="tooltip" title=" { { $register.title } } "><i class="fa fa-street-view fa-fw"></i> { { $register.desc } } </a></li>
<li><a href="login?mode=modal" data-toggle="tooltip" title=" { { $login } } "><i class="fa fa-sign-in fa-fw"></i> { { $login } } </a></li>
2016-03-28 14:29:05 +00:00
</ul>
</div>
</div>
</nav>
{ { / if } }
{ { * The second navbar which contains nav points of the actual page - ( nav points are actual handled by this theme throug js * } }
<div id="topbar-second" class="topbar">
<div class="container">
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs"></div>
<div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
2016-04-03 12:06:13 +00:00
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
2016-03-28 14:29:05 +00:00
</div>
</div>
{ { * The second part of the notifications dropdown menu . It handles the notifications * } }
{ { if $nav.notifications } }
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template"> <!-- needs further investigation. I thought the notifications have their own templates -->
<li class=" { 4 } notif-entry" onclick="location.href=' { 0 } ';">
<div class="notif-entry-wrapper media">
<div class="notif-photo-wrapper media-object pull-left"><a href=" { 6 } "><img data-src=" { 1 } "></a></div>
<div class="notif-desc-wrapper media-body">
{ 8 } { 7 }
2016-04-19 00:58:33 +00:00
<div><time class="notif-when time" data-toggle="tooltip" title=" { 5 } "> { 3 } </time></div>
2016-03-28 14:29:05 +00:00
</div>
</div>
</li>
</ul>
{ { / if } }