Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix width issue for chatrooms in responsive/mobile view.

Browse Source
This commit is contained in:
JC Brand 2016-04-01 08:12:06 +00:00
parent a9a9368439
commit 9c78883b2f
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/converse.css
View File

@ -1883,13 +1883,15 @@
width: 300px; } width: 300px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#conversejs .chatroom { #conversejs .chatroom {
width: 100%; } width: 100%; } }
#conversejs .chatroom .box-flyout {
min-width: 100%;
width: 100%; } }
#conversejs .chatroom .box-flyout { #conversejs .chatroom .box-flyout {
min-width: 300px; min-width: 300px;
width: 300px; } width: 300px; }
@media screen and (max-width: 480px) {
#conversejs .chatroom .box-flyout {
height: 400px;
width: 100%;
height: 99vh; } }
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
height: 289px; height: 289px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;

9
sass/_chatrooms.scss
View File

@ -19,14 +19,15 @@
width: $chatroom-width; width: $chatroom-width;
@media screen and (max-width: $mobile-landscape-length) { @media screen and (max-width: $mobile-landscape-length) {
width: $mobile-chat-width; width: $mobile-chat-width;
.box-flyout {
min-width: $mobile-chat-width;
width: $mobile-chat-width;
}
} }
.box-flyout { .box-flyout {
min-width: $chatroom-width; min-width: $chatroom-width;
width: $chatroom-width; width: $chatroom-width;
@media screen and (max-width: $mobile-landscape-length) {
height: $mobile-chat-height;
width: $mobile-chat-width;
height: 99vh;
}
.chatroom-body { .chatroom-body {
height: 289px; height: 289px;
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);