tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Flyout menu: Render menu `bottom-up` if it exceeds the viewport height

This commit is contained in:
Sukhwinder Dhillon 2023-06-12 13:12:28 +02:00 committed by Johannes Meyer
parent 4ea3bebe07
commit cc9572d9c5
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/icinga/menu.less
View File

@ -270,6 +270,12 @@
left: -.6em;
z-index: -1;
}
&.bottom-up:after {
top: unset;
bottom: 1em;
}
> .nav-item {
display: block;
padding-left: 0;

10
public/js/icinga/behavior/navigation.js
View File

@ -319,18 +319,22 @@
$target.siblings().not($target).removeClass('hover');
$target.addClass('hover');
var targetHeight = $target.offset().top + $target.outerHeight();
$flyout.css({
bottom: 'auto',
top: $target.offset().top + $target.outerHeight()
top: targetHeight
});
var rect = $flyout[0].getBoundingClientRect();
if (rect.y + rect.height > window.innerHeight) {
if (rect.bottom > window.innerHeight) {
$flyout.addClass('bottom-up');
$flyout.css({
bottom: 0,
bottom: window.innerHeight - targetHeight,
top: 'auto'
});
} else {
$flyout.removeClass('bottom-up');
}
}, delay);
};