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

CSS: Avoid scrolled overflows for long messages and long usernames

Browse Source
This commit is contained in:
JC Brand 2019-01-10 14:07:36 +01:00
parent 58c29ea26b
commit 4f8cb48fb3
3 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/converse.css
View File

@ -9321,6 +9321,8 @@ readers do not read off random characters that represent icons */
--message-text-color: #555; --message-text-color: #555;
--message-receipt-color: #3AA569; --message-receipt-color: #3AA569;
--save-button-color: #3AA569; --save-button-color: #3AA569;
--message-avatar-width: 36px;
--message-avatar-height: 36px;
--chat-textarea-color: #666; --chat-textarea-color: #666;
--chat-textarea-background-color: white; --chat-textarea-background-color: white;
--chat-textarea-height: 60px; --chat-textarea-height: 60px;
@ -11837,7 +11839,8 @@ body.converse-fullscreen {
font-style: italic; } font-style: italic; }
#conversejs .message.chat-msg { #conversejs .message.chat-msg {
display: flex; display: inline-flex;
width: 100%;
flex-direction: row; flex-direction: row;
overflow: auto; overflow: auto;
padding: 0.25rem 1rem; } padding: 0.25rem 1rem; }
@ -11870,7 +11873,7 @@ body.converse-fullscreen {
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; } width: calc(100% - var(--message-avatar-width)); }
#conversejs .message.chat-msg .chat-msg__content--action { #conversejs .message.chat-msg .chat-msg__content--action {
margin-left: 0; } margin-left: 0; }
#conversejs .message.chat-msg .chat-msg__body { #conversejs .message.chat-msg .chat-msg__body {
@ -11879,9 +11882,10 @@ body.converse-fullscreen {
justify-content: space-between; justify-content: space-between;
width: 100%; } width: 100%; }
#conversejs .message.chat-msg .chat-msg__message { #conversejs .message.chat-msg .chat-msg__message {
display: flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: 100%; } width: 100%;
overflow-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg__edit-modal { #conversejs .message.chat-msg .chat-msg__edit-modal {
cursor: pointer; cursor: pointer;
padding-right: 0.5em; } padding-right: 0.5em; }
@ -11923,16 +11927,16 @@ body.converse-fullscreen {
#conversejs .message.chat-msg .chat-msg__avatar { #conversejs .message.chat-msg .chat-msg__avatar {
margin-top: 0.5em; margin-top: 0.5em;
vertical-align: middle; vertical-align: middle;
height: 36px; height: var(--message-avatar-height);
width: 36px; width: var(--message-avatar-width);
min-height: 36px; min-height: var(--message-avatar-height);
min-width: 36px; } min-width: var(--message-avatar-width); }
#conversejs .message.chat-msg .chat-msg__heading { #conversejs .message.chat-msg .chat-msg__heading {
width: 100%; width: 100%;
margin-top: 0.5em; margin-top: 0.5em;
padding-right: 0.25rem; padding-right: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
display: block; } display: flex; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author { #conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

18
sass/_messages.scss
View File

@ -68,7 +68,8 @@
} }
&.chat-msg { &.chat-msg {
display: flex; display: inline-flex;
width: 100%;
flex-direction: row; flex-direction: row;
overflow: auto; // Ensures that content stays inside overflow: auto; // Ensures that content stays inside
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
@ -118,7 +119,7 @@
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; width: calc(100% - var(--message-avatar-width));
} }
.chat-msg__content--action { .chat-msg__content--action {
margin-left: 0; margin-left: 0;
@ -132,9 +133,10 @@
} }
.chat-msg__message { .chat-msg__message {
display: flex; display: inline-flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow-wrap: break-word;
} }
.chat-msg__edit-modal { .chat-msg__edit-modal {
@ -199,10 +201,10 @@
.chat-msg__avatar { .chat-msg__avatar {
margin-top: 0.5em; margin-top: 0.5em;
vertical-align: middle; vertical-align: middle;
height: 36px; height: var(--message-avatar-height);
width: 36px; width: var(--message-avatar-width);
min-height: 36px; min-height: var(--message-avatar-height);
min-width: 36px; min-width: var(--message-avatar-width);
} }
.chat-msg__heading { .chat-msg__heading {
@ -210,7 +212,7 @@
margin-top: 0.5em; margin-top: 0.5em;
padding-right: 0.25rem; padding-right: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
display: block; display: flex;
.chat-msg__author { .chat-msg__author {
overflow: hidden; overflow: hidden;

3
sass/_variables.scss
View File

@ -29,6 +29,9 @@ $mobile_portrait_length: 480px !default;
--message-receipt-color: #3AA569; // $green --message-receipt-color: #3AA569; // $green
--save-button-color: #3AA569; // $green --save-button-color: #3AA569; // $green
--message-avatar-width: 36px;
--message-avatar-height: 36px;
--chat-textarea-color: #666; --chat-textarea-color: #666;
--chat-textarea-background-color: white; --chat-textarea-background-color: white;
--chat-textarea-height: 60px; --chat-textarea-height: 60px;