github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 08:53:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Chat index tweaks (#18905)

Browse Source 
- rounded avatar
- cut off avatar
- no index background
This commit is contained in:
chapoi 2022-11-07 12:26:46 +01:00 committed by GitHub
parent e8570b5cc9
commit 091d83af60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/chat/assets/stylesheets/common/chat-channel-title.scss
View File

@ -58,8 +58,11 @@
.chat-channel-title__users-count { .chat-channel-title__users-count {
display: flex; display: flex;
border-radius: 3px; border-radius: 50%;
background: rgba(var(--primary-rgb), 0.1); background: rgba(var(--primary-rgb), 0.1);
width: 22px;
height: 22px;
box-sizing: border-box;
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
font-size: var(--font-down-1); font-size: var(--font-down-1);

18
plugins/chat/assets/stylesheets/mobile/chat-index.scss
View File

@ -5,7 +5,6 @@
overflow-y: overlay; overflow-y: overlay;
padding-bottom: 6rem; padding-bottom: 6rem;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--primary-very-low);
.direct-message-channels { .direct-message-channels {
.chat-channel-title { .chat-channel-title {
@ -27,21 +26,17 @@
margin: 0 1.5rem; margin: 0 1.5rem;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
border-bottom: 1px solid var(--primary-low);
&:not(:last-child) {
border-bottom: 1px solid var(--primary-low);
}
} }
.chat-channel-divider { .chat-channel-divider {
background-color: var(--secondary); background-color: var(--secondary);
margin-top: 4rem; padding: 2.5rem 1.5rem 0.5rem 1.5rem;
padding: 1rem 1.5rem;
font-size: var(--font-up-1); font-size: var(--font-up-1);
&:first-of-type { &:first-of-type {
margin-top: 0; padding-top: 1rem;
padding-bottom: 0.5rem; //visual compensation padding-bottom: 0; //visual compensation
} }
.channel-title { .channel-title {
@ -54,6 +49,10 @@
background: var(--secondary); background: var(--secondary);
} }
.chat-user-avatar-container {
padding-left: 1px; //for is-online boxshadow effect
}
.chat-user-avatar { .chat-user-avatar {
img { img {
width: calc(var(--chat-mobile-avatar-size) - 2px); width: calc(var(--chat-mobile-avatar-size) - 2px);
@ -75,6 +74,7 @@
height: var(--chat-mobile-avatar-size); height: var(--chat-mobile-avatar-size);
padding: 0; padding: 0;
font-size: var(--font-up-2); font-size: var(--font-up-2);
font-weight: normal;
justify-content: center; justify-content: center;
& + .chat-channel-title__name { & + .chat-channel-title__name {

7
plugins/chat/assets/stylesheets/mobile/mobile.scss
View File

@ -63,8 +63,6 @@ body.has-full-page-chat {
} }
.channels-list .chat-channel-row { .channels-list .chat-channel-row {
padding: 0 0.5em 0 0.25em;
.category-chat-private .d-icon { .category-chat-private .d-icon {
background-color: var(--secondary); background-color: var(--secondary);
} }
@ -81,11 +79,6 @@ body.has-full-page-chat {
padding-left: 1em; padding-left: 1em;
} }
.channels-list .chat-channel-divider {
padding: 0.25em 0.5em 0.25em;
margin-top: 1em;
}
.sidebar-container .channels-list .chat-channel-row { .sidebar-container .channels-list .chat-channel-row {
padding: 0.5em; padding: 0.5em;
} }