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

UX: fixing alignment issue (#432) 

* UX: fixing alignment issue
This commit is contained in:
chapoi 2023-01-23 18:47:00 +01:00 committed by GitHub
parent c036d030dc
commit 0d695df595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/javascripts/discourse/templates/components/assignee-chooser-row.hbs
View File

@ -1,15 +1,22 @@
{{#if this.item.isUser}} {{#if this.item.isUser}}
{{avatar this.item imageSize="tiny"}} {{avatar this.item imageSize="tiny"}}
<div class="user-wrapper">
<span class="identifier">{{format-username this.item.id}}</span> <span class="identifier">{{format-username this.item.id}}</span>
<span class="name">{{this.item.name}}</span> <span class="name">{{this.item.name}}</span>
{{#if (and this.item.showUserStatus this.item.status)}} {{#if (and this.item.showUserStatus this.item.status)}}
<UserStatusMessage @status={{this.item.status}} @showDescription={{true}} /> <UserStatusMessage
@status={{this.item.status}}
@showDescription={{true}}
/>
{{/if}} {{/if}}
</div>
{{decorate-username-selector this.item.id}} {{decorate-username-selector this.item.id}}
{{else if this.item.isGroup}} {{else if this.item.isGroup}}
{{d-icon "users"}} {{d-icon "users"}}
<div class="user-wrapper">
<span class="identifier">{{this.item.id}}</span> <span class="identifier">{{this.item.id}}</span>
<span class="name">{{this.item.full_name}}</span> <span class="name">{{this.item.full_name}}</span>
</div>
{{else}} {{else}}
{{d-icon "envelope"}} {{d-icon "envelope"}}
<span class="identifier">{{this.item.id}}</span> <span class="identifier">{{this.item.id}}</span>

20
assets/stylesheets/assigns.scss
View File

@ -87,6 +87,12 @@
color: var(--primary-medium); color: var(--primary-medium);
} }
.user-wrapper {
display: flex;
align-items: flex-end;
line-height: var(--line-height-small);
}
.name { .name {
display: contents; display: contents;
} }
@ -96,23 +102,23 @@
} }
.user-status-message { .user-status-message {
color: var(--primary-medium);
font-size: var(--font-down-2); font-size: var(--font-down-2);
margin-left: 0.5em; margin-left: 0.5em;
.emoji { .emoji {
height: var(--font-up-1); height: var(--font-0);
width: var(--font-up-1); width: var(--font-0);
} }
} }
.suggestions-label { .suggestions-label {
position: absolute;
right: 0;
top: 0;
margin: 0.25em 0.25em 0 0;
color: var(--primary-low-mid); color: var(--primary-low-mid);
font-size: var(--font-down-2); font-size: var(--font-down-3);
font-weight: bold; font-weight: bold;
margin-left: auto;
margin-right: -0.25em;
margin-top: -1em;
text-transform: uppercase; text-transform: uppercase;
} }
} }