view/theme/frio/templates/common_tabs.tpl

   1
   2 <div class="tabbar-wrapper">
   3         {{* Tab navigation bar for tablets and computer *}}
   4         <ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs">
   5                 {{* The normal tabbar *}}
   6                 <li>
   7                         <ul class="tabs flex-nav" role="menu" >
   8                         {{foreach $tabs as $tab}}
   9                                 <li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a role="menuitem" href="{{$tab.url}}" {{if $tab.accesskey}}accesskey="{{$tab.accesskey}}"{{/if}} {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
  10                         {{/foreach}}
  11                         </ul>
  12                 </li>
  13
  14                 {{* The extended dropdown menu - this would be shown if the tab menu points
  15                         doesn't fit in the available space. This is done through flexMenu.js *}}
  16                 <li class="pull-right">
  17                         <ul class="tabs tabs-extended" role="menu">
  18                                 <li role="presentation" class="dropdown flex-target">
  19                                         <button type="button" class="btn-link dropdown-toggle" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="false">
  20                                                 <i class="fa fa-chevron-down" aria-hidden="true"></i>
  21                                         </button>
  22                                 </li>
  23                          </ul>
  24                 </li>
  25         </ul>
  26
  27         {{* Tab navigation bar for smartphones *}}
  28         <ul role="menubar" class="tabbar list-inline visible-xs">
  29                 {{* The active menupoint will be shown as one menupoint*}}
  30                 <li>
  31                         <ul class="tabs" role="menu">
  32                                 {{foreach $tabs as $tab}}
  33                                         {{if $tab.sel}}
  34                                         <li id="{{$tab.id}}-xs" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a role="menuitem" href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
  35                                         {{else}}
  36                                         {{$exttabs[]=$tab}}
  37                                         {{/if}}
  38                                 {{/foreach}}
  39                         </ul>
  40                 </li>
  41
  42                 {{* All others are moved to this dropdown menu *}}
  43                 <li class="pull-right">
  44                         <ul class="tabs tabs-extended">
  45                                 <li class="dropdown">
  46                                         <button type="button" class="btn-link dropdown-toggle" id="dropdownMenuTools-xs" data-toggle="dropdown" aria-expanded="false">
  47                                                 <i class="fa fa-chevron-down" aria-hidden="true"></i>
  48                                         </button>
  49                                         <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools">
  50                                                 {{foreach $exttabs as $tab}}
  51                                                 <li id="{{$tab.id}}-xs" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a role="menuitem" href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
  52                                                 {{/foreach}}
  53                                         </ul>
  54                                 </li>
  55                         </ul>
  56                 </li>
  57         </ul>
  58 </div>