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

Updates after testing on IE edge.

Browse Source
This commit is contained in:
JC Brand 2015-11-03 16:42:04 +00:00
parent 9dafaa75e9
commit 984c74b516
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
converse.js
View File

@ -2917,11 +2917,13 @@
if (!this.model.get('hidden_occupants')) { if (!this.model.get('hidden_occupants')) {
this.model.save({hidden_occupants: true}); this.model.save({hidden_occupants: true});
$el.removeClass('icon-hide-users').addClass('icon-show-users'); $el.removeClass('icon-hide-users').addClass('icon-show-users');
this.$('div.occupants').addClass('hidden'); this.$('.occupants').addClass('hidden');
this.$('.chat-area').addClass('full');
this.scrollDown(); this.scrollDown();
} else { } else {
this.model.save({hidden_occupants: false}); this.model.save({hidden_occupants: false});
$el.removeClass('icon-show-users').addClass('icon-hide-users'); $el.removeClass('icon-show-users').addClass('icon-hide-users');
this.$('.chat-area').removeClass('full');
this.$('div.occupants').removeClass('hidden'); this.$('div.occupants').removeClass('hidden');
this.scrollDown(); this.scrollDown();
} }

21
css/converse.css
View File

@ -1685,7 +1685,7 @@
height: 289px; height: 289px;
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); height: calc(100% - 55px);
overflow-y: scroll; overflow-y: auto;
overflow-x: hidden; } overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane label { #conversejs #controlbox .controlbox-pane label {
font-size: 14px; font-size: 14px;
@ -1878,29 +1878,28 @@
height: calc(100% - 55px); height: calc(100% - 55px);
background-color: white; background-color: white;
border-top: 0; border-top: 0;
display: table;
table-layout: fixed;
width: 100%; } width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area { #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
word-wrap: break-word; word-wrap: break-word;
display: table-cell;
height: 100%; height: 100%;
max-width: 70%;
float: left;
min-width: 200px; } min-width: 200px; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
padding: 0 0.5em 0 0.5em; } padding: 0 0.5em 0 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; } font-weight: bold; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room { #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
color: #1A9707; } color: #1A9707; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants { #conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: table-cell;
vertical-align: top; vertical-align: top;
background-color: white; background-color: white;
overflow-y: auto; overflow: hidden;
overflow-x: hidden;
border-left: 1px solid #818479; border-left: 1px solid #818479;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
width: 100px; min-width: 30%;
height: 100%; } height: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants.hidden { #conversejs .chatroom .box-flyout .chatroom-body .occupants.hidden {
display: none; } display: none; }
@ -1908,8 +1907,10 @@
padding: 0.3em; padding: 0.3em;
font-weight: bold; } font-weight: bold; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list {
height: 100%; height: 85%;
overflow-y: scroll; height: calc(100% - 70px);
overflow-x: hidden;
overflow-y: auto;
list-style: none; } list-style: none; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li {
cursor: default; cursor: default;

20
sass/_chatrooms.scss
View File

@ -33,19 +33,21 @@
@include calc(height, '100% - #{$chat-head-height}'); @include calc(height, '100% - #{$chat-head-height}');
background-color: white; background-color: white;
border-top: 0; border-top: 0;
display: table;
table-layout: fixed;
width: 100%; width: 100%;
.chat-area { .chat-area {
word-wrap: break-word; word-wrap: break-word;
display: table-cell;
height: 100%; height: 100%;
max-width: 70%;
float: left;
min-width: $chat-width; min-width: $chat-width;
.chat-content { .chat-content {
// There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here. // There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
padding: 0 0.5em 0 0.5em; padding: 0 0.5em 0 0.5em;
} }
&.full {
max-width: 100%;
}
} }
.mentioned { .mentioned {
font-weight: bold; font-weight: bold;
@ -54,14 +56,12 @@
color: $message-them-color; color: $message-them-color;
} }
.occupants { .occupants {
display: table-cell;
vertical-align: top; vertical-align: top;
background-color: white; background-color: white;
overflow-y: auto; overflow: hidden;
overflow-x: hidden;
border-left: 1px solid $text-color; border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
width: 100px; min-width: 30%;
height: 100%; height: 100%;
&.hidden { &.hidden {
display: none; display: none;
@ -71,8 +71,10 @@
font-weight: bold; font-weight: bold;
} }
.occupant-list { .occupant-list {
height: 100%; height: 85%;
overflow-y: scroll; height: calc(100% - 70px);
overflow-x: hidden;
overflow-y: auto;
list-style: none; list-style: none;
li { li {
cursor: default; cursor: default;

2
sass/_controlbox.scss
View File

@ -305,7 +305,7 @@
width: 100%; width: 100%;
height: 289px; height: 289px;
@include calc(height, '100% - #{$chat-head-height}'); @include calc(height, '100% - #{$chat-head-height}');
overflow-y: scroll; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
label { label {
font-size: $font-size; font-size: $font-size;