view/theme/frio/templates/common_tabs.tpl

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