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

UX: fix group search result alignment and styles (#25681)

This commit is contained in:
Kris 2024-02-14 17:51:44 -05:00 committed by GitHub
parent a8b4d2e82c
commit 41cd01c83a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/app/components/search-menu/results/type/group.hbs
View File

@ -1,15 +1,16 @@
<div class="group-result"> <div class="group-result {{if @result.flairUrl '--with-flair'}}">
{{#if @result.flairUrl}} {{#if @result.flairUrl}}
<AvatarFlair <AvatarFlair
@flairName={{@result.name}} @flairName={{@result.name}}
@flairUrl={{@result.flairUrl}} @flairUrl={{@result.flairUrl}}
@flairBgColor={{@result.flairBgColor}} @flairBgColor={{@result.flairBgColor}}
@flairColor={{@result.flairColor}} @flairColor={{@result.flairColor}}
@class="avatar-flair__wrapper"
/> />
{{else}} {{else}}
{{d-icon "users"}} {{d-icon "users"}}
{{/if}} {{/if}}
<div class="group-names"> <div class="group-names {{if @result.fullName '--group-with-slug'}}">
<span class="name">{{or @result.fullName @result.name}}</span> <span class="name">{{or @result.fullName @result.name}}</span>
{{! show the name of the group if we also show the full name }} {{! show the name of the group if we also show the full name }}
{{#if @result.fullName}} {{#if @result.fullName}}

36
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -165,15 +165,29 @@ $search-pad-horizontal: 0.5em;
} }
.search-result-group .group-result { .search-result-group .group-result {
.d-icon, display: flex;
.avatar-flair { gap: 0.5em;
width: 20px;
height: 20px; &.--with-flair {
align-items: center;
} }
.avatar-flair, .avatar-flair__wrapper,
.d-icon-users { .d-icon-users {
margin-right: 0.5em; margin-top: 0.1em; // vertical alignment
}
.avatar-flair {
width: 1.58em;
height: 1.6em;
display: flex;
justify-content: center;
align-items: center;
.d-icon {
font-size: var(--font-down-1);
color: currentColor;
}
} }
.avatar-flair { .avatar-flair {
@ -182,20 +196,20 @@ $search-pad-horizontal: 0.5em;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.d-icon {
margin-right: 0;
}
} }
.group-names { .group-names {
@include user-item-flex; @include user-item-flex;
min-width: 0;
.name, .name,
.slug { .slug {
@include ellipsis; @include ellipsis;
} }
.name { &.--group-with-slug {
font-weight: 700; .name {
font-weight: 700;
}
} }
} }
} }