]> git.mxchange.org Git - friendica.git/blobdiff - view/theme/frio/templates/nav.tpl
Fix review points
[friendica.git] / view / theme / frio / templates / nav.tpl
index e448313ea8e1e33bb1a826dc29bf16c9c18e2116..915e5e9fc7c43620176bdf74dae6610ac85ad4b6 100644 (file)
@@ -1,13 +1,13 @@
-{{* 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}}
+{{* we have modified the navmenu (look at function frio_remote_nav() ) to have remote links. *}}
+{{if $userinfo}}
        <header>
                {{* {{$langselector}} *}}
 
                <div id="site-location">{{$sitelocation}}</div>
                <div id="banner" class="hidden-sm hidden-xs">
-                       {{* show on remote/visitor connections an other logo which symols that fact*}}
+                       {{* show on remote/visitor connections an other logo which symbols that fact*}}
                        {{if $nav.remote}}
-                               <a hruf="{{$baseurl}}">
+                               <a href="{{$baseurl}}">
                                        <div id="remote-logo-img" aria-label="{{$home}}"></div>
                                </a>
                        {{else}}
                                <div class="topbar-nav" role="navigation">
 
                                        {{* Buttons for the mobile view *}}
-                                       <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas"
-                                               data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
+                                       <button type="button" class="navbar-toggle offcanvas-right-toggle pull-right"
+                                               aria-controls="offcanvasUsermenu" aria-haspopup="true">
                                                <span class="sr-only">Toggle navigation</span>
                                                <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse"
                                                data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
                                                <span class="sr-only">Toggle Search</span>
-                                               <i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i>
+                                               <i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
                                        </button>
                                        <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs"
                                                data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
                                                {{if $nav.search}}
                                                        <li id="search-box" class="hidden-xs">
                                                                <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
-                                                                       <!-- <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;"> -->
                                                                        <div class="form-group form-group-search">
                                                                                <input accesskey="s" id="nav-search-input-field" class="form-control form-search"
                                                                                        type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}"
                                                {{/if}}
 
                                                {{* The user dropdown menu *}}
-                                               {{if $nav.userinfo}}
+                                               {{if $userinfo}}
                                                        <li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
                                                                <button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar"
                                                                        data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false"
                                                                        aria-controls="nav-user-menu">
                                                                        <div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
