Fix: increase chat height on small screens, try to better detect the device viewport size and orientation.

This commit is contained in:
John Livingston 2024-08-07 00:09:55 +02:00
parent b8db486410
commit ef1b49f291
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 17 additions and 3 deletions

View File

@ -20,6 +20,7 @@ TODO: actions related to #144 and #145 must be added in the occupant list (waiti
* Updated mod_muc_moderation to upstream. * Updated mod_muc_moderation to upstream.
* Fix new task ordering. * Fix new task ordering.
* Fix: clicking on the current user nickname in message history was failing to open the profile modal. * Fix: clicking on the current user nickname in message history was failing to open the profile modal.
* Fix: increase chat height on small screens, try to better detect the device viewport size and orientation.
## 10.3.3 ## 10.3.3

View File

@ -18,16 +18,29 @@
/* Note: livechat-viewer-mode-content (the form where anonymous users can /* Note: livechat-viewer-mode-content (the form where anonymous users can
choose nickname or log in with external account), can be something like choose nickname or log in with external account), can be something like
~180px height (at time of writing). ~180px height (at time of writing).
We must ensure that the 200px limit for converse-muc and converse-root is We must ensure that the px height limit for converse-muc and converse-root is
always higher than livechat-viewer-mode-content max size. always higher than livechat-viewer-mode-content max size.
Note: We also must ensure that when the user has choosen its nickname, and there is an
ongoing poll, the user can see the chat when the poll is folded.
*/ */
#peertube-plugin-livechat-container converse-root { #peertube-plugin-livechat-container converse-root {
display: block; display: block;
border: 1px solid black; border: 1px solid black;
min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport. min-height: max(30vh, 300px); // Always at least 200px, and ideally at least 30% of viewport.
height: 100%; height: 100%;
converse-muc { converse-muc {
min-height: max(30vh, 200px); min-height: max(30vh, 300px);
}
@media screen and (orientation: portrait) and (max-width: 767px) {
/* On small screen, and when portrait mode, we are givint the chat more vertical space.
It should go under the video.
*/
min-height: max(50vh, 300px);
converse-muc {
min-height: max(50vh, 300px);
}
} }
} }