Show rating boxes in search page

[salty-horse]

This addresses #761.

I added a "show rating boxes" checkbox to the top of the search page.
In the background, the page always loads with all the boxes, but they're hidden. Clicking the checkbox shows/hides them, and updates the address bar and the pagination links to include/remove the new query parameter.

rating_boxes.mp4

I think I tested all the features in the rating box (not shown in video: setting playing times), and also made sure the regular game page still works.

Open issues:

1. The boxes are currently not styled correctly. They use the same style as the sidebar on the game page. They probably shouldn't expand their width - should they be on their own column? Should they be more compact?
2. I used a flexbox to put the checkbox on the same row as the sorting dropdown, but this causes the box to grow in height. I don't know how to fix that :( When it's not a flexbox it's fine. Is this because of the margins set on the drop-down?
3. There's a small quirk with the pagination that probably only happens during local debugging. For my test I used the "highest rated" game list. But as I rate games, this changes their standing in the list, so a page refresh will cause entries to disappear, because they move up/down the list, and are now maybe on a different page. Something to be aware of when you're testing this.
4. To support having multiple boxes on the same page, I added a prefix/suffix of the game ID to elements that needed it. I wasn't super consistent with it, and I think it looks odd to have suffixes that are game IDs. All items of the same kind should start with the same prefix - I will fix it later. Also, if the search results return multiple copies of the same game, like this bug #1366, it can cause problems. Should I test for this case?
5. Instead of rendering the HTML for all the boxes and hiding them until the user selects the checkbox, I can make it so selecting it triggers a full page refresh. Technically, this can help with the page size and loading times. Is it a big issue? There aren't too many items per page.
6. How should it look on mobile? ATM it reverts to how the game page presents the box, which is just another section in the game page without a color background.
7. Wasn't tested with Javascript disabled.

[alice-blue]

Should they be more compact?

If there is a way to not show the "Have you played this game" heading on the widget, and instead put "Rate it" at the top of the box, that might save a little vertical space.

[salty-horse]

I added a custom CSS class so it can be styled separately than the game page, and removed the title, and the estimated time title and tips.

I think the hours/minutes boxes can be on the same line as "Estimated play time:" and have smaller margins (the margins can also be decreased in the regular game page)

I'm really bothered by an already-rated box saying "Rate it:" instead of your "Your rating". It was done so the stars don't reflow as you press them but I think I can solve it. I'll submit a separate patch.

[salty-horse]

Fixed a bug with updating the "played" flag when submitting time, added a width to the rating box so it's like in the sidebar, removed some spacing between time form lines.

When the game box is larger than the rating box, the rating box stretches. Its contents should probably be aligned to the top.

Should the boxes be aligned to the right? (Example uses margin-left: auto !important; margin-right: 100px !important;).

Note how the box is squished when the title is longer, even though they are not close.

[alice-blue]

Should the boxes be aligned to the right?

Note how the box is squished when the title is longer, even though they are not close.

Is there a way to make the game boxes all the same width so that the rating boxes all line up with each other?

Or if the tip boxes are in the way, maybe those could be hidden when ratings boxes are visible.

[salty-horse]

I'll hide the tip boxes, and try to fix the difference in width when there's a long game title.