Improve behaviors around long messages display
On the conversations list, if the last message is too long, cut it with ellipsis (...) instead of going out of the screen. On the single conversation view, if the message in the bubble contains a word that is longer than a bubble, break it anyway instead of going out of the screen.
This commit is contained in:
@@ -154,6 +154,7 @@
|
||||
padding: 9px 12px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 3px -4px black;
|
||||
word-wrap: break-word;
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
|
@@ -179,10 +179,12 @@ img.emoji {
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
$avatar-size: 44px;
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
height: $avatar-size;
|
||||
width: $avatar-size;
|
||||
background: $grey_l url('/images/default.png') no-repeat center;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
@@ -276,9 +278,17 @@ img.emoji {
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
$left-margin: 8px;
|
||||
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin: 4px 0 0 8px;
|
||||
margin: 4px 0 0 $left-margin;
|
||||
width: calc(100% - #{$avatar-size} - #{$left-margin});
|
||||
|
||||
p {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
|
@@ -229,7 +229,11 @@ img.emoji {
|
||||
.contact .contact-details {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin: 4px 0 0 8px; }
|
||||
margin: 4px 0 0 8px;
|
||||
width: calc(100% - 44px - 8px); }
|
||||
.contact .contact-details p {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.contact .contact-name {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
@@ -480,7 +484,8 @@ input.search {
|
||||
max-width: calc(100% - 20px - 2 * 12px);
|
||||
padding: 9px 12px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 3px -4px black; }
|
||||
box-shadow: 0 3px 3px -4px black;
|
||||
word-wrap: break-word; }
|
||||
.message-detail .bubble::before, .message-detail .bubble::after,
|
||||
.message-list .bubble::before,
|
||||
.message-list .bubble::after {
|
||||
|
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user