Skip to content

Commit

Permalink
Merge pull request #15775 from mauriciofauth/bootstrap-navbar
Browse files Browse the repository at this point in the history 
Convert top menu to Bootstrap's navbar component
  • Loading branch information
@MauricioFauth
MauricioFauth committed Jan 17, 2020
2 parents 73832da + f24cedd commit fc8396f
Show file tree
Hide file tree
Showing 17 changed files with 201 additions and 453 deletions.
98 changes: 29 additions & 69 deletions js/menu_resizer.js
View file
Expand Up @@ -28,62 +28,41 @@
if (windowWidth < 768) {
$('#pma_navigation_resizer').css({ 'width': '0px' });
}
// Sets the image for the left and right scroll indicator
$('.scrollindicator--left').html($(Functions.getImage('b_left').toString()));
$('.scrollindicator--right').html($(Functions.getImage('b_right').toString()));

// Set the width of the navigation bar without scroll indicator
$('.navigationbar').css({ 'width': widthCalculator.call($container) - 60 });

// Scroll the navigation bar on click
$('.scrollindicator--right').on('click', function () {
$('.navigationbar').scrollLeft($('.navigationbar').scrollLeft() + 70);
});
$('.scrollindicator--left').on('click', function () {
$('.navigationbar').scrollLeft($('.navigationbar').scrollLeft() - 70);
});

// create submenu container
var link = $('<a></a>', { href: '#', 'class': 'tab nowrap' })
.text(Messages.strMore)
.on('click', false); // same as event.preventDefault()
var link = $('<a></a>', {
'href': '#',
'class': 'nav-link dropdown-toggle',
'id': 'navbarDropdown',
'role': 'button',
'data-toggle': 'dropdown',
'aria-haspopup': 'true',
'aria-expanded': 'false'
}).text(Messages.strMore);

