discourse/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
Joffrey JAFFEUX f9eae75972
DEV: improves keyboard sizing (#26372)
This commit is making the following changes:

- replaces `mobile-keyboard` initializer and `chat-vh` with a new template-less component: `d-vh`
- ensures body scroll lock is released when page/tab focus changes
- correctly locks body on chat channels and chat threads when composer is focused
- removes `bodyScrollFix` as we now use body scroll lock
- `onViewportResize` has been debounced to ensure it's not a bad performance vector
- adds a reverse option do body scroll lock, this is made to support reversed scroll areas (like chat channels and threads)

---------

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2024-03-27 08:50:32 +01:00

25 lines
633 B
SCSS

@mixin chat-height($inset: 0px) {
// desktop and mobile
// -1px is for the bottom border of the chat navbar
$base-height: calc(
var(--composer-vh, 1vh) * 100 - var(--header-offset, 0px) - 1px - $inset
);
height: calc($base-height - var(--composer-height, 0px));
// mobile with keyboard opened
html.keyboard-visible & {
height: calc($base-height);
}
// ipad
html.footer-nav-ipad & {
height: calc($base-height - var(--composer-height, 0px));
}
// PWA/HUB without keyboard
html.footer-nav-visible:not(.keyboard-visible) & {
height: calc($base-height - var(--footer-nav-height, 0px));
}
}