github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-24 12:40:10 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: badge page styling update (#20373)

Browse Source 
* UX: change layout badge card

* UX:  copy change

* UX: badge list styling

* UX: make active badge styling more clear

* Update translation

Co-authored-by: Gerhard Schlager <gerhard.schlager@discourse.org>

* Include x in translation

Co-authored-by: Gerhard Schlager <gerhard.schlager@discourse.org>

---------

Co-authored-by: Gerhard Schlager <gerhard.schlager@discourse.org>
This commit is contained in:
chapoi 2023-02-20 21:14:54 +07:00 committed by GitHub
parent 9c29d688e7
commit b50a581c5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/javascripts/discourse/app/components/badge-card.hbs
View File

@ -1,10 +1,3 @@
{{#if this.displayCount}}
<a
href={{this.url}}
title={{i18n "badges.granted" count=this.displayCount}}
class="grant-count"
>{{this.displayCount}}</a>
{{/if}}
{{#if this.badge.has_badge}}
<a href={{this.url}} class="check-display status-checked">{{d-icon
"check"
@ -46,6 +39,18 @@
<div class="badge-info-item">
<h3><a href={{this.url}} class="badge-link">{{this.badge.name}}</a></h3>
<div class="badge-summary">{{html-safe this.summary}}</div>
{{#if this.displayCount}}
<div class="badge-granted">
{{html-safe
(i18n
"badges.granted_with_count"
count=this.displayCount
badgeUrl=this.url
)
}}
</div>
{{/if}}
</div>
</div>
</div>

1
app/assets/stylesheets/common/base/discourse.scss
View File

@ -552,6 +552,7 @@ table {
&.active {
font-weight: bold;
color: var(--primary);
background: var(--d-selected);
}
}
}

35
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -127,17 +127,23 @@
.check-display {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
}
.badge-granted {
margin-top: 0.5em;
}
.grant-count {
position: absolute;
right: 5px;
top: 5px;
font-weight: bold;
color: var(--primary-medium);
font-size: var(--font-up-2);
line-height: 1;
}
.grant-text {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
.favorite-btn {
@ -145,11 +151,11 @@
right: 0;
bottom: 0;
}
.badge-contents {
display: flex;
min-height: 8em;
padding: 0 1.5em;
align-items: flex-start;
gap: 1rem;
padding: 1.5em 1.5em;
.badge-link {
color: var(--primary);
@ -158,10 +164,8 @@
.badge-icon {
display: flex;
flex-shrink: 0;
margin-right: 1.5em;
align-items: center;
justify-content: center;
width: 64px;
svg {
font-size: 3.5em;
@ -190,7 +194,6 @@
display: flex;
flex: 1 1 auto;
align-items: center;
padding: 1em 0;
color: var(--primary);
h3 {
@ -245,19 +248,11 @@
.badge-group-list {
display: grid;
grid: auto-flow / repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
grid-gap: 1em;
width: 100%;
margin-bottom: 1.5em;
@include breakpoint(medium) {
grid: auto-flow / repeat(2, 1fr);
}
@include breakpoint(mobile-extra-large) {
grid: auto-flow / 1fr;
}
.title {
font-size: var(--font-up-1);
}

3
config/locales/client.en.yml
View File

@ -4121,6 +4121,9 @@ en:
granted:
one: "%{count} granted"
other: "%{count} granted"
granted_with_count:
one: '<a href="%{badgeUrl}" title="%{count} granted" class="grant-count">%{count}x</a> <span class="grant-text">granted</span>'
other: '<a href="%{badgeUrl}" title="%{count} granted" class="grant-count">%{count}x</a> <span class="grant-text">granted</span>'
select_badge_for_title: Select a badge to use as your title
none: "(none)"
successfully_granted: "Successfully granted %{badge} to %{username}"