IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Fix alignment issues around user status (#26491)

Browse Source 
Minor changes but they 1. correct the html structure (no divs in spans) 2. unify the margins
This commit is contained in:
Jarek Radosz 2024-04-09 11:10:12 +02:00 committed by GitHub
parent a601813a6c
commit f5c9e75438
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/widgets/post-user-status.js
View File

@ -9,7 +9,7 @@ createWidget("post-user-status", {
return [ return [
new RenderGlimmer( new RenderGlimmer(
this, this,
"div", "span",
hbs`<UserStatusMessage @status={{@data.attrs}} />`, hbs`<UserStatusMessage @status={{@data.attrs}} />`,
{ {
attrs, attrs,

4
app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs
View File

@ -78,7 +78,7 @@ export default class DTooltip extends Component {
{{this.registerTrigger (this.allowedProperties)}} {{this.registerTrigger (this.allowedProperties)}}
...attributes ...attributes
> >
<div class="fk-d-tooltip__trigger-container"> <span class="fk-d-tooltip__trigger-container">
{{#if (has-block "trigger")}} {{#if (has-block "trigger")}}
{{yield this.componentArgs to="trigger"}} {{yield this.componentArgs to="trigger"}}
{{else}} {{else}}
@ -91,7 +91,7 @@ export default class DTooltip extends Component {
<span class="fk-d-tooltip__label">{{@label}}</span> <span class="fk-d-tooltip__label">{{@label}}</span>
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </span>
</span> </span>
{{#if this.tooltipInstance.expanded}} {{#if this.tooltipInstance.expanded}}

3
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -62,6 +62,9 @@
} }
.sidebar-section-link-content-text { .sidebar-section-link-content-text {
align-items: center;
display: inline-flex;
@include ellipsis; @include ellipsis;
.emoji { .emoji {

4
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -59,9 +59,9 @@
font-weight: bold; font-weight: bold;
} }
span { > span {
font-size: var(--font-0); font-size: var(--font-0);
margin-right: 8px; margin-right: 0.33em;
display: inline-block; display: inline-block;
@include ellipsis; @include ellipsis;
vertical-align: middle; vertical-align: middle;

4
app/assets/stylesheets/common/float-kit/d-tooltip.scss
View File

@ -27,6 +27,10 @@
.touch & { .touch & {
@include unselectable; @include unselectable;
} }
&-container {
display: flex;
}
} }
&.-animated { &.-animated {

4
plugins/chat/assets/javascripts/discourse/components/chat/message/info.gjs
View File

@ -135,9 +135,9 @@ export default class ChatMessageInfo extends Component {
> >
<span class="chat-message-info__username__name">{{this.name}}</span> <span class="chat-message-info__username__name">{{this.name}}</span>
{{#if this.showStatus}} {{#if this.showStatus}}
<div class="chat-message-info__status"> <span class="chat-message-info__status">
<UserStatusMessage @status={{@message.user.status}} /> <UserStatusMessage @status={{@message.user.status}} />
</div> </span>
{{/if}} {{/if}}
</span> </span>
{{/if}} {{/if}}

3
plugins/chat/assets/stylesheets/common/chat-message-info.scss
View File

@ -58,8 +58,7 @@
.chat-message-info__status { .chat-message-info__status {
display: flex; display: flex;
margin-left: 0.2rem; margin-inline: 0.33rem;
margin-right: 0.2rem;
.emoji { .emoji {
width: 16px; width: 16px;

4
plugins/chat/assets/stylesheets/common/sidebar-extensions.scss
View File

@ -153,8 +153,8 @@
} }
.sidebar-section-link-content-text { .sidebar-section-link-content-text {
.user-status { .user-status-message {
margin-left: 0.3em; margin-left: 0.33em;
} }
} }