From 60ef105a14f57c87ea5d32d6e389721f1a3f8cc0 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Wed, 8 Feb 2017 01:34:36 +0100
Subject: [PATCH] frio - fix tabbar on mobile view

---
 view/theme/frio/css/style.css             |   3 +-
 view/theme/frio/js/theme.js               |   2 +-
 view/theme/frio/templates/common_tabs.tpl | 104 +++++++++++-----------
 3 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 7f74ed55f..df9585d07 100644
--- 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 c14927180..8102e7ac9 100644
--- 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 c5d1dac6b..7cfd63528 100644
--- 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>