Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Chat Sizing on Mobile (#25543) 

* UX: increase font-size of last message + decrease emoji size

* UX: decrease size of username emoji

* UX: Mobile chat index cleanup

* UX: decrease size of chat-channel-title in thead list
This commit is contained in:
chapoi 2024-02-02 15:29:07 +02:00 committed by GitHub
parent bb57b31a4d
commit d7cd09d4ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,8 +11,7 @@
}
.emoji {
height: 1.2em;
vertical-align: text-bottom;
width: 1.2em;
height: 1em;
width: 1em;
}
}

9
plugins/chat/assets/stylesheets/common/chat-user-threads.scss
View File

@ -25,6 +25,15 @@
}
}
.chat-channel-icon {
font-size: var(--font-down-1-rem);
}
.chat-channel-name {
font-size: var(--font-down-1-rem);
color: var(--primary-high);
}
.chat-channel-title__name {
color: var(--primary-high);
font-size: var(--font-down-1);

6
plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
View File

@ -114,8 +114,12 @@
&__last-message {
@include ellipsis;
grid-area: msg;
font-size: var(--font-down-1-rem);
color: var(--primary-high);
.emoji {
width: 1em;
height: 1em;
}
}
}

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

@ -1,75 +1,10 @@
@import "common/foundation/mixins";
.full-page-chat {
.channels-list {
padding-bottom: 6rem;
box-sizing: border-box;
.channels-list-container {
background: var(--secondary);
.channels-list-container {
overflow: hidden;
}
.chat-channel-divider {
font-size: var(--font-up-1);
&:first-of-type {
padding-top: 1rem;
}
.channel-title {
color: var(--primary);
font-size: var(--font-down-1);
}
}
.chat-channel-row {
&.--threads {
color: var(--primary);
padding-inline: 1.5rem;
.chat-channel-name {
font-size: var(--font-up-1-rem);
border: 0;
.chat-channel-title {
gap: 0.5rem;
}
.c-unread-indicator {
width: 8px;
height: 8px;
}
}
}
.chat-user-avatar {
+ .chat-channel-title__usernames {
margin-left: 1rem;
}
}
.chat-channel-title {
&__users-count {
font-size: var(--font-up-2);
& + .chat-channel-title__name {
margin-left: 1rem;
}
}
&__name {
margin-left: 0.75em;
font-size: var(--font-up-1);
}
&__category-badge {
font-size: var(--font-up-1);
}
&__user-status-message {
flex-shrink: 3;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}