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

25
css/inverse.css
View File

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

36
sass/_chatbox.scss
View File

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

17
sass/converse/_chatbox.scss
View File

@ -12,6 +12,23 @@
border-top-right-radius: 0; 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 { .chatbox {
form.sendXMPPMessage { form.sendXMPPMessage {
.chat-toolbar { .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-small: 14px !default;
$line-height: 16px !default; $line-height: 16px !default;
$line-height-large: 20px !default;
$controlbox-width: 200px !default; $controlbox-width: 200px !default;
$chat-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; border-top-right-radius: $chatbox-border-radius;
.chat-message { .chat-message {
line-height: $line-height;
font-size: $font-size-small; font-size: $font-size-small;
margin: 0.5em 0; margin: 0.5em 0;
.chat-msg-author { .chat-msg-author {
@ -50,9 +51,6 @@
} }
.chat-msg-content { .chat-msg-content {
line-height: $line-height; line-height: $line-height;
.emojione {
margin-bottom: -6px;
}
} }
} }
} }