Utopian V2: Helping with the new Frontend

in utopian-io •  5 days ago

image.png

Repository

https://github.com/utopian-io/v2.utopian.io

My Pull Requests are older than 14 day now. This is because the new UI version was not yet publicly announced yet and I was told to wait a little bit. Now that I see other contributions related to the new UI I think it's time now to share my humble contributions to the project.

Pull Requests

Minor style adjustments on frontpage

https://github.com/utopian-io/v2.utopian.io/pull/2

This was my first work on the new UI. It's a collection of small adjustments on the frontpage.

Before:

After:

fixed v-for "explicit key" warning

https://github.com/utopian-io/v2.utopian.io/pull/5

I don't like to see warnings in the console, even though sometimes they might not even be that important at the moment... they can lead to confusion later on.

In this case I applied a tiny fix related to the v-for loop in Vue.js according to the docs:

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item.

Layout/components

https://github.com/utopian-io/v2.utopian.io/pull/8

The form elements present were not styled like in the design. The components from the quasar framework were used with their default styling. I started to add some custom components as wrappers for those framework components, with custom styling according to the design.

improved homepage styling

https://github.com/utopian-io/v2.utopian.io/pull/10

In the end I made the frontpage completely responsive and fixed some issues.
I made the project slider now responsive and changed the position of the arrows to make it more intuitive and save some space. I fixed an overlapping issue on small screens and drastically reduced the necessary code. I replace custom CSS with built-in framwork classes where possible.
I removed the homepage component and moved everything to the index page file, since this split did not really make sense for the homepage, because there will always only be one homepage. So there's no need for making parts of it reusable.
I fixed the responsive grid for contributions, task-requests and projects by switching to one item per row on medium screen sizes instead of small ones.
I adjusted the spacing between grid items and fixed the responsive behavior of the project cover images.

I don't have the screenshots from before anymore but here's the final result:

Desktop:

Tablet:

Mobile:

That's it.

I hope I can help a little bit more in the future but I have to make myself more familiar with the quasar framework first, so that I can go beyond mere styling related work.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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

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

Vote for Utopian Witness!

  • Kudos on the changes, the images provided do show well your improvements.
  • Can't wait to see it live.

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]

I'm really looking forward to seeing the new interface in action, yourself and the team are doing a great job by the looks of it. Cheers!

·

Thank you! :)