github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-19 02:32:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: stack group inbox label horizontally (#22130)

Browse Source
This commit is contained in:
Meghna 2023-06-15 18:35:36 +05:30 committed by GitHub
parent fa509224f0
commit 7da307669f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/discourse/app/templates/list/participant-groups.hbr
View File

@ -1,8 +1,18 @@
<div class="participant-groups" role="list" aria-label="{{i18n 'topic.participant_groups'}}">
{{#each groups as |group|}}
<a class="user-group trigger-group-card" href="{{group.url}}" data-group-card="{{group.name}}">
{{d-icon 'users'}}
{{group.name}}
</a>
{{/each}}
</div>
<div
class="participant-group-wrapper"
role="list"
aria-label="{{i18n 'topic.participant_groups'}}"
>
{{#each groups as |group|}}
<div class="participant-group">
<a
class="user-group trigger-group-card"
href="{{group.url}}"
data-group-card="{{group.name}}"
>
{{d-icon "users"}}
{{group.name}}
</a>
</div>
{{/each}}
</div>

39
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -263,24 +263,29 @@
.discourse-tag.box {
margin-right: 0.25em;
}
.participant-groups {
margin-left: 0.5em;
padding: 0 5px;
border: 1px solid var(--primary-low);
border-radius: 0.25em;
min-width: 3em;
@include ellipsis;
> a {
display: flex;
align-items: center;
height: 1.25em;
color: var(--primary-high);
.mobile-view & {
height: 1.1em;
}
.d-icon {
margin-right: 5px;
.participant-group-wrapper {
display: flex;
.participant-group {
margin-left: 0.5em;
padding: 0 5px;
border: 1px solid var(--primary-low);
border-radius: 0.25em;
min-width: 3em;
@include ellipsis;
> a {
display: flex;
align-items: center;
height: 1.25em;
color: var(--primary-high);
.mobile-view & {
height: 1.1em;
}
.d-icon {
margin-right: 5px;
}
}
}
}