![image.png](https://ipfs.busy.org/ipfs/Qmexbdj6rdSFoVTJtn1hTaQtMqezJJygZBvcB3FWWCnA4m)

#### 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.

- [changed main bg color to that in the design](https://github.com/utopian-io/v2.utopian.io/pull/2/commits/2c4618e37fe454064cf71d984b8c756a2efe5b1d)
- [limit container width to 1200 and adjusted header border according to design](https://github.com/utopian-io/v2.utopian.io/pull/2/commits/d536275b7223e4b4d301298e6ce4664645dfd2f6)
- [adjusted box styles on homepage](https://github.com/utopian-io/v2.utopian.io/pull/2/commits/62ab58e17b060aaf829b25ba60693df093be6a2c)
- [adjusted primary button style](https://github.com/utopian-io/v2.utopian.io/pull/2/commits/ac531918e1217cd9256a39dfa2f538d67f5cac2a)
- [changed project info box shadow](https://github.com/utopian-io/v2.utopian.io/pull/2/commits/3cf7f3ded6df255b9f2d04880183f3b849b8f878)
- [added avatar to project preview](https://github.com/utopian-io/v2.utopian.io/pull/2/commits/919710e4fedf6ab7f3f19b24224ec80c04bc5f55)

**Before:**
https://user-images.githubusercontent.com/6792578/41778418-01ee57ba-762f-11e8-9154-ef27eb114527.png

**After:**
https://user-images.githubusercontent.com/6792578/41778425-060508ee-762f-11e8-86ee-49e95f532447.png

### 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.

https://user-images.githubusercontent.com/6792578/41850582-58c008e2-7885-11e8-8d49-b005d938ff2a.png

In this case I applied a tiny fix related to the v-for loop in Vue.js according to [the docs](https://vuejs.org/v2/guide/list.html#key):

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

- [fixed v-for "explicit key" warning](https://github.com/utopian-io/v2.utopian.io/pull/5/commits/da18cae81c36b3c8eb4cd5a372c67b7a724b878a)

### 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](https://quasar-framework.org/components/input-textfield.html) 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.

- [added u-select component](https://github.com/utopian-io/v2.utopian.io/pull/8/commits/d42837dda949f7167ca6161967ee9f0c2d130c08)
- [unscoped u-select style](https://github.com/utopian-io/v2.utopian.io/pull/8/commits/9f1b632c1f823a62988f107e57bb1b66001c16d0)
- [added u-input component](https://github.com/utopian-io/v2.utopian.io/pull/8/commits/1377506c306f5025f8d2ed23760d7da000555d90)
- [added u-textarea component](https://github.com/utopian-io/v2.utopian.io/pull/8/commits/ec47d6b002616baa0a8dc682355cae3143c16f2a)
- [fixed change handling in u-select/input/textarea](https://github.com/utopian-io/v2.utopian.io/pull/8/commits/aaa78d046eae2bb854856aeb86568129da31705a)

### 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:**
https://user-images.githubusercontent.com/6792578/41883399-c2e20b30-78ee-11e8-9d55-e7ed135fd527.png

**Tablet:**
https://user-images.githubusercontent.com/6792578/41883403-c6cc9f8a-78ee-11e8-95c2-62284531a080.png

**Mobile:**
https://user-images.githubusercontent.com/6792578/41883406-ca409bee-78ee-11e8-8050-630e8278fabf.png

#### 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.