TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove JS layout calculations of the backend navbar by using flexbox (#4811)

This commit is contained in:
Tobias Kündig 2020-04-02 18:47:24 +02:00 committed by GitHub
parent ccb2c372bb
commit 32443135c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
modules/backend/assets/css/october.css
View File

@ -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}

4
modules/backend/assets/js/october-min.js vendored
View File

@ -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:'<div class="tooltip mainmenu-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'}).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)

11
modules/backend/assets/js/october.navbar.js
View File

@ -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);

9
modules/backend/assets/less/layout/mainmenu.less
View File

@ -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;

2
modules/backend/layouts/_mainmenu.htm
View File

@ -47,7 +47,7 @@
</ul>
</div>
</div>
<div class="toolbar-item" data-calculate-width>
<div class="toolbar-item toolbar-item-account">
<ul class="mainmenu-toolbar">
<li class="mainmenu-preview with-tooltip">
<a