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