github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-28 01:56:58 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve the alignment of long status messages (#30830)

Browse Source 
Before: 


![image](https://github.com/user-attachments/assets/77005641-2289-4296-8988-242c139a376d)

After: 


![image](https://github.com/user-attachments/assets/25889d78-7a5d-4097-9242-5cbd82e909ca)

Short message layout stays mostly unchanged: 


![image](https://github.com/user-attachments/assets/893a8f03-0e24-4e68-bc6b-2469eba0523c)
This commit is contained in:
Kris
2025-01-16 17:22:37 -05:00
committed by GitHub
parent 1758d189ba
commit f942599ce1
2 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/discourse/app/components/user-status-message.gjs
View File

@ -36,14 +36,16 @@ export default class UserStatusMessage extends Component {
</:trigger> </:trigger>
<:content> <:content>
{{emoji @status.emoji skipTitle=true}} {{emoji @status.emoji skipTitle=true}}
<span class="user-status-tooltip-description"> <div class="user-status-tooltip-wrapper">
{{@status.description}} <span class="user-status-tooltip-description">
</span> {{@status.description}}
{{#if this.until}} </span>
<div class="user-status-tooltip-until"> {{#if this.until}}
{{this.until}} <span class="user-status-tooltip-until">
</div> {{this.until}}
{{/if}} </span>
{{/if}}
</div>
</:content> </:content>
</DTooltip> </DTooltip>
{{/if}} {{/if}}

13
app/assets/stylesheets/common/components/user-status-message.scss
View File

@ -1,4 +1,8 @@
[data-content][data-identifier="user-status-message-tooltip"] { [data-content][data-identifier="user-status-message-tooltip"] {
.fk-d-tooltip__inner-content {
gap: 0.65em;
}
.emoji { .emoji {
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -9,14 +13,9 @@
color: var(--primary-800); color: var(--primary-800);
} }
.user-status-tooltip-description {
font-weight: bold;
margin-left: 0.25rem;
vertical-align: middle;
}
.user-status-tooltip-until { .user-status-tooltip-until {
color: var(--primary-medium); color: var(--primary-medium);
padding-left: 0.25rem; white-space: nowrap;
margin-left: 0.15em;
} }
} }