var img = $container.find('li img');
if (img.length) {
$(Functions.getImage('b_more').toString()).prependTo(link);
}
var $submenu = $('<li></li>', { 'class': 'submenu' })
var $submenu = $('<li></li>', { 'class': 'nav-item dropdown d-none' })
.append(link)
.append($('<ul></ul>'))
.on('mouseenter', function () {
if ($(this).find('ul .tabactive').length === 0) {
$(this)
.addClass('submenuhover')
.find('> a')
.addClass('tabactive');
}
})
.on('mouseleave', function () {
if ($(this).find('ul .tabactive').length === 0) {
$(this)
.removeClass('submenuhover')
.find('> a')
.removeClass('tabactive');
}
});
$container.children('.clearfloat').remove();
$container.append($submenu).append('<div class=\'clearfloat\'></div>');
.append($('<ul></ul>', {
'class': 'dropdown-menu dropdown-menu-right',
'aria-labelledby': 'navbarDropdown'
}));
$container.append($submenu);
setTimeout(function () {
self.resize();
}, 4);
}
MenuResizer.prototype.resize = function () {
var wmax = this.widthCalculator.call(this.$container);
var windowWidth = $(window).width();
var $submenu = this.$container.find('.submenu:last');
var $submenu = this.$container.find('.nav-item.dropdown:last');
var submenuW = $submenu.outerWidth(true);
var $submenuUl = $submenu.find('ul');
var $submenuUl = $submenu.find('.dropdown-menu');
var $li = this.$container.find('> li');
var $li2 = $submenuUl.find('li');
var $li2 = $submenuUl.find('.dropdown-item');
var moreShown = $li2.length > 0;
// Calculate the total width used by all the shown tabs
var totalLen = moreShown ? submenuW : 0;
Expand All @@ -106,6 +85,7 @@
while (totalLen >= wmax && --l >= 0) { // Process the tabs backwards
hidden = true;
var el = $($li[l]);
el.removeClass('nav-item').addClass('dropdown-item');
var elWidth = el.outerWidth(true);
el.data('width', elWidth);
if (! moreShown) {
Expand All @@ -128,6 +108,7 @@
if (totalLen < wmax ||
(i === $li2.length - 1 && totalLen - submenuW < wmax)
) {
$($li2[i]).removeClass('dropdown-item').addClass('nav-item');
$($li2[i]).insertBefore($submenu);
} else {
break;
Expand All @@ -136,42 +117,21 @@
}
// Show/hide the "More" tab as needed
if (windowWidth < 768) {
$('.navigationbar').css({ 'width': windowWidth - 80 - $('#pma_navigation').width() });
$submenu.removeClass('shown');
$('.navigationbar').css({ 'overflow': 'hidden' });
$('.navbar-collapse').css({ 'width': windowWidth - 80 - $('#pma_navigation').width() });
$submenu.addClass('d-none');
$('.navbar-collapse').css({ 'overflow': 'hidden' });
} else {
$('.navigationbar').css({ 'width': 'auto' });
$('.navigationbar').css({ 'overflow': 'visible' });
$('.navbar-collapse').css({ 'width': 'auto' });
$('.navbar-collapse').css({ 'overflow': 'visible' });
if ($submenuUl.find('li').length > 0) {
$submenu.addClass('shown');
$submenu.removeClass('d-none');
} else {
$submenu.removeClass('shown');
$submenu.addClass('d-none');
}
}
if (this.$container.find('> li').length === 1) {
// If there is only the "More" tab left, then we need
// to align the submenu to the left edge of the tab
$submenuUl.removeClass().addClass('only');
} else {
// Otherwise we align the submenu to the right edge of the tab
$submenuUl.removeClass().addClass('notonly');
}
if ($submenu.find('.tabactive').length) {
$submenu
.addClass('active')
.find('> a')
.removeClass('tab')
.addClass('tabactive');
} else {
$submenu
.removeClass('active')
.find('> a')
.addClass('tab')
.removeClass('tabactive');
}
};
MenuResizer.prototype.destroy = function () {
var $submenu = this.$container.find('li.submenu').removeData();
var $submenu = this.$container.find('.nav-item.dropdown').removeData();
$submenu.find('li').appendTo(this.$container);
$submenu.remove();
};
Expand Down
34 changes: 20 additions & 14 deletions templates/top_menu.twig
View file
@@ -1,16 +1,22 @@
<div id="topmenucontainer" class="menucontainer">
<i class="scrollindicator scrollindicator--left"><a href="#" class="tab"></a></i>
<div class="navigationbar">
<ul id="topmenu" class="resizable-menu">
{% for tab in tabs %}
<li{{ tab.active ? ' class="active"' }}>
<a href="{{ url(tab.route, url_params|merge(tab.args ?? [])) }}" class="tab{{ tab.active ? 'active' }}">
{{ get_icon(tab.icon, tab.text, false, true, 'TabsMode') }}
</a>
</li>
{% endfor %}
<div class="clearfloat"></div>
</ul>
</div>
<i class="scrollindicator scrollindicator--right"><a href="#" class="tab"></a></i>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-label="
{%- trans 'Toggle navigation' %}" aria-controls="navbarNav" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="topmenu" class="navbar-nav">
{% for tab in tabs %}
<li class="nav-item{{ tab.active ? ' active' }}">
<a class="nav-link text-nowrap" href="{{ url(tab.route, url_params|merge(tab.args ?? [])) }}">
{{ get_icon(tab.icon, tab.text, false, true, 'TabsMode') }}
{% if tab.active %}
<span class="sr-only">{% trans %}(current){% notes %}Current page{% endtrans %}</span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</nav>
</div>
8 changes: 4 additions & 4 deletions themes/bootstrap/scss/_bootstrap.scss
View file
Expand Up @@ -10,13 +10,13 @@
@import "../../../node_modules/bootstrap/scss/tables";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/buttons";
//@import "../../../node_modules/bootstrap/scss/transitions";
//@import "../../../node_modules/bootstrap/scss/dropdown";
@import "../../../node_modules/bootstrap/scss/transitions";
@import "../../../node_modules/bootstrap/scss/dropdown";
//@import "../../../node_modules/bootstrap/scss/button-group";
//@import "../../../node_modules/bootstrap/scss/input-group";
//@import "../../../node_modules/bootstrap/scss/custom-forms";
//@import "../../../node_modules/bootstrap/scss/nav";
//@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/nav";
@import "../../../node_modules/bootstrap/scss/navbar";
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/breadcrumb";
//@import "../../../node_modules/bootstrap/scss/pagination";
Expand Down
102 changes: 0 additions & 102 deletions themes/bootstrap/scss/_common.scss
View file
Expand Up @@ -934,19 +934,7 @@ li.last.database {
margin-bottom: 15px;
}

/* specific elements */

#topmenu {
margin-top: 0.5em;
padding: 0.1em 0.3em;

a {
text-shadow: 0 1px 0 #fff;
}
}

ul {
&#topmenu,
&#topmenu2,
&.tabs {
font-weight: bold;
Expand All @@ -961,29 +949,18 @@ ul {
clear: both;
}

&#topmenu li,
&#topmenu2 li {
float: left;
margin: 0;
vertical-align: middle;
}
}

#topmenu img,
#topmenu2 img {
margin-#{$right}: 0.5em;
vertical-align: -3px;
}

