templates/nav.tpl

   1 {{* 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 *}}
   2 {{if $nav.userinfo}}
   3 <header>
   4         {{* {{$langselector}} *}}
   5
   6         <div id="site-location">{{$sitelocation}}</div>
   7         <div id="banner" class="hidden-sm hidden-xs">
   8                 {{* show on remote/visitor connections an other logo which symols that fact*}}
   9                 {{if $nav.remote}}
  10                 <a href="{{$baseurl}}"><div id="remote-logo-img"></div></a>
  11                 {{else}}
  12                 <a href="{{$baseurl}}"><div id="logo-img"></div></a>
  13                 {{/if}}
  14         </div>
  15 </header>
  16 <nav id="topbar-first" class="topbar">
  17         <div class="container">
  18                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"><!-- div for navbar width-->
  19                         <!-- Brand and toggle get grouped for better mobile display -->
  20                         <div class="topbar-nav">
  21
  22                                 {{* Buttons for the mobile view *}}
  23                                 <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas" data-target="#myNavmenu">
  24                                         <span class="sr-only">Toggle navigation</span>
  25                                         <i class="fa fa-ellipsis-v"></i>
  26                                 </button>
  27                                 <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  28                                         <span class="sr-only">Toggle Search</span>
  29                                         <i class="fa fa-search" style="color:#FFF;"></i>
  30                                 </button>
  31                                 <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside"  >
  32                                         <span class="sr-only">Toggle navigation</span>
  33                                         <i class="fa fa-ellipsis-v"></i>
  34                                 </button>
  35
  36                                 {{* Left section of the NavBar with navigation shortcuts/icons *}}
  37                                 <ul class="nav navbar-nav navbar-left">
  38                                         <li id="nav-communication" class="nav-segment">
  39                                                 {{if $nav.network}}
  40                                                 <a 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>
  41                                                 {{/if}}
  42
  43                                                 {{if $nav.home}}
  44                                                 <a 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>
  45                                                 {{/if}}
  46
  47                                                 {{if $nav.community}}
  48                                                 <a 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>
  49                                                 {{/if}}
  50                                         </li>
  51
  52                                         <li id="nav-personal" class="nav-segment hidden-xs">
  53                                                 {{if $nav.messages}}
  54                                                 <a 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>
  55                                                 {{/if}}
  56
  57                                                 {{if $nav.events}}
  58                                                 <a 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>
  59                                                 {{/if}}
  60
  61                                                 {{if $nav.contacts}}
  62                                                         <a 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>
  63                                                         <span id="intro-update" class="nav-intro-badge badge nav-notify" onclick="window.location.href = '{{$nav.introductions.0}}' " data-toggle="tooltip" title="{{$nav.introductions.3}}"></span>
  64                                                 {{/if}}
  65                                         </li>
  66
  67                                         {{* The notifications dropdown *}}
  68                                         {{if $nav.notifications}}
  69                                                 <li id="nav-notification" class="nav-segment hidden-xs">
  70                                                         <a 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">
  71                                                                 <i class="fa fa-exclamation-circle fa-lg"></i>
  72                                                                 <span class="sr-only">{{$nav.notifications.1}}</span>
  73                                                                 <span id="notify-update" class="nav-notify-badge badge nav-notify dropdown" data-toggle="dropdown"></span>
  74                                                         </a>
  75
  76                                                         {{* 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 *}}
  77                                                         <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
  78
  79                                                                 {{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
  80                                                                 <li role="menuitem" id="nav-notifications-mark-all" class="dropdown-header">
  81                                                                         <div class="arrow"></div>
  82                                                                         {{$nav.notifications.1}}
  83                                                                         <div class="dropdown-header-link">
  84                                                                                 <a href="#" onclick="notifyMarkAll(); return false;" data-toggle="tooltip" title="{{$nav.notifications.mark.1}}" class="">Mark as read{{*** @todo Translation ***}}</a>
  85                                                                         </div>
  86
  87                                                                 </li>
  88
  89                                                                 <li role="menuitem">
  90                                                                         <p class="text-muted"><i>{{$emptynotifications}}</i></p>
  91                                                                 </li>
  92                                                         </ul>
  93                                                 </li>
  94                                                 {{/if}}
  95
  96                                 </ul>
  97                         </div>
  98
  99                         {{* This is the right part of the NavBar. It includes the search and the user menu *}}
 100                         <div class="topbar-actions pull-right">
 101                                 <ul class="nav">
 102
 103                                         {{* The search box *}}
 104                                         {{if $nav.search}}
 105                                         <li id="search-box" class="hidden-xs">
 106                                                         <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
 107                                                                 <!-- <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;"> -->
 108                                                                 <div class="form-group form-group-search">
 109                                                                         <input id="nav-search-input-field" class="form-control form-search" type="text" name="search" placeholder="Search">
 110                                                                         <button class="btn btn-default btn-sm form-button-search" type="submit">Search</button>
 111                                                                 </div>
 112                                                         </form>
 113                                         </li>
 114                                         {{/if}}
 115
 116                                         {{* The user dropdown menu *}}
 117                                         {{if $nav.userinfo}}
 118                                         <li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
 119                                                 <a href="#" id="main-menu" class="dropdown-toggle nav-avatar " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 120                                                         <div class="user-title pull-left hidden-xs hidden-sm hidden-md">
 121                                                                 <strong>{{$nav.userinfo.name}}</strong><br>
 122                                                                 {{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
 123                                                         </div>
 124
 125                                                         <img  id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
 126                                                         <span class="caret"></span>
 127
 128                                                 </a>
 129
 130                                                 {{* The list of available usermenu links *}}
 131                                                 <ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu" aria-labelledby="main-menu">
 132                                                         {{if $nav.remote}}{{if $nav.sitename}}
 133                                                         <li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
 134                                                         <li class="divider"></li>
 135                                                         {{/if}}{{/if}}
 136                                                         {{foreach $nav.usermenu as $usermenu}}
 137                                                         <li role="menuitem"><a class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
 138                                                         {{/foreach}}
 139                                                         <li class="divider"></li>
 140                                                         <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>
 141                                                         <li class="divider"></li>
 142                                                         {{if $nav.notifications}}
 143                                                         <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>
 144                                                         {{/if}}
 145                                                         {{if $nav.messages}}
 146                                                         <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>
 147                                                         {{/if}}
 148                                                         <li class="divider"></li>
 149                                                         {{if $nav.contacts}}
 150                                                         <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>
 151                                                         {{/if}}
 152                                                         {{if $nav.manage}}
 153                                                         <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>
 154                                                         {{/if}}
 155                                                         <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>
 156                                                         <li class="divider"></li>
 157                                                         {{if $nav.apps}}
 158                                                         <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>
 159                                                         <li class="divider"></li>
 160                                                         {{/if}}
 161                                                         {{if $nav.help}}
 162                                                         <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>
 163                                                         {{/if}}
 164                                                         {{if $nav.settings}}
 165                                                         <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>
 166                                                         {{/if}}
 167                                                         {{if $nav.admin}}
 168                                                         <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>
 169                                                         {{/if}}
 170                                                         <li class="divider"></li>
 171                                                         {{if $nav.logout}}
 172                                                         <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>
 173                                                         {{else}}
 174                                                         <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>
 175                                                         {{/if}}
 176                                                 </ul>
 177                                         </li>{{* End of userinfo dropdown menu *}}
 178                                         {{/if}}
 179
 180                                 <!-- Language selector, I do not find it relevant, activate if necessary.
 181                                         <li>{{$langselector}}</li>
 182                                 -->
 183                                 </ul>
 184                         </div>{{* End of right navbar *}}
 185
 186                         {{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
 187                         <div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
 188                                 <div class="nav-container">
 189                                         <div class="list-group">
 190                                                 {{if $nav.remote}}{{if $nav.sitename}}
 191                                                 <li class="nav-sitename list-group-item" role="menuitem">{{$nav.sitename}}</li>
 192                                                 {{/if}}{{/if}}
 193                                                 <li 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>
 194                                                 {{foreach $nav.usermenu as $usermenu}}
 195                                                 <a class="{{$usermenu.2}} list-group-item" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a>
 196                                                 {{/foreach}}
 197                                                 {{if $nav.notifications}}
 198                                                 <a 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>
 199                                                 {{/if}}
 200                                                 {{if $nav.contacts}}
 201                                                 <a 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>
 202                                                 {{/if}}
 203                                                 {{if $nav.messages}}
 204                                                 <a 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>
 205                                                 {{/if}}
 206                                                 {{if $nav.manage}}
 207                                                 <a 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>
 208                                                 {{/if}}
 209                                                 {{if $nav.settings}}
 210                                                 <a 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>
 211                                                 {{/if}}
 212                                                 {{if $nav.admin}}
 213                                                 <a 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>
 214                                                 {{/if}}
 215                                                 {{if $nav.logout}}
 216                                                 <a 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>
 217                                                 {{else}}
 218                                                 <a 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>
 219                                                 {{/if}}
 220                                         </div>
 221                                 </div>
 222                         </div><!--/.sidebar-offcanvas-->
 223                 </div><!-- end of div for navbar width-->
 224         </div><!-- /.container -->
 225 </nav><!-- /.navbar -->
 226 {{/if}}
 227
 228
 229 {{* The navbar for users which are not logged in *}}
 230 {{if $nav.userinfo == ''}}
 231 <nav class="navbar navbar-fixed-top">
 232         <div class="container">
 233                 <div class="navbar-header">
 234                     <a class="navbar-brand" href="#"><div id="navbrand-container">
 235                                 <div id="logo-img"></div>
 236                                 <div id="navbar-brand-text"> Friendica</div></div>
 237                         </a>
 238                 </div>
 239                 <div class="hidden-sm hidden-xs">
 240                         <ul class="nav navbar-nav navbar-right">
 241                                 <li><a href="register" data-toggle="tooltip" title="{{$register.title}}"><i class="fa fa-street-view fa-fw"></i> {{$register.desc}}</a></li>
 242                                 <li><a href="login?mode=modal" data-toggle="tooltip" title="{{$login}}"><i class="fa fa-sign-in fa-fw"></i> {{$login}}</a></li>
 243                         </ul>
 244                 </div>
 245         </div>
 246 </nav>
 247 {{/if}}
 248
 249 {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}
 250 <div id="topbar-second" class="topbar">
 251         <div class="container">
 252                 <div class="col-lg-3 col-md-3 hidden-sm hidden-xs"></div>
 253                 <div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
 254                 <div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
 255         </div>
 256 </div>
 257
 258 {{*The second part of the notifications dropdown menu. It handles the notifications *}}
 259 {{if $nav.notifications}}
 260 <ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template"> <!-- needs further investigation. I thought the notifications have their own templates -->
 261         <li class="{4} notif-entry" onclick="location.href='{0}';">
 262                 <div class="notif-entry-wrapper media">
 263                         <div class="notif-photo-wrapper media-object pull-left"><a href="{6}"><img data-src="{1}"></a></div>
 264                         <div class="notif-desc-wrapper media-body">
 265                                 {8}{7}
 266                                 <div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
 267                         </div>
 268                 </div>
 269         </li>
 270 </ul>
 271 {{/if}}