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

Make sure chats cover whole page in responsive mode

Browse Source
This commit is contained in:
JC Brand 2018-06-04 21:42:21 +02:00
parent 78d6d493d6
commit ab6a4560e2
3 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/converse.css
View File

@ -8044,10 +8044,11 @@ body.reset {
width: 100vw !important;
height: 100vh !important; }
#conversejs:not(.converse-embedded) .converse-chatboxes #controlbox {
order: 0; }
width: 100vw !important; }
#conversejs:not(.converse-embedded) .converse-chatboxes #controlbox .box-flyout {
width: 100vw !important;
height: 100vh !important; }
height: 100vh !important;
margin-left: 30px; }
#conversejs:not(.converse-embedded) .converse-chatboxes #controlbox .sidebar {
display: block; }
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
@ -8731,24 +8732,17 @@ body.reset {
max-width: 25%; }
@media (max-width: 767.98px) {
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-navback,
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-navback,
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-navback,
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-navback {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title,
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-title,
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-title,
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-buttons,
#conversejs.converse-overlayed .chatroom .box-flyout .chatbox-buttons,
#conversejs.converse-embedded .chatroom .box-flyout .chatbox-buttons,
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-buttons {
flex: 0 0 25%;
max-width: 25%; } }
#conversejs:not(.converse-embedded) .chatroom {
width: 100vw !important; }
#conversejs:not(.converse-embedded) .chatroom .box-flyout .chatbox-navback {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
#conversejs:not(.converse-embedded) .chatroom .box-flyout .chatbox-title {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
#conversejs:not(.converse-embedded) .chatroom .box-flyout .chatbox-buttons {
flex: 0 0 25%;
max-width: 25%; } }
#conversejs.converse-fullscreen .chatroom .box-flyout,
#conversejs.converse-mobile .chatroom .box-flyout {
background-color: #E77051;

7
sass/_chatrooms.scss
View File

@ -339,11 +339,10 @@
}
@include media-breakpoint-down(sm) {
#conversejs.converse-mobile,
#conversejs.converse-overlayed,
#conversejs.converse-embedded,
#conversejs.converse-fullscreen {
#conversejs:not(.converse-embedded) {
.chatroom {
width: 100vw !important;
.box-flyout {
.chatbox-navback {
@include make-col(2);

3
sass/_controlbox.scss
View File

@ -368,10 +368,11 @@
}
#controlbox {
order: 0;
width: 100vw !important;
.box-flyout {
width: 100vw !important;
height: 100vh !important;
margin-left: 30px;
}
.sidebar {
display: block;