tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 07:44:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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; left: -.6em;
z-index: -1; z-index: -1;
} }
&.bottom-up:after {
top: unset;
bottom: 1em;
}
> .nav-item { > .nav-item {
display: block; display: block;
padding-left: 0; padding-left: 0;

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

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