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

UX: message creator spacing and sizing on mobile + fix text wrapping (#22508) 

* UX: mobile more spacing and bigger

* UX: align text better

* UX: ellipsis and pill bg colour

* UX: disabled-chat msg styling
This commit is contained in:
chapoi 2023-07-10 12:27:26 +02:00 committed by GitHub
parent 9a1a3906c4
commit c2b98802ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
plugins/chat/assets/stylesheets/common/chat-message-creator.scss
View File

@ -65,11 +65,11 @@
}
.action-indicator {
visibility: hidden;
display: none;
margin-left: auto;
white-space: nowrap;
font-size: var(--font-down-1);
color: var(--secondary-medium);
display: flex;
align-items: center;
padding-right: 0.25rem;
@ -80,7 +80,7 @@
&.-active {
.action-indicator {
visibility: visible;
display: flex;
}
}
@ -100,6 +100,7 @@
.chat-channel-title__name,
.chat-user-display-name {
@include ellipsis;
padding-left: 0.5rem;
}
@ -128,6 +129,8 @@
}
}
.disabled-text {
margin-left: auto;
white-space: nowrap;
padding-left: 0.25rem;
}
}
@ -138,6 +141,7 @@
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
&-container {
display: flex;
@ -209,9 +213,9 @@
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
background: var(--primary-low);
background: var(--primary-very-low);
border-radius: 5px;
border: 1px solid var(--primary-very-low);
border: 1px solid var(--primary-low);
height: calc(var(--row-height) - 6);
padding-inline: 0.25rem;
margin: 3px;
@ -253,6 +257,7 @@
display: flex;
align-items: center;
height: var(--row-height);
margin-left: 0.5rem;
}
}

34
plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss
View File

@ -3,4 +3,38 @@
width: 100%;
max-width: 100%;
}
&__row {
padding-block: 0.5rem;
}
.chat-channel-title__name,
.chat-user-display-name {
font-size: var(--font-up-1);
}
.chat-channel-title__category-badge {
display: flex;
align-items: center;
justify-content: center;
padding-inline: 2px;
width: 24px;
height: 24px;
svg:not(.chat-channel-title__restricted-category-icon) {
height: inherit;
width: inherit;
}
}
.chat-user-avatar {
&__container {
padding: 0;
}
img {
width: 28px;
height: 28px;
box-sizing: border-box;
}
}
}