Merge pull request #3151 from rabuzarus/20170203_-_frio_fix_tabbar_glitch

Bugfix: frio - fix tabbar on mobile view

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%;

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
 	//

view/theme/frio/templates/common_tabs.tpl

@@ -1,6 +1,7 @@
 
-{{* Tab navigation bar for tablets and computer *}}
-<ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs">
+<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" >
@@ -21,10 +22,10 @@
 				</li>
 			 </ul>
 		</li>
-</ul>
+	</ul>
 
-{{* Tab navigation bar for smartphones *}}
-<ul role="menubar" class="tabbar list-inline visible-xs">
+	{{* 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">
@@ -55,4 +56,5 @@
 				</li>
 			</ul>
 		</li>
-</ul>
+	</ul>
+</div>