Utopian.info - Category review feed & CSS rework

I have learnt a lot since I made the first version of Utopian.info, so I decided to rework the CSS and use SCSS instead (removed Bootstrap completely) and add a review feed per category since some people asked for that. Furthermore I have removed some features since they had become redundant (like a supervisor's team overview). Also, until https://utopian.info/'s certificate gets renewed it will be available at https://utopian.rocks instead.

New features

Something went wrong when I tried deleting a file from the commity history and it duplicated all my commits, so instead of a PR I will link some of the changes below. Sorry about that!

0d6a9f6 - Rework most of the CSS and templates

05d3a39 - CSS for profile page

deb832d - Finished CSS for moderator and contributor and rework backend

58812d3 - Add function for piechart, adjust templates and small fixes

a2d2dd3 - Add score to moderator/CM page

9261023 - Add skip and limit to query

I didn't add all commits as most are similar to the ones above and a lot of the changes are just noise - most of the changes were made in the Sass folder, restructuring the templates to work with CSS Grid and adding some functions to app.py. I also removed A LOT of code and some of the added code is admittedly not up to my own standard. This will be the first thing I work on in the future.

Updated CSS

I removed all the CSS I had before (and Bootstrap) and changed it to SCSS instead. For the layout I use the same CSS Grid layout as Nutmega and the rest was adapted slightly from the previous iteration. Because of this I had to change most of the templates completely, so this was a huge pain. I also added SVG icons instead of using icon fonts and made sure that task requests have the same colour as their category, but a different icon. Below I have added some screenshots showing the before and after of some pages!

Categories

^{Note that the "before" picture also used to have the plot, so that's not something new.}

This is where the big changes have happened!

Contributor

Not much changed here from the outside.

Moderator

Not much changed here either, but since the team overview has been removed I have added the amount of points that each moderator has earned in the last week to this page as well.

Category review feed & more

Each category now shows its respective review feed. This makes it easy to see which contributions were most recently reviewed per category. You might have noticed from the screenshot above that I have added a pie chart to this page so you can easily see which category has the most pending contributions. I unfortunately couldn't get the hover tools to work, so it's not great, but it should still give a general idea of which category is in need of attention. Another thing I changed is that each tab is now its individual page. Before I simply used Bootstrap's tabs, but this annoyed me, because you couldn't link someone to e.g. https://utopian.rocks/moderator/espoem/contributors - instead they had to go to the moderator's page and click on the tab themselves. It's something small, but I prefer it this way.

Impementing the review feed wasn't actually that difficult, since it was obviously very similar to that of the moderator and contributor pages. The biggest problem was the way I had implemented pagination before. I would simply create a div for each review, then hide all of them except the 10 that you were supposed to see with JavaScript. You can imagine that doing this for the page with all categories (~60000 contributions) made the page very laggy! Because of this I had to remove the old pagination and implement a new version by adding pagination to the routes themselves in app.py. The query parameter page is now used to determine which contributions to show on which page, which makes it load much quicker. I've included a small code snippet below so you can see how easy it was to implement it

@app.route("/category/<category>")
def categories(category):
    posts = db.posts
    page = request.args.get("page", 1, type=int)
    if page < 1:
        page = 1
    limit = 8 * page
    skip = limit - 8
    ...
    post_list = [post for post in posts.find({
                            "status": {"$ne": "pending"}}).sort(
                            "moderator.time", -1).skip(skip).limit(limit)]

What are my plans?

There are a lot of things I want to change, so expect to see some more updates in the future. I want to add the ability to search for e.g. a moderator, as I find it pretty annoying having to change the URL manually. Other than that I will probably be remaking the structure of the application internally so it follows all the best practices of a Flask application like my other project Nutmega does.

Contributing

If you want to contribute, then please read CONTRIBUTING.md for more information.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---