[Steem Gigs] Minor Adjustments to UI, Fix Voting (Task Request)

Repository

https://github.com/steemgigs/steemgigs

This is related to the following task request:

https://steemit.com/steemgigs/@surpassinggoogle/task-request-help-us-reduce-the-size-of-post-cards-and-post-area-across-steemgigs-org-and-more

Introduction

The main bulk of this contribution relates to the task request created by Hive account@surpassinggoogle. Although overall the tasks mentioned were fairly small, I believe that the Steem Gigs site is starting to come together nicely and has improved both in design and usability considerably over the past weeks.

In addition to the tasks mentioned above, I completed some additional work which is mentioned in the new features/improvements section.

Pull Request

The work that I carried out on SteemGigs can be found in the following pull request:

https://github.com/steemgigs/steemgigs/pull/54

The site is live at the following URL:

https://steemgigs.org/

New Features/Improvements

The main items asked within the task request were as follows:

1. Make The Upvote Function Work Again
2. Reduce The General Size (Dimension) Of Post Cards Across steemgigs.org
3. Adjust The General Dimension Of Post-Boundary Across steemgigs.org
4. Make Steemgigs Testimonial-Cards Expandable
5. Add Some Design To The Placeholder Tags Visible On steemgigs.org/surpassing-google
6. Resolve issue with explore button
7. Change button link for featured gigs

In addition to the above I completed the following:

1. Added placeholder pages/routes for unimplemented features
2. Minor styling consistency sitewide

Make The Upvote Function Work Again

This particular subtask was one of the simplest as the issue stemmed from a long period of inactivity in development combined with updates to SteemConnect. Overall the change required was simply adjusting the base URL for SteemConnect from baseURL: 'https://v2.steemconnect.com' to baseURL: 'https://steemconnect.com'.

Following doing this, I did, however, make some additional adjustments to the voting method to provide a user a better indication as to when a vote occurs as a well as minor adjustments to the way notifications are rendered on the site.

The voting method now looks like this:

A user is now provided a clear indication as to when a vote is either successful or has an error, this is provided through providing the overall outcome via a toast notification.

Reduce The General Size (Dimension) Of Post Cards Across steemgigs.org

Within the task request it mentioned that instead of four cards, five cards should be shown within the home page. Due to the way the site is currently laid out and the grid system it uses, this could only be achieved by breaking the grid or potentially adjusting the overall grid system used.

After speaking to Hive account@surpassinggoogle about this request, it was decided that although it would be great to have 5 cards, the overall goal was to reduce the sizes of cards. Instead of adjusting the overall card size, I actually increased the padding that is within el-main (the main page wrapper) to achieve this, this overall made both the cards smaller with a slightly cleaner look and overall made the content throughout the site easier to view.

The following image shows an indication of before and after:

Before	After

When checking with Hive account@surpassinggoogle he overall thought they looked cleaner, however, I could see that we could make further improvements to this in the future.

Adjust The General Dimension Of Post-Boundary Across steemgigs.org

Overall, again this was a simple task and simple adjustments to both width and margin and carousel were required.

Before	After

Make Steemgigs Testimonial-Cards Expandable, Resolve issue with explore button & Change button link for featured gigs

In the task request it was mentioned that a number of the buttons didn't go anywhere and although the pages were linked up correctly and the main problem was that the button was included outside of the router-link and therefore only the actual text was clickable but not if you clicked anywhere in the button that didn't hit the router, in order to resolve this the only change required was to move the button inside the router link.

Add Some Design To The Placeholder Tags Visible On steemgigs.org/surpassing-google

When I contributed previously I didn't catch this page in my initial clean up, therefore within this task request, Hive account@surpassinggoogle asked that this page could get cleaned up too. I, therefore, cleaned this page up so that's now consistent with the rest of the site.

Before	After

Placeholder pages for missing features

Currently, quite a few different features aren't implemented within Steem Gigs in order to provide an improved user experience whilst these features are being developed I created some placeholder pages for all of these missing features. I created each page seperate as these can easily be adjusted when the actual feature gets built. The following shows an example of the newly implemented placeholder page:

Despite it being a simple page to create, it overall provides a user with a clear indication as to why this feature isn't working, by looking at the issue tracker it's clear to see that this has popped up a few times in the past.

The following pages were made to cater to missing features:

1. Wallet
2. Settings
3. Invite
4. Dashboard
5. Message
6. Cart

What's next?

The main improvement that I want to make to the site is the editors and something that I have looked into and will begin shortly. I will continue to help Hive account@surpassinggoogle with further task requests should nobody else take them, but overall it would also be great to see others get involved too. One of the main benefits of working with Hive account@surpassinggoogle and Steem Gigs is that he provides detail and well thought out task request so it's very easy to understand what he wants and how it should be implemented whilst still giving you room to make decisions surrounding how best to implement it.

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1