diff options
author | Joas Schilling <coding@schilljs.com> | 2019-05-10 14:37:39 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2019-05-13 14:45:25 +0300 |
commit | a54b5b688c23ffdeb65b41f585c4c13a5d21dc13 (patch) | |
tree | 8410aeae0a60b037abf0bf4370f64f7b2ce5a2fe /css | |
parent | ae4a56793d04a574e6f2ac7acc9e41e98267afd6 (diff) |
Better grouping of chat messages
* timestamp is shown after 5 messages or 30 seconds
* author is shown after 20 messages or 1 hour
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'css')
-rw-r--r-- | css/chatview.scss | 45 |
1 files changed, 23 insertions, 22 deletions
diff --git a/css/chatview.scss b/css/chatview.scss index 48906f188..1525df979 100644 --- a/css/chatview.scss +++ b/css/chatview.scss @@ -98,7 +98,7 @@ #chatView .comment { position: relative; - margin-bottom: 30px; + margin-bottom: 20px; word-wrap: break-word; overflow-wrap: break-word; } @@ -200,10 +200,26 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues * example, when it uses two lines due to a limited width. */ margin-left: auto; text-align: right; + display: inline-block; + vertical-align: top; +} + +#chatView .comment.systemMessage:not(.grouped) { + margin-top: -10px; } -#chatView .comments li .message { +#chatView .comment:not(.systemMessage):not(.grouped):not(.same-author) .date { + margin-top: -32px; +} + +#chatView .comment.grouped .date { + display: none; +} + +#chatView .comments:not(.systemMessage) li .message { padding-left: 40px; + display: inline-block; + width: calc(100% - 80px); } #chatView .comment .action { @@ -239,12 +255,14 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues box-shadow: 0 0 6px #f8b9b7; } -#chatView .comment.grouped .authorRow { +#chatView .comment.grouped .authorRow, +#chatView .comment.same-author .authorRow { display: none; } -#chatView .comment.grouped { - margin-top: -20px; +#chatView .comment.grouped, +#chatView .comment.same-author { + margin-top: -15px; } #chatView .comment.showDate { @@ -324,24 +342,7 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues color: var(--color-main-text); } -/* System messages have no author, so the author row only contains the date. - * Instead of showing the date on its own row and the message below it the - * message and the date are merged in a single row using flexboxes. */ -#chatView .comment.systemMessage { - display: flex; - flex-direction: row; -} - -#chatView .comment.systemMessage .authorRow { - order: 1; - flex-grow: 0; - width: auto; - padding-left: 10px; -} - #chatView .comment.systemMessage .message { - order: 0; - flex-grow: 1; color: var(--color-text-maxcontrast); } |