Skip to content

C
converse.js
Commit 8ffd9e24 authored by JC Brand's avatar JC Brand
Browse files
Options

css: fix alignment issues for messages with emojis in converse

parent c69bb0d0
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 43 deletions
css/converse.css
View file @ 8ffd9e24
......@@ -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%; }
......
css/inverse.css
View file @ 8ffd9e24
......@@ -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;
......
sass/_chatbox.scss
View file @ 8ffd9e24
......@@ -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;
}
}
}
......
sass/converse/_chatbox.scss
View file @ 8ffd9e24
......@@ -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 {
......
sass/converse/_variables.scss
View file @ 8ffd9e24
......@@ -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;
......
sass/inverse/_chatbox.scss
View file @ 8ffd9e24
......@@ -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;
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7