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

emoji: Fix alignment issues of messages containing emojis

Browse Source
This commit is contained in:
JC Brand 2017-07-17 14:36:27 +02:00
parent e4ebcc8f71
commit 1bcb33ab58
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/inverse.css
View File

@ -1263,7 +1263,7 @@
transform: rotate(359deg); } } transform: rotate(359deg); } }
#converse-embedded-chat .emojione, #converse-embedded-chat .emojione,
#conversejs .emojione { #conversejs .emojione {
height: 24px; } height: 22px; }
#converse-embedded-chat .spinner, #converse-embedded-chat .spinner,
#conversejs .spinner { #conversejs .spinner {
-webkit-animation: spin 2s infinite, linear; -webkit-animation: spin 2s infinite, linear;
@ -1819,7 +1819,7 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li {
height: 34px; height: 32px;
padding: 5px; padding: 5px;
z-index: 98; } z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker li.emoji a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-skintone-picker li.emoji a,
@ -1921,8 +1921,13 @@ body {
border-top-right-radius: 7px; } border-top-right-radius: 7px; }
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
font-size: 14px; font-size: 14px;
line-height: 20px;
margin: 0.5em 0; } 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 { #conversejs .chatbox .chat-content {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
border-top-left-radius: 7px; border-top-left-radius: 7px;

10
sass/inverse/_chatbox.scss
View File

@ -44,8 +44,16 @@
.chat-message { .chat-message {
font-size: $font-size-small; font-size: $font-size-small;
line-height: $line-height-small;
margin: 0.5em 0; margin: 0.5em 0;
.chat-msg-author {
line-height: $line-height;
}
.chat-msg-content {
line-height: $line-height;
.emojione {
margin-bottom: -6px;
}
}
} }
} }
.chat-content { .chat-content {

5
sass/inverse/_variables.scss
View File

@ -52,7 +52,8 @@ $send-button-margin: 3px !default;
$message-them-color: $red !default; $message-them-color: $red !default;
$emoji_height : 24px !default; $emoji_height: 22px !default;
$emoji-picker-height: 150px !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$roster-item-height: 30px !default; $roster-item-height: 30px !default;
@ -103,8 +104,6 @@ $legend-font-size: 18px !default;
$toolbar-height: 29px !default; $toolbar-height: 29px !default;
$toolbar-color: $greenish-white !default; $toolbar-color: $greenish-white !default;
$emoji-picker-height: 150px !default;
$line-height-small: 20px !default; $line-height-small: 20px !default;
$line-height: 22px !default; $line-height: 22px !default;