Add sorting functionality to category pages #596
+113
−14
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The way that Semantic UI does columns for the cards is a massive pain to override (it uses negative margins for everything), and this was making the menu glitch out on mobile. CSS grid is supported by every major browser now, so there's no reason not to use it.
This seems more in line with how UI is laid out on other sites I've seen.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a dropdown to category pages, allowing the crates to be sorted in various ways:
firefox_2025-01-25_19-26-26.mp4
I originally intended to use a pre-made library for this, but all the ones I could find either:
Since we're already using jQuery for other parts of the site, I decided to just take the old school approach and write some JS myself. It seems fairly snappy on desktop, though I need to give it a try on mobile too.
I also found while working on this that Semantic UI's
.cardsclass (which is used to create the columns on the homepage/game categories) is an absolute nightmare - it uses negative margins for everything, which breaks the layout in strange ways if you try to put any other UI near it 🙃To get around this, I ended up replacing it with a new
.card-gridclass, which uses CSS Grid to create the columns. This feature is supported in 97% of browsers at this point.I would appreciate feedback on the UI, and whether there are other sort options that should be available!
I did originally have the option to sort by license, but the license info is a little too inconsistent for that to work (e.g. some repos have
MIT and Apache, some haveApache and MIT).