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

UX: Prevent badges on usercards from overflowing (#12037)

This commit is contained in:
Kris 2021-02-11 13:41:58 -05:00 committed by GitHub
parent 04d0bf9c4a
commit fcf674f106
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/user-badge.js
View File

@ -2,7 +2,7 @@ import Component from "@ember/component";
import discourseComputed from "discourse-common/utils/decorators"; import discourseComputed from "discourse-common/utils/decorators";
export default Component.extend({ export default Component.extend({
tagName: "span", tagName: "",
@discourseComputed("count") @discourseComputed("count")
showGrantCount(count) { showGrantCount(count) {

2
app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
View File

@ -1,4 +1,4 @@
<a href={{this.badgeUrl}}> <a class="user-card-badge-link" href={{this.badgeUrl}}>
{{#badge-button badge=@badge}} {{#badge-button badge=@badge}}
{{#if this.showGrantCount}} {{#if this.showGrantCount}}
<span class="count">(&times;&nbsp;{{@count}})</span> <span class="count">(&times;&nbsp;{{@count}})</span>

4
app/assets/stylesheets/common/components/user-card.scss
View File

@ -239,7 +239,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
border: 1px solid var(--primary-low); border: 1px solid var(--primary-low);
color: var(--primary); color: var(--primary);
} }
.user-card-badge-link {
overflow: hidden;
}
.more-user-badges { .more-user-badges {
flex: 0 0 auto; // this is more important than other badges, so don't allow it to shrink
a { a {
@extend .user-badge; @extend .user-badge;
} }

7
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -55,14 +55,15 @@ $avatar_width: 120px;
// badges // badges
.badge-section { .badge-section {
flex-wrap: wrap; flex-wrap: wrap;
> span { .user-card-badge-link,
.more-user-badges {
display: flex; display: flex;
flex: 0 1 50%; flex: 0 1 50%;
max-width: 50%; // for text ellipsis max-width: 50%; // for text ellipsis
padding: 2px 0; padding: 2px 0;
box-sizing: border-box; box-sizing: border-box;
&:nth-of-type(1), &:nth-child(1),
&:nth-of-type(3) { &:nth-child(3) {
padding-right: 4px; padding-right: 4px;
} }
a { a {