Utopian.rocks - Style update, QoL improvements and a FAQ

^{Credit to @podanrj}
https://utopian.rocks/

Repository

https://github.com/amosbastian/utopian.rocks

Pull request

https://github.com/amosbastian/utopian.rocks/pull/20

Started adding one feature, but ended up adding a few more and updating the style... guess I got a bit carried away.

Style update

Didn't really like the style before, so I decided I wanted to change it. It should be obvious that the general style is heavily inspired by GitHub's style. The biggest difference content-wise is that the rows are a bit thicker and also include the repository and the time the contribution was created. It also now uses each category's icon instead of writing out the name and I think it looks a lot nicer this way. Basically everything includes a title now, so if you don't know what something means you can hover over it and it will tell you.

Home before	Home after

Queue before	Queue after

New features

Of course I didn't just update the style, I also added some quality of life improvements.

404 page

Added a 404 page (credit to @podanrj for the image once again). This basic functionality was missing for some reason, but it has been added now at least.

Is a contribution being reviewed?

Some users were curious if their contribution was being reviewed, so I added an indicator that shows who is currently reviewing a contribution if you hover over it. Obviously green means it's currently being reviewed, and red means it's currently not being reviewed.

Estimated upvote time

It now shows the estimated time when a reviewed contribution will be upvoted. This was calculated by iterating over each pending contribution, calculating the voting power it will use and the recharge time in seconds, then adding that to the previous contribution's estimated vote time. I say estimated because it doesn't take into account that some contributions are made by VIPO (20% higher vote), have beneficiaries set for @utopian.pay (also a higher vote) or that @utopian-io also casts manual votes sometimes.

for i, contribution in enumerate((valid + invalid)):
    if i == 0:
        hours, minutes, seconds = [int(x) for x in
                                    recharge_time.split(":")]
        vote_time = datetime.now() + timedelta(
            hours=hours, minutes=minutes, seconds=seconds)
        contribution["vote_time"] = vote_time
        continue
    score = contribution["score"]
    category = contribution["category"]
    missing_vp = 2 * exponential_vote(score, category) / 100.0
    recharge_seconds = missing_vp * 100 * 432000 / 10000
    vote_time = vote_time + timedelta(seconds=recharge_seconds)
    contribution["vote_time"] = vote_time

"Improved" responsiveness

iPhone 7	iPad

Previously I was simply changing the font size at different widths, which worked, but made some things hard to read. Now I've actually gone through certain breakpoints and changed things manually until I thought it looked right. For some reason you sometimes have to zoom in on a mobile device to get the intended view, which I think is caused by <meta name="viewport" ...>, but I'm not exactly sure how to fix it. If anyone knows a solution, then please let me know!

FAQ

Also added a FAQ, which is just a markdown file in the repository. It includes some answers to questions I saw on Discord, so it should hopefully be useful to some people.