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

css: fix alignment issues for messages with emojis in converse

Browse Source
This commit is contained in:
JC Brand 2017-07-18 08:56:25 +02:00
parent c69bb0d04f
commit 8ffd9e24a3
6 changed files with 75 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/converse.css
View File

@ -1583,25 +1583,27 @@
font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
overflow: auto;
margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
overflow: auto; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #E77051; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
max-width: 100%;
word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; }
@ -1857,6 +1859,19 @@
#conversejs .chat-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
margin: 0.3em;
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
width: 100%; }

25
css/inverse.css
View File

@ -1629,25 +1629,27 @@ body {
font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
overflow: auto;
margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
overflow: auto; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #E77051; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
max-width: 100%;
word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; }
@ -1925,14 +1927,13 @@ body {
border-top-left-radius: 7px;
border-top-right-radius: 7px; }
#conversejs .chatbox .chat-body .chat-message {
line-height: 22px;
font-size: 14px;
margin: 0.5em 0; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 22px; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 22px; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; }
#conversejs .chatbox .chat-content {
padding: 0 1em 1em 1em;
border-top-left-radius: 7px;

36
sass/_chatbox.scss
View File

@ -158,24 +158,24 @@
}
.chat-message {
overflow: auto; // Ensures that content stays inside
margin: 0.3em;
span {
&.chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden;
}
&.chat-msg-them {
color: $message-them-color;
}
&.chat-msg-me {
color: $link-color;
}
&.chat-msg-content {
max-width: 100%;
word-wrap: break-word;
.chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden;
}
.chat-msg-them {
color: $message-them-color;
}
.chat-msg-me {
color: $link-color;
}
.chat-msg-content {
max-width: 100%;
word-wrap: break-word;
.emojione {
margin-bottom: -6px;
}
}
}

17
sass/converse/_chatbox.scss
View File

@ -12,6 +12,23 @@
border-top-right-radius: 0;
}
}
.chatbox {
.chat-body {
.chat-message {
margin: 0.3em;
line-height: $line-height-large;
.chat-msg-author {
line-height: $line-height-large;
}
.chat-msg-content {
line-height: $line-height-large;
.emojione {
margin-bottom: -5px;
}
}
}
}
}
.chatbox {
form.sendXMPPMessage {
.chat-toolbar {

1
sass/converse/_variables.scss
View File

@ -104,6 +104,7 @@ $emoji-picker-height: 100px !default;
$line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$controlbox-width: 200px !default;
$chat-width: 200px !default;

4
sass/inverse/_chatbox.scss
View File

@ -43,6 +43,7 @@
border-top-right-radius: $chatbox-border-radius;
.chat-message {
line-height: $line-height;
font-size: $font-size-small;
margin: 0.5em 0;
.chat-msg-author {
@ -50,9 +51,6 @@
}
.chat-msg-content {
line-height: $line-height;
.emojione {
margin-bottom: -6px;
}
}
}
}