.menucontainer {
background: linear-gradient(#fff, #dcdcdc);
border-top: 1px solid #aaa;
}

.scrollindicator {
display: none;
}

// default tab styles
.tabactive {
background: #fff !important;
Expand Down Expand Up @@ -1022,64 +999,6 @@ fieldset.caution a {
}

ul {
&#topmenu {
ul {
@if $direction == rtl {
-moz-box-shadow: -1px 1px 6px #ddd;
-webkit-box-shadow: -2px 2px 3px #666;
box-shadow: -2px 2px 3px #666;
} @else {
-moz-box-shadow: 1px 1px 6px #ddd;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
}

&.only {
#{$left}: 0;
}
}

> li {
border-#{$right}: 1px solid #fff;
border-#{$left}: 1px solid #ccc;
border-bottom: 1px solid #ccc;

&:first-child {
border-#{$left}: 0;
}
}

a,
span {
padding: 0.6em;
}

ul {
a {
border-width: 1pt 0 0 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}

li:first-child a {
border-width: 0;
}

a:hover,
.tabactive {
text-decoration: none;
}
}

> li > {
a:hover,
.tabactive {
text-decoration: none;
}
}
}

&#topmenu2 a {
&.tab:hover,
&.tabactive {
Expand All @@ -1090,14 +1009,7 @@ ul {
text-decoration: none;
}
}

// to be able to cancel the bottom border, use <li class="active">
&#topmenu > li.active {
border-#{$right}: 0;
border-bottom-color: #fff;
}
}
// end topmenu

// zoom search
div#dataDisplay {
Expand Down Expand Up @@ -3866,25 +3778,11 @@ body .ui-dialog {

@media only screen and (max-width: 768px) {
ul {
&#topmenu,
&.tabs {
display: flex;
}
}

.navigationbar {
display: inline-flex;
margin: 0 !important;
border-radius: 0 !important;
overflow: auto;
}

.scrollindicator {
padding: 5px;
cursor: pointer;
display: inline;
}

.responsivetable {
overflow-x: auto;
}
Expand Down
4 changes: 4 additions & 0 deletions themes/bootstrap/scss/_variables.scss
View file
Expand Up @@ -45,6 +45,10 @@ $bg-one: #e5e5e5;
// table data row background, alternate
$bg-two: #d5d5d5;

// Navbar

$enable-transitions: false;

// Breadcrumbs

$breadcrumb-padding-y: 0.5rem;
Expand Down

0 comments on commit fc8396f

Please sign in to comment.