New prize detail page template

[pyrox0]

Contributing to the Donation Tracker

First of all, thank you for taking the time to contribute!

Please fill out the template below and check the following boxes:

• I've added tests or modified existing tests for the change.
• I've humanly end-to-end tested the change by running an instance of the tracker.

No automated tests needed to be run, and the current tests still work with these changes applied.

Issue from Pivotal Tracker

Link to the issue from the public Pivotal Tracker that your change addresses. (Expand the story and click the link icon to copy the link to your clipboard.)

N/A

Description of the Change

This makes the prize template look closer to other templates bid and run details. The name of the prize is more evident, the information is more clearly laid out, and the overall look is more polished.

The new template has been tested on both desktop and mobile form factors, and mobile is vastly more readable thanks to the larger font sizes.

In all below screenshot sets, top is the image before the template was changed, and the bottom one is after.

Prize Page with Image(Desktop)

Also includes a category(even though this is no longer used for new prizes in the main tracker, it is in the code(and used on historical prizes), so it's been included in these changes) and uses the game-based prize draw timing. Prize provider has a website, so it's linked as well.

Prize Page without Image(Desktop)

Does not have categories, and uses start/end-times for drawing. Prize provider does not have a website, so no link is added.

Prize Page With Image(Mobile)

Prize Page Without Image(Mobile)

Verification Process

What process did you follow to verify that the change has not introduced any regressions? Describe the actions you took apart from writing tests, such as running a local instance of the tracker. (What buttons did you press, etc.)

I've run a local instance of the tracker to ensure that the prize pages work properly on both desktop and mobile.

I've cropped the mobile screenshots down to the important sections, but they have full dimensions of 1080p wide and 2057p tall. All removed height is at the bottom, so if scaling them back up, just add a fully white section to the bottom to match the height.

For reference, the screenshots were taken using firefox's Take Screenshot function(available in the right-click menu) and then selecting "Save Full Page." The resolution of these appears to be ~2x what is shown on the screen, but that should not be too much of an issue for what's shown in these screenshots.

The desktop screenshots were taken on the 2560x1600 panel of my Framework Laptop 16, and the mobile screenshots are basic screenshots from my Google Pixel 7 using Android's screenshot functionality.

[pyrox0]

Test failure seems unrelated, I didn't touch anything related to donation processing.

[uraniumanchor]

While this is an improvement to the existing page, I'm not sure it'll be merged since there's already a fancier JS prize view that's intended to be how people look at things, and I'm not as concerned about the older pages at this point.

See: https://tracker.gamesdonequick.com/tracker/ui/events/48/prizes for a recent example

[pyrox0]

How long will it be until that new view is the default? My only concern(and the reason I put the effort into this design) is that if the new prize page takes(for instance) 6 months to become the default, unless a user knows the new prize view exists and knows how to edit the URL to get to the new view, what they(and the vast majority of users) will see by default(for both AGDQ '25 and Frost '25) is the old design. Therefore, even if this is temporary until the new UI becomes the default, it still improves usability of the tracker overall, and means that folks will have an easier time seeing information related to prizes even if, again, it's a temporary solution.

Also, while this new version of the page loads images and the old version doesn't, it wouldn't increase load on the GDQ backend server since the images are loaded from an external source.