-                                                                               <strong>{{$nav.userinfo.name}}</strong><br>
+                                                                               <strong>{{$userinfo.name}}</strong><br>
                                                                                {{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
                                                                        </div>
 
-                                                                       <img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
+                                                                       <img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
                                                                        <span class="caret"></span>
                                                                </button>
 
                                                                                {{/if}}
                                                                        {{/if}}
                                                                        {{foreach $nav.usermenu as $usermenu}}
-                                                                               <li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
-                                                                                               title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
+                                                                                               title="{{$usermenu.3}}">
+                                                                                               {{$usermenu.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/foreach}}
                                                                        <li role="presentation" class="divider"></li>
                                                                        {{if $nav.notifications}}
-                                                                               <li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}"
-                                                                                               title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i>
-                                                                                               {{$nav.notifications.1}}</a></li>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}">
+                                                                                               <i class="fa fa-bell fa-fw" aria-hidden="true"></i>
+                                                                                               {{$nav.notifications.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
                                                                        {{if $nav.messages}}
                                                                                <li role="presentation"><a role="menuitem"
                                                                                                class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}"
-                                                                                               href="{{$nav.messages.0}}" title="{{$nav.messages.3}}"><i
-                                                                                                       class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span
-                                                                                                       id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a>
+                                                                                               href="{{$nav.messages.0}}" title="{{$nav.messages.3}}">
+                                                                                               <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
+                                                                                               {{$nav.messages.1}} <span id="mail-update-li"
+                                                                                                       class="nav-mail-badge badge nav-notification"></span>
+                                                                                       </a>
                                                                                </li>
                                                                        {{/if}}
                                                                        <li role="presentation" class="divider"></li>
                                                                        {{if $nav.contacts}}
                                                                                <li role="presentation"><a role="menuitem" id="nav-menu-contacts-link"
                                                                                                class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
-                                                                                               title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
-                                                                                               {{$nav.contacts.1}}</a></li>
+                                                                                               title="{{$nav.contacts.3}}">
+                                                                                               <i class="fa fa-users fa-fw" aria-hidden="true"></i>
+                                                                                               {{$nav.contacts.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
                                                                        {{if $nav.delegation}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-delegation-link"
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-delegation-link"
                                                                                                class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
-                                                                                               href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i
-                                                                                                       class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
+                                                                                               href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}">
+                                                                                               <i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
-                                                                       <li role="presentation"><a role="menuitem" 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"
-                                                                                               aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
+                                                                       <li role="presentation">
+                                                                               <a role="menuitem" 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" aria-hidden="true"></i>{{$nav.directory.1}}
+                                                                               </a>
+                                                                       </li>
                                                                        <li role="presentation" class="divider"></li>
                                                                        {{if $nav.apps}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-apps-link"
-                                                                                               class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}"><i
-                                                                                                       class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-apps-link" class="nav-link {{$nav.apps.2}}"
+                                                                                               href="{{$nav.apps.0}}" title="{{$nav.apps.3}}">
+                                                                                               <i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}
+                                                                                       </a>
                                                                                <li role="presentation" class="divider"></li>
                                                                        {{/if}}
                                                                        {{if $nav.help}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-help-link"
-                                                                                               class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i
-                                                                                                       class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-help-link" class="nav-link {{$nav.help.2}}"
+                                                                                               href="{{$nav.help.0}}" title="{{$nav.help.3}}">
+                                                                                               <i class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}
+                                                                                       </a>
                                                                                </li>
                                                                        {{/if}}
                                                                        {{if $nav.settings}}
-                                                                               <li role="presentation"><a role="menuitem" 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" aria-hidden="true"></i>
-                                                                                               {{$nav.settings.1}}</a></li>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" 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" aria-hidden="true"></i> {{$nav.settings.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
                                                                        {{if $nav.admin}}
                                                                                <li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link"
                                                {{/if}}
 
                                                <!-- Language selector, I do not find it relevant, activate if necessary.
-                                       <li>{{$langselector}}</li>
-                               -->
+                                               <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">
+                               {{* The usermenu dropdown for the mobile view. Offcanvas on the right side of the screen.
+                                       It is called via the buttons. Have a look at the top of this file *}}
+                               <div class="offcanvas-right-overlay visible-xs-block"></div>
+                               <div id="offcanvasUsermenu" class="offcanvas-right visible-xs-block">
                                        <div class="nav-container">
                                                <ul role="menu" class="list-group">
                                                        {{if $nav.remote}}
                                                                        <li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
                                                                {{/if}}
                                                        {{/if}}
-                                                       <li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}"
-                                                                       alt="{{$nav.userinfo.name}}"
+                                                       <li role="presentation" class="list-group-item">
+                                                               <img src="{{$userinfo.icon}}" alt="{{$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>
+                                                               {{$userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}
+                                                       </li>
                                                        {{foreach $nav.usermenu as $usermenu}}
                                                                <li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}"
                                                                                href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
                                                        {{/foreach}}
+                                                       {{if $nav.notifications || $nav.contacts || $nav.messages || $nav.delegation}}
+                                                               <li role="presentation" class="divider"></li>
+                                                       {{/if}}
                                                        {{if $nav.notifications}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i
-                                                                                       class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
+                                                                                       class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a>
+                                                               </li>
                                                        {{/if}}
                                                        {{if $nav.contacts}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw"
                                                                                        aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
                                                        {{/if}}
+                                                       {{if $nav.settings || $nav.admin || $nav.logout}}
+                                                               <li role="presentation" class="divider"></li>
+                                                       {{/if}}
                                                        {{if $nav.settings}}
-                                                               <li role="presentation" class="list-group-item"><a role="menuitem"
-                                                                               class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
+                                                               <li role="presentation" class="list-group-item">
+                                                                       <a role="menuitem" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
                                                                                title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
-                                                                               {{$nav.settings.1}}</a></li>
+                                                                               {{$nav.settings.1}}</a>
+                                                               </li>
                                                        {{/if}}
                                                        {{if $nav.admin}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}"><i
-                                                                                       class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
+                                                                                       class="fa fa-user-secret fa-fw" aria-hidden="true"></i>
+                                                                               {{$nav.admin.1}}</a></li>
                                                        {{/if}}
                                                        {{if $nav.logout}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}"><i
-                                                                                       class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
+                                                                                       class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i>
+                                                                               {{$nav.logout.1}}</a></li>
                                                        {{else}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
                        </div><!-- end of div for navbar width-->
                </div><!-- /.container -->
        </nav><!-- /.navbar -->
-{{/if}}
-
-
-{{* The navbar for users which are not logged in *}}
-{{if $nav.userinfo == ''}}
+{{else}}
+       {{* The navbar for users which are not logged in *}}
        <nav class="navbar navbar-fixed-top">
                <div class="container">
                        <div class="navbar-header pull-left">
                        </div>
                </div>
        </nav>
-
 {{/if}}
 
 {{* provide a a search input for mobile view, which expands by pressing the search icon *}}
 <div id="search-mobile" class="hidden-lg hidden-md hidden-sm collapse row well">
        <div class="col-xs-12">
                <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
-                       <!-- <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;"> -->
                        <div class="form-group form-group-search">
                                <input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="q"
                                        data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">