github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-26 11:42:14 +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>
<:content>
{{emoji @status.emoji skipTitle=true}}
<span class="user-status-tooltip-description">
{{@status.description}}
</span>
{{#if this.until}}
<div class="user-status-tooltip-until">
{{this.until}}
</div>
{{/if}}
<div class="user-status-tooltip-wrapper">
<span class="user-status-tooltip-description">
{{@status.description}}
</span>
{{#if this.until}}
<span class="user-status-tooltip-until">
{{this.until}}
</span>
{{/if}}
</div>
</:content>
</DTooltip>
{{/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"] {
.fk-d-tooltip__inner-content {
gap: 0.65em;
}
.emoji {
width: 1em;
height: 1em;
@ -9,14 +13,9 @@
color: var(--primary-800);
}
.user-status-tooltip-description {
font-weight: bold;
margin-left: 0.25rem;
vertical-align: middle;
}
.user-status-tooltip-until {
color: var(--primary-medium);
padding-left: 0.25rem;
white-space: nowrap;
margin-left: 0.15em;
}
}