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

Fix emoji toolbar styling for embedded mode

Browse Source
This commit is contained in:
JC Brand 2018-09-04 10:41:31 +02:00
parent adee252b28
commit bacf9391c3
3 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/converse.css
View File

@ -8001,6 +8001,9 @@ body.reset {
#conversejs.converse-overlayed .chat-head .chatbox-buttons {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
#conversejs.converse-embedded .emoji-picker,
#conversejs.converse-overlayed .emoji-picker {
height: 200px; }
#conversejs.converse-embedded .chatbox,
#conversejs.converse-overlayed .chatbox {
min-width: 250px !important;
@ -8009,15 +8012,6 @@ body.reset {
#conversejs.converse-overlayed .chatbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
min-width: 235px; }
#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
width: 100%; }
#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
float: left; }
#conversejs.converse-overlayed .flyout {
bottom: 1em; }
@ -8030,6 +8024,12 @@ body.reset {
max-height: 200px; }
#conversejs.converse-overlayed .emoji-picker {
height: 100px; }
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
min-width: 235px; }
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
width: 100%; }
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
float: left; }
@media (max-width: 767.98px) {
#conversejs.converse-overlayed > .row {

43
sass/_chatbox.scss
View File

@ -486,6 +486,10 @@
}
}
.emoji-picker {
height: $embedded-emoji-picker-height;
}
.chatbox {
min-width: $overlayed-chat-width!important;
width: $overlayed-chat-width;
@ -495,26 +499,6 @@
width: $overlayed-chat-width;
}
}
.chatbox {
form.sendXMPPMessage {
.chat-toolbar {
li {
.toolbar-menu {
min-width: 235px;
ul {
&.emoji-toolbar {
width: 100%;
.emoji-category {
float: left;
}
}
}
}
}
}
}
}
}
#conversejs.converse-overlayed {
@ -534,6 +518,25 @@
.emoji-picker {
height: $overlayed-emoji-picker-height;
}
.chatbox {
form.sendXMPPMessage {
.chat-toolbar {
li {
.toolbar-menu {
min-width: 235px;
ul {
&.emoji-toolbar {
width: 100%;
.emoji-category {
float: left;
}
}
}
}
}
}
}
}
}
@include media-breakpoint-down(sm) {

2
sass/_variables.scss
View File

@ -145,6 +145,8 @@ $line-height-huge: 27px !default;
$occupants-padding: 1em;
$embedded-emoji-picker-height: 200px !default;
$fullpage-chat-head-height: 62px !default;
$fullpage-chat-height: 100vh;
$fullpage-chat-width: 100%;