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 7f74ed55f6..df9585d070 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 c149271804..8102e7ac95 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 c5d1dac6bd..7cfd63528a 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>