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/](https://utopian.info/)'s certificate gets renewed it will be available at [https://utopian.rocks](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](https://github.com/amosbastian/utopian/commit/0d6a9f6e65e94c708e9d334842b887689d99a900)

[05d3a39 - CSS for profile page](https://github.com/amosbastian/utopian/commit/05d3a39e6002f23057e08d3ad19cd500d7f95eba)

[deb832d - Finished CSS for moderator and contributor and rework backend](https://github.com/amosbastian/utopian/commit/deb832dbd6b97078eb585aad06110c653e425e70)

[58812d3 - Add function for piechart, adjust templates and small fixes](https://github.com/amosbastian/utopian/commit/58812d32712ba5351d3a889172d5b2124e3b2a33)

[a2d2dd3 - Add score to moderator/CM page](https://github.com/amosbastian/utopian/commit/a2d2dd3e434770630c5bde67c5e5cadc728029c8)

[9261023 - Add skip and limit to query](https://github.com/amosbastian/utopian/commit/92610231cda1ef948025d2e5162d83758c92acab)

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](https://utopian.rocks/category/all)

![before_after_category.png](https://cdn.utopian.io/posts/0be5f1b1425cda50b7ea4ba4b466c7faa94fbefore_after_category.png)
<center><sup>Note that the "before" picture also used to have the plot, so that's not something new.</sup></center>

This is where the big changes have happened!

##### [Contributor](https://utopian.rocks/contributor/amosbastian)
![before_after_contributor.png](https://cdn.utopian.io/posts/767c43e65e9b622e6072a828d77bebd0d7abbefore_after_contributor.png)

Not much changed here from the outside.

##### [Moderator](https://utopian.rocks/moderator/amosbastian)

![before_after_moderator.png](https://cdn.utopian.io/posts/c79ebb8f2a3b66eeda133e912e696e7ef976before_after_moderator.png)

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

```python
@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](https://github.com/amosbastian/utopian/blob/master/CONTRIBUTING.md) for more information.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@amosbastian/utopian-info-category-review-feed-and-css-rework">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>