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}}
<AvatarFlair
@flairName={{@result.name}}
@flairUrl={{@result.flairUrl}}
@flairBgColor={{@result.flairBgColor}}
@flairColor={{@result.flairColor}}
@class="avatar-flair__wrapper"
/>
{{else}}
{{d-icon "users"}}
{{/if}}
<div class="group-names">
<div class="group-names {{if @result.fullName '--group-with-slug'}}">
<span class="name">{{or @result.fullName @result.name}}</span>
{{! show the name of the group if we also show the full name }}
{{#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 {
.d-icon,
.avatar-flair {
width: 20px;
height: 20px;
display: flex;
gap: 0.5em;
&.--with-flair {
align-items: center;
}
.avatar-flair,
.avatar-flair__wrapper,
.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 {
@ -182,20 +196,20 @@ $search-pad-horizontal: 0.5em;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.d-icon {
margin-right: 0;
}
}
.group-names {
@include user-item-flex;
min-width: 0;
.name,
.slug {
@include ellipsis;
}
.name {
font-weight: 700;
&.--group-with-slug {
.name {
font-weight: 700;
}
}
}
}