github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 20:02:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: moves chat height computation to a mixin (#21555)

Browse Source 
This commit also removes safe-area-inset-bottom when keyboard is displayed to avoid having a taller than needed space between composer and replying indicator.
This commit is contained in:
Joffrey JAFFEUX 2023-05-15 15:53:18 +02:00 committed by GitHub
parent 35f29bd25b
commit 4b15ba405c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
plugins/chat/assets/stylesheets/common/chat-channel.scss
View File

@ -7,21 +7,7 @@
grid-area: main;
width: 100%;
min-width: 250px;
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
.footer-nav-ipad & {
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
}
@include chat-height;
.open-drawer-btn,
.open-thread-list-btn {

39
plugins/chat/assets/stylesheets/common/chat-height-mixin.scss Normal file
View File

@ -0,0 +1,39 @@
@mixin chat-height {
// desktop and mobile
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
// mobile with keyboard opened
.keyboard-visible & {
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px)
);
}
// ipad
.footer-nav-ipad & {
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
}
// ipad with keyboard opened
.keyboard-visible & {
.footer-nav-ipad & {
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px)
);
}
}
}

17
plugins/chat/assets/stylesheets/common/chat-thread.scss
View File

@ -2,22 +2,7 @@
display: flex;
flex-direction: column;
position: relative;
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
.footer-nav-ipad & {
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
}
@include chat-height;
&__header {
height: var(--chat-header-offset);

17
plugins/chat/assets/stylesheets/common/chat-threads-list.scss
View File

@ -2,22 +2,7 @@
display: flex;
flex-direction: column;
position: relative;
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
.footer-nav-ipad & {
height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) -
var(--chat-direct-message-creator-height, 0px) -
env(safe-area-inset-bottom)
);
}
@include chat-height;
&__items {
overflow-y: scroll;

1
plugins/chat/assets/stylesheets/common/index.scss
View File

@ -1,3 +1,4 @@
@import "chat-height-mixin";
@import "base-common";
@import "sidebar-extensions";
@import "chat-browse";