From 32443135c947491d577c39e48d6b88bfbf2e9ccf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20K=C3=BCndig?= Date: Thu, 2 Apr 2020 18:47:24 +0200 Subject: [PATCH] Remove JS layout calculations of the backend navbar by using flexbox (#4811) --- modules/backend/assets/css/october.css | 5 +++-- modules/backend/assets/js/october-min.js | 4 ++-- modules/backend/assets/js/october.navbar.js | 11 +++++------ modules/backend/assets/less/layout/mainmenu.less | 9 ++++++++- modules/backend/layouts/_mainmenu.htm | 2 +- 5 files changed, 19 insertions(+), 12 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 3ee63a995..cfe543c40 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -659,7 +659,7 @@ ul.mainmenu-nav li {} ul.mainmenu-nav li .svg-icon {-webkit-backface-visibility:hidden;backface-visibility:hidden} ul.mainmenu-nav li span.counter {display:block;position:absolute;top:.143em;right:0;padding:.143em .429em .214em .286em;background-color:#d9350f;color:#fff;font-size:.786em;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s} ul.mainmenu-nav li span.counter.empty {opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)} -nav#layout-mainmenu {background-color:#000;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top} +nav#layout-mainmenu {background-color:#000;padding:0 0 0 20px;line-height:0;white-space:nowrap;display:flex} nav#layout-mainmenu a {text-decoration:none} nav#layout-mainmenu a:focus {background:transparent} nav#layout-mainmenu ul {margin:0;padding:0;list-style:none;float:left;white-space:nowrap;overflow:hidden} @@ -671,7 +671,8 @@ nav#layout-mainmenu ul li a:focus {text-decoration:none;color:rgba(255,255,255,0 nav#layout-mainmenu ul li a i {line-height:1;font-size:30px;vertical-align:middle} nav#layout-mainmenu ul li a img.svg-icon {height:30px;width:30px;margin-right:10px;position:relative;top:0} nav#layout-mainmenu ul.nav {display:inline-block} -nav#layout-mainmenu .toolbar-item {padding-right:0} +nav#layout-mainmenu .toolbar-item {flex:1 1 auto;display:block;padding-right:0;overflow:hidden} +nav#layout-mainmenu .toolbar-item-account {flex:0 0 auto} nav#layout-mainmenu .toolbar-item:before, nav#layout-mainmenu .toolbar-item:after {margin-top:0} nav#layout-mainmenu .toolbar-item:before {left:-12px} diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js index a25834ef2..34770c73c 100644 --- a/modules/backend/assets/js/october-min.js +++ b/modules/backend/assets/js/october-min.js @@ -760,8 +760,8 @@ return this}}(window.jQuery);(function($){$(document).ready(function(){$('nav.na navbar=$(this),nav=$('ul.nav',navbar),collapseMode=navbar.hasClass('navbar-mode-collapse'),isMobile=$('html').hasClass('mobile') nav.verticalMenu($('a.menu-toggle',navbar),{breakpoint:collapseMode?Infinity:769}) $('li.with-tooltip:not(.active) > a',navbar).tooltip({container:'body',placement:'bottom',template:''}).on('show.bs.tooltip',function(e){if(isMobile)e.preventDefault()}) -$('[data-calculate-width]',navbar).one('oc.widthFixed',function(){var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll') -if(dragScroll){dragScroll.goToElement($('ul.nav > li.active',navbar),undefined,{'duration':0})}})})})})(jQuery);+function($){"use strict";if($.oc===undefined) +var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll') +if(dragScroll){dragScroll.goToElement($('ul.nav > li.active',navbar),undefined,{'duration':0})}})})})(jQuery);+function($){"use strict";if($.oc===undefined) $.oc={} var SideNav=function(element,options){this.options=options this.$el=$(element) diff --git a/modules/backend/assets/js/october.navbar.js b/modules/backend/assets/js/october.navbar.js index b2d537cf0..25c9b7d50 100644 --- a/modules/backend/assets/js/october.navbar.js +++ b/modules/backend/assets/js/october.navbar.js @@ -31,12 +31,11 @@ if (isMobile) e.preventDefault() }) - $('[data-calculate-width]', navbar).one('oc.widthFixed', function() { - var dragScroll = $('[data-control=toolbar]', navbar).data('oc.dragScroll') - if (dragScroll) { - dragScroll.goToElement($('ul.nav > li.active', navbar), undefined, {'duration': 0}) - } - }) + // Scroll to the currently active nav item. + var dragScroll = $('[data-control=toolbar]', navbar).data('oc.dragScroll') + if (dragScroll) { + dragScroll.goToElement($('ul.nav > li.active', navbar), undefined, {'duration': 0}) + } }) }) })(jQuery); diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less index a1af75cc9..4e399cf44 100644 --- a/modules/backend/assets/less/layout/mainmenu.less +++ b/modules/backend/assets/less/layout/mainmenu.less @@ -113,7 +113,7 @@ nav#layout-mainmenu { padding: 0 0 0 20px; line-height: 0; white-space: nowrap; - vertical-align: top; + display: flex; a { text-decoration: none; @@ -157,7 +157,14 @@ nav#layout-mainmenu { } .toolbar-item { + flex: 1 1 auto; + display: block; padding-right: 0; + overflow: hidden; + + &-account { + flex: 0 0 auto; + } &:before, &:after { margin-top: 0; diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm index bdcae757f..0cf31ac6d 100644 --- a/modules/backend/layouts/_mainmenu.htm +++ b/modules/backend/layouts/_mainmenu.htm @@ -47,7 +47,7 @@ -
+