Summary

Redesign the trophy display and add a trophies component.

Review Request #13746 — Created April 18, 2024 and submitted April 20, 2024, 9:01 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This introduces .rb-c-trophies, a formal component for showing
trophies. This replaces the old .box.trophies, and is quite different.
It's the first big visual update for trophies since 1.0.

The new styling doesn't enclose trophies in a box, and isn't
left-aligned. Instead, these are now shown outside of a box, centered on
the page, with a trophy on either side of the text. The trophies are
slightly slanted away from the text.

The text is now a golden-ish color (which is a bit brighter on dark
mode, and a darker gold on light mode).

Removing the banner and adding the slanted trophies gives this a little
bit more personality. In the future, new trophy images could really help
make this stand out.

Testing Done

Tested on light and dark modes on mobile and desktop, with both sparkly
and fish trophies.

Commits

Summary	ID
Add a formal component for trophies, and support dark mode. This introduces `.rb-c-trophies`, a formal component for showing trophies. This replaces the old `.box.trophies`, and is quite different. It's the first big visual update for trophies since 1.0. The new styling doesn't enclose trophies in a box, and isn't left-aligned. Instead, these are now shown outside of a box, centered on the page, with a trophy on either side of the text. The trophies are slightly slanted away from the text. The text is now a golden-ish color (which is a bit brighter on dark mode, and a darker gold on light mode). Removing the banner and adding the slanted trophies gives this a little bit more personality. In the future, new trophy images could really help make this stand out.	2df698929f8ccb1459f97121cacc3be4fd0bf0c1

Summary

Add a formal component for trophies, and support dark mode.

This introduces `.rb-c-trophies`, a formal component for showing trophies. This replaces the old `.box.trophies`, and is quite different. It's the first big visual update for trophies since 1.0. The new styling doesn't enclose trophies in a box, and isn't left-aligned. Instead, these are now shown outside of a box, centered on the page, with a trophy on either side of the text. The trophies are slightly slanted away from the text. The text is now a golden-ish color (which is a bit brighter on dark mode, and a darker gold on light mode). Removing the banner and adding the slanted trophies gives this a little bit more personality. In the future, new trophy images could really help make this stand out.

2df698929f8ccb1459f97121cacc3be4fd0bf0c1

Files

Issues

Description	From	Last Updated
Leftover code? Seems like this probably should be removed.	david	April 19, 2024, 1:30 a.m.
Can we not use palette colors for these?	david	April 20, 2024, 9 p.m.

flake8 passed.

JSHint passed.

Change Summary:

Fish trophies!

Added Files:

Ship it!

```
Looks a lot better this way.
```

reviewboard/static/rb/css/ui/trophies.less (Diff revision 1)
The issue has been resolved. Show all issues
```
Leftover code? Seems like this probably should be removed.
```

reviewboard/static/rb/css/ui/trophies.less (Diff revision 1)

The issue has been dropped. Show all issues

Can we not use palette colors for these?

chipx86 April 19, 2024, 1:30 a.m.

We don't have anything good in the palette for these. I'd have to define a new gold palette, and I don't have time for it.

david April 19, 2024, 8:47 a.m.
```
Can we put in a TODO comment?
```

chipx86 April 19, 2024, 3:02 p.m.

I have one in my local little Ink/dark mode TODO tracking this. (I have it separate from Asana just because I also have tons of temporary in-development notes around it all.)

I need this and an orange palette at some point, and some refinement/variations on other colors.

Change Summary:

Removed leftover CSS from the old box design.

Commits:

	Summary	ID
	Add a formal component for trophies, and support dark mode. This introduces `.rb-c-trophies`, a formal component for showing trophies. This replaces the old `.box.trophies`, and is quite different. It's the first big visual update for trophies since 1.0. The new styling doesn't enclose trophies in a box, and isn't left-aligned. Instead, these are now shown outside of a box, centered on the page, with a trophy on either side of the text. The trophies are slightly slanted away from the text. The text is now a golden-ish color (which is a bit brighter on dark mode, and a darker gold on light mode). Removing the banner and adding the slanted trophies gives this a little bit more personality. In the future, new trophy images could really help make this stand out.	b98fac0d3237bf5b64214cdfde7985d79aa933c6
	Add a formal component for trophies, and support dark mode. This introduces `.rb-c-trophies`, a formal component for showing trophies. This replaces the old `.box.trophies`, and is quite different. It's the first big visual update for trophies since 1.0. The new styling doesn't enclose trophies in a box, and isn't left-aligned. Instead, these are now shown outside of a box, centered on the page, with a trophy on either side of the text. The trophies are slightly slanted away from the text. The text is now a golden-ish color (which is a bit brighter on dark mode, and a darker gold on light mode). Removing the banner and adding the slanted trophies gives this a little bit more personality. In the future, new trophy images could really help make this stand out.	2df698929f8ccb1459f97121cacc3be4fd0bf0c1

Diff:

Revision 2 (+242 -88)

Show changes

	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/ui/boxes.less
	reviewboard/static/rb/css/ui/trophies.less
	reviewboard/templates/reviews/trophy_box.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status: Closed (submitted)

Change Summary:

Pushed to release-7.x (27e6a91)

Redesign the trophy display and add a trophies component.

Information

Reviewers

Change Summary:

Added Files:

Change Summary:

Commits:

Diff:

Checks run (2 succeeded)

Status: Closed (submitted)

Change Summary: