frio - fix tabbar on mobile view

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 7f74ed55f6384f06d5a99e4079e17ab52a5e0a95..df9585d07026f5440341e034e72440120c22bcfb 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1719,13 +1719,14 @@ img.acpopup-img {
 
 }
 /* Menubar Tabs */
-section > ul.tabbar {
+section > .tabbar-wrapper {
 /* The tabbar shouldn't' be visibile inside
 the section element. Only after we have
 moved it to the nav through js */
     display: none !important;
 }
 #tabmenu,
+.tabbar-wrapper,
 .tabbar,
 .tabbar > li {
     height: 100%;

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index c149271804fe377f25a3ac1be5cc8b187162f276..8102e7ac95614ef10a45cd5624b5b6d9a125059a 100644 (file)
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -40,7 +40,7 @@ $(document).ready(function(){
        $(".field.select > select, .field.custom > select").addClass("form-control");
 
        // move the tabbar to the second nav bar
-       $("section ul.tabbar").first().appendTo("#topbar-second > .container > #tabmenu");
+       $("section .tabbar-wrapper").first().appendTo("#topbar-second > .container > #tabmenu");
 
        // add mask css url to the logo-img container
        //

diff --git a/view/theme/frio/templates/common_tabs.tpl b/view/theme/frio/templates/common_tabs.tpl
index c5d1dac6bd282b8855815f0f00454d6bc9d9c55f..7cfd63528adb589f26a2ec8fa95f929aed2eef31 100644 (file)
--- a/view/theme/frio/templates/common_tabs.tpl
+++ b/view/theme/frio/templates/common_tabs.tpl
@@ -1,58 +1,60 @@
 
-{{* Tab navigation bar for tablets and computer *}}
-<ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs">
-       {{* The normal tabbar *}}
-       <li>
-               <ul class="tabs  flex-nav" role="menu" >
-               {{foreach $tabs as $tab}}
-                       <li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
-               {{/foreach}}
-               </ul>
-       </li>
-
-       {{* The extended dropdown menu - this would be shown if the tab menu points
-               dosn't fit in the available space. This is done through flexMenu.js *}}
-       <li class="pull-right">
-               <ul class="tabs tabs-extended" role="menu">
-                       <li role="menuitem" class="dropdown flex-target">
-                               <a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
-                               <i class="fa fa-chevron-down"></i>
-                               </a>
-                       </li>
-                </ul>
-       </li>
-</ul>
-
-{{* Tab navigation bar for smartphones *}}
-<ul role="menubar" class="tabbar list-inline visible-xs">
-       {{* The active menupoint will be shown as one menupoint*}}
-       <li>
-               <ul class="tabs" role="menu">
+<div class="tabbar-wrapper">
+       {{* Tab navigation bar for tablets and computer *}}
+       <ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs">
+               {{* The normal tabbar *}}
+               <li>
+                       <ul class="tabs  flex-nav" role="menu" >
                        {{foreach $tabs as $tab}}
-                               {{if $tab.sel}}
                                <li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
-                               {{else}}
-                               {{$exttabs[]=$tab}}
-                               {{/if}}
                        {{/foreach}}
+                       </ul>
+               </li>
 
-
-               </ul>
-       </li>
-
-       {{* All others are moved to this dropdown menu *}}
-       <li class="pull-right">
-               <ul class="tabs tabs-extended">
-                       <li class="dropdown">
-                               <a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
+               {{* The extended dropdown menu - this would be shown if the tab menu points
+                       dosn't fit in the available space. This is done through flexMenu.js *}}
+               <li class="pull-right">
+                       <ul class="tabs tabs-extended" role="menu">
+                               <li role="menuitem" class="dropdown flex-target">
+                                       <a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
                                        <i class="fa fa-chevron-down"></i>
-                               </a>
-                               <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools">
-                                       {{foreach $exttabs as $tab}}
+                                       </a>
+                               </li>
+                        </ul>
+               </li>
+       </ul>
+
+       {{* Tab navigation bar for smartphones *}}
+       <ul role="menubar" class="tabbar list-inline visible-xs">
+               {{* The active menupoint will be shown as one menupoint*}}
+               <li>
+                       <ul class="tabs" role="menu">
+                               {{foreach $tabs as $tab}}
+                                       {{if $tab.sel}}
                                        <li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
-                                       {{/foreach}}
-                               </ul>
-                       </li>
-               </ul>
-       </li>
-</ul>
+                                       {{else}}
+                                       {{$exttabs[]=$tab}}
+                                       {{/if}}
+                               {{/foreach}}
+
+
+                       </ul>
+               </li>
+
+               {{* All others are moved to this dropdown menu *}}
+               <li class="pull-right">
+                       <ul class="tabs tabs-extended">
+                               <li class="dropdown">
+                                       <a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
+                                               <i class="fa fa-chevron-down"></i>
+                                       </a>
+                                       <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools">
+                                               {{foreach $exttabs as $tab}}
+                                               <li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
+                                               {{/foreach}}
+                                       </ul>
+                               </li>
+                       </ul>
+               </li>
+       </ul>
+</div>