Prevent tooltips and dropdowns from overflowing on y axis

This commit is contained in:
Alice Gaudon 2020-09-16 12:38:33 +02:00
parent a3a19da038
commit 5f2215f491
3 changed files with 36 additions and 1 deletions

View File

@ -2,6 +2,7 @@ import './external_links';
import './message_icons'; import './message_icons';
import './forms'; import './forms';
import './copyable_text'; import './copyable_text';
import './tooltips-and-dropdowns';
import './main_menu'; import './main_menu';
import './font-awesome'; import './font-awesome';

View File

@ -0,0 +1,30 @@
document.addEventListener('DOMContentLoaded', () => {
window.updateTooltips = () => {
console.debug('Update tooltips');
const elements = document.querySelectorAll('.tip, .dropdown');
// Calculate max potential displacement
let max = 0;
elements.forEach(el => {
const box = el.getBoundingClientRect();
if (max < box.height) max = box.height;
});
// Prevent displacement
elements.forEach(el => {
if (!el.tooltipSetup) {
el.tooltipSetup = true;
const box = el.getBoundingClientRect();
if (box.bottom >= document.body.clientHeight - (max + 32)) {
el.classList.add('top');
}
}
});
};
window.addEventListener('popstate', () => {
updateTooltips();
});
window.requestAnimationFrame(() => {
updateTooltips();
});
});

View File

@ -49,6 +49,11 @@ body {
text-transform: initial; text-transform: initial;
font-weight: initial; font-weight: initial;
&.top {
top: auto;
bottom: calc(100% + 8px);
}
} }
&:hover, &:active { &:hover, &:active {
@ -157,7 +162,6 @@ body > header {
z-index: -1; z-index: -1;
top: 100%; top: 100%;
right: 0; right: 0;
display: none;
white-space: nowrap; white-space: nowrap;
background: $headerBackground; background: $headerBackground;