strk/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source 
Bugfix: frio - fix tabbar on mobile view
This commit is contained in:
Tobias Diekershoff 2017-02-08 06:35:15 +01:00 committed by GitHub
parent 3adbbd6689 60ef105a14
commit c574bc5538
3 changed files with 56 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
view/theme/frio/css/style.css
View file

@ -1719,13 +1719,14 @@ img.acpopup-img {
} }
/* Menubar Tabs */ /* Menubar Tabs */
section > ul.tabbar { section > .tabbar-wrapper {
/* The tabbar shouldn't' be visibile inside /* The tabbar shouldn't' be visibile inside
the section element. Only after we have the section element. Only after we have
moved it to the nav through js */ moved it to the nav through js */
display: none !important; display: none !important;
} }
#tabmenu, #tabmenu,
.tabbar-wrapper,
.tabbar, .tabbar,
.tabbar > li { .tabbar > li {
height: 100%; height: 100%;

2
view/theme/frio/js/theme.js
View file

@ -40,7 +40,7 @@ $(document).ready(function(){
$(".field.select > select, .field.custom > select").addClass("form-control"); $(".field.select > select, .field.custom > select").addClass("form-control");
// move the tabbar to the second nav bar // 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 // add mask css url to the logo-img container
// //

104
view/theme/frio/templates/common_tabs.tpl
View file

@ -1,58 +1,60 @@
{{* Tab navigation bar for tablets and computer *}} <div class="tabbar-wrapper">
<ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs"> {{* Tab navigation bar for tablets and computer *}}
{{* The normal tabbar *}} <ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs">
<li> {{* The normal tabbar *}}
<ul class="tabs flex-nav" role="menu" > <li>
{{foreach $tabs as $tab}} <ul class="tabs flex-nav" role="menu" >
<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">
{{foreach $tabs as $tab}} {{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> <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}} {{/foreach}}
</ul>
</li>
{{* The extended dropdown menu - this would be shown if the tab menu points
</ul> dosn't fit in the available space. This is done through flexMenu.js *}}
</li> <li class="pull-right">
<ul class="tabs tabs-extended" role="menu">
{{* All others are moved to this dropdown menu *}} <li role="menuitem" class="dropdown flex-target">
<li class="pull-right"> <a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
<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> <i class="fa fa-chevron-down"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools"> </li>
{{foreach $exttabs as $tab}} </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> <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}} {{else}}
</ul> {{$exttabs[]=$tab}}
</li> {{/if}}
</ul> {{/foreach}}
</li>
</ul>
</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>