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

[amosbastian]

^{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.

Comments

[emrebeyler]

The new design looks cool and the estimated voting time is a great touch. Is it possible for a potential developer to contribute the project with just update_database.py? Can they skip the google docs integration for development/testing?

---

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

---

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

[amosbastian]

Thanks for the review, Emre! Currently not, but I can probably write something that will populate the database by using the Utopian.rocks API (only scores will be missing then).

[utopian-io]

Thank you for your review, @emrebeyler!

So far this week you've reviewed 10 contributions. Keep up the good work!

[oups]

Oh, I've missed the estimated upvote time at first. It's a great addition.
And oddly enough, I'm also having the same proportions on chrome devtools when I select iphone 5/SE

[amosbastian]

Sometimes it works and sometimes it doesn't, it's really doing my head in lol. I might take up your suggestion of creating a task request so someone can fix it (and some other features I don't want to implement myself).

[steem-ua]

Hi @amosbastian!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

[sargoon]

Looks toooooooooo much cool!

[utopian-io]

Hey, @amosbastian!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!