2d746d2a1e
1. Add a new `view_mode` value: `embedded`. This value is used to determine wether the `converse-muc-embedded` plugin is active or not. 2. Remove the need for the #converse-embedded-chat element. Instead we reuse the #conversejs element and embed inside that. 3. Removed the need to manually blacklist core plugins This is now done automatically if `view_mode` is set to `embedded`. Perhaps eventually we don't blacklist at all and instead use the `enable` plugin method. For some that probably won't work, like `converse-chatview`, which we still need to be active.
91 lines
2.1 KiB
SCSS
91 lines
2.1 KiB
SCSS
@import "bourbon";
|
|
@import "converse/variables";
|
|
#conversejs.converse-embedded {
|
|
|
|
@include box-sizing(border-box);
|
|
*, *:before, *:after {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
bottom: auto;
|
|
right: auto;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
form {
|
|
&.pure-form.converse-centered-form {
|
|
position: absolute;
|
|
top: 30%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
.chatroom {
|
|
width: auto;
|
|
}
|
|
.flyout {
|
|
bottom: auto;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
.chatbox {
|
|
float: none;
|
|
|
|
.box-flyout {
|
|
box-shadow: none;
|
|
}
|
|
.chat-title {
|
|
padding: 0.3em;
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
.chatbox-btn {
|
|
display: none;
|
|
}
|
|
.chatroom {
|
|
.box-flyout {
|
|
min-width: auto;
|
|
width: 100%;
|
|
height: 55vh;
|
|
.chat-body {
|
|
@include calc(height, '100% - #{$chat-head-height}');
|
|
}
|
|
.occupants-heading {
|
|
font-size: 120%;
|
|
}
|
|
.chat-content {
|
|
height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
|
|
.chat-message {
|
|
margin: 0.5em;
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
.sendXMPPMessage {
|
|
.chat-textarea {
|
|
padding: 0.5em;
|
|
font-size: 110%;
|
|
}
|
|
}
|
|
.chatroom-body {
|
|
.chatroom-form-container {
|
|
font-size: 180%;
|
|
float: left;
|
|
height: 100%;
|
|
position: relative;
|
|
input {
|
|
font-size: 60%;
|
|
}
|
|
}
|
|
}
|
|
.occupants {
|
|
.occupant-list {
|
|
padding-left: 0.3em;
|
|
li.occupant {
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|