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

Fix menu caret positioning (#5363)

Browse Source 
(cherry picked from commit 6c57d3297991297281cddbed701df097a9701910)
This commit is contained in:
Johannes Meyer 2025-04-30 15:18:14 +02:00
parent ff04a2ea43
commit cc295966f0
2 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,11 +2,12 @@
#menu [class^="icon-"], #menu [class^="icon-"],
#menu [class*=" icon-"] { #menu [class*=" icon-"] {
&:before { &::before {
width: 1.5em; width: 1.5em;
} }
} }
@nav-item-height: 3.166666667em; // 38px
@icon-width: 1.7em; // 1.5em width + 0.2em right margin @icon-width: 1.7em; // 1.5em width + 0.2em right margin
#menu { #menu {
@ -51,7 +52,6 @@
} }
#menu .nav-level-1 > .nav-item { #menu .nav-level-1 > .nav-item {
line-height: 2.167em; // 26 px
color: @menu-color; color: @menu-color;
&.active { &.active {
@ -69,7 +69,10 @@
} }
> a { > a {
padding: 0.5em 0.5em 0.5em .75em; padding-left: .75em;
height: @nav-item-height;
display: flex;
align-items: center;
} }
&.active:not(.selected) > a:focus, &.active:not(.selected) > a:focus,
@ -87,7 +90,7 @@
opacity: .8; opacity: .8;
} }
& > a > .icon-letter:before { & > a > .icon-letter::before {
content: attr(data-letter); content: attr(data-letter);
font-family: @font-family; font-family: @font-family;
font-weight: 800; font-weight: 800;
@ -103,7 +106,7 @@
background-color: @menu-highlight-hover-bg-color; background-color: @menu-highlight-hover-bg-color;
} }
&:after { &::after {
.transform(rotate(45deg)); .transform(rotate(45deg));
position: absolute; position: absolute;
@ -114,8 +117,8 @@
content: ""; content: "";
display: block; display: block;
height: 1.25em; height: 1.25em;
margin-top: -1.75em;
width: 1.25em; width: 1.25em;
top: ~"calc(50% - (1.25em / 2))";
} }
} }
@ -140,7 +143,7 @@
} }
// Little caret on active level-2 item // Little caret on active level-2 item
&.active:after { &.active::after {
.transform(rotate(45deg)); .transform(rotate(45deg));
background-color: @body-bg-color; background-color: @body-bg-color;
@ -150,7 +153,7 @@
height: 1.25em; height: 1.25em;
width: 1.25em; width: 1.25em;
position: absolute; position: absolute;
top: .5em; top: ~"calc(50% - (1.25em / 2))";
right: -.75em; right: -.75em;
z-index: 3; z-index: 3;
} }
@ -234,6 +237,8 @@
// Badge offset correction // Badge offset correction
#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge { #menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
margin-top: 0.2em; margin-top: 0.2em;
margin-left: auto;
order: 1; // It's the only positioned element in the flex container, hence 1 moves it to the right most position
} }
#menu .nav-level-2 > .badge-nav-item > a > .badge { #menu .nav-level-2 > .badge-nav-item > a > .badge {
@ -254,8 +259,9 @@
width: 14em; width: 14em;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
margin-top: -1px; // Align content with the menu item, not its border
&:after { &::after {
.transform(rotate(45deg)); .transform(rotate(45deg));
background-color: @body-bg-color; background-color: @body-bg-color;
@ -266,14 +272,18 @@
height: 1.1em; height: 1.1em;
width: 1.1em; width: 1.1em;
position: absolute; position: absolute;
top: 1em; top: ~"calc((@{nav-item-height} / 2) - (1.1em / 2))";
left: -.6em; left: -.6em;
z-index: -1; z-index: -1;
} }
&.bottom-up:after { &.bottom-up {
top: unset; --caretY: 100%;
bottom: 1em; margin-top: 1px;
&::after {
top: ~"calc(var(--caretY) - (@{nav-item-height} / 2) - (1.1em / 2))";
}
} }
> .nav-item { > .nav-item {
@ -303,7 +313,7 @@
} }
// Hide activity caret when displayed as flyout // Hide activity caret when displayed as flyout
&:after { &::after {
display: none; display: none;
} }
} }
@ -320,17 +330,13 @@
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
> .nav-level-2 { > .nav-level-2 {
// Position relative to parent
margin-left: 16em; margin-left: 16em;
margin-top: -3.167em;
} }
} }
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover { #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover {
> .nav-level-2 { > .nav-level-2 {
// Position relative to parent
margin-left: 4em; margin-left: 4em;
margin-top: -3.333em;
> .badge-nav-item { > .badge-nav-item {
display: flex; display: flex;
@ -508,8 +514,8 @@ html.no-js #toggle-sidebar {
display: none; display: none;
} }
#open-sidebar:before, #open-sidebar::before,
#close-sidebar:before { #close-sidebar::before {
width: 1.4em; width: 1.4em;
margin-right: 0; margin-right: 0;
} }

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

@ -319,23 +319,25 @@
$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(); const targetRect = $target[0].getBoundingClientRect();
$flyout.css({ const flyoutRect = $flyout[0].getBoundingClientRect();
bottom: 'auto',
top: targetHeight
});
var rect = $flyout[0].getBoundingClientRect(); const css = { "--caretY": "" };
if (targetRect.top + flyoutRect.height > window.innerHeight) {
css.top = targetRect.bottom - flyoutRect.height;
if (css.top < 10) {
css.top = 10;
// Not sure why -2, but it aligns the caret perfectly with the menu item
css["--caretY"] = `${targetRect.bottom - 10 - 2}px`;
}
if (rect.bottom > window.innerHeight) {
$flyout.addClass('bottom-up'); $flyout.addClass('bottom-up');
$flyout.css({
bottom: window.innerHeight - targetHeight,
top: 'auto'
});
} else { } else {
$flyout.removeClass('bottom-up'); $flyout.removeClass('bottom-up');
css.top = targetRect.top;
} }
$flyout.css(css);
}, delay); }, delay);
}; };