[SteemGigs] UI Improvements Phase 1 & In Page Search

Repository

https://github.com/steemgigs/steemgigs

Introduction

Following the work I completed for @amosbastian surrounding the redesign on FPL Plus, @surpassinggoogle got in touch with me mentioning that he would like to bring Steem Gigs back online and one of his major concerns was the current look and feel. As the Steem Gigs application is currently written in vue.js I thought it would be the perfect opportunity to help him out. Going into this, I knew that overall it wasn't going to be easy to get it perfect the UI the first time around, so had the following goals for this release:

1. Make quicks wins surrounding the UI and identify problems areas in the code for later pieces of work
2. Implement a new search feature that instead of appearing in a modal, it appears within its own page.

You will see that with the changes made I didn't want to completely rewrite the whole UI, @surpassinggoogle is interested in quick and steady progress on the site. There are still numerous areas within the application that need improvement and some of the code written to existing areas of the code could be improved, however unlike the projects that I work on by myself, it's a different challenge slowly iterating previously implemented code and something that I plan to work on and improve over the coming weeks.

Pull Request

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

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

Note: There are a lot of commits, this is mainly because a lot of this work was iterative with a lot of minor changes. The site is live at the following URL:

https://steemgigs.org/

However, currently there are some issues surrounding the hosting of the API and it currently being hosted on a free development environment so some pages that require the API will not load as expected (The API is returning a 503, due to free dyno usage at Heroku).

New Features/Improvements

Overall the work carried out in this pull request can be broken down into two main areas. These are:

1. Overall Looks and Feel Improvements & Simplification
2. In Page Search

Overall Looks and Feel Improvements & Simplification

Overall alot of the changes I made overlap with one another and a lot of the changes are small changes which were made throughout the side, however, the following helps provide more information on some of the pages improved:

1. Home Page

The first thing a user sees when they authenticate via SteemConnect is the home page. With this piece pull request I kept the overall layout of the site very similar, however, you can see that one of the main changes I made was the removal of the side options shown to the left of the page. This was because I believe this takes away from the main purpose of the page and overall confuses the user.

The left-hand side options contained:

1. Ability to create a custom request
2. Popular searches
3. Create a testimonial

I relocated these features into a single option shown in the top right (create button), you can see this in the image below

Before	After

The main benefit this provides is that a user can now access all of these pages globally at the click of the button, this should overall make the editors easy to access and remove some unneeded confusion from the side.

Overall, although small. The following shows an example of the changes made to the home page:

Before	After

The main adjustments here can be seen in the overall gig card look and feel.

2. Category Page

Only minor pages were needed on this page once the gig card had been restyled, simply applying consistent headers and additional margin where required.

The following shows an example of the changes made to the category page:

Before	After

3. Gig Page

The post page was previously one of the areas that had the most inconsistent areas of the site, this was because the user could enter custom HTML into the post and it wasn't styled with any guide of consistency.

Within the right you can also see that I made adjustments to the profile card and how the data is displayed, previously the UI differed considerably if had data with your profile or if you didn't. There is now placeholder information when no data can be shown in any of the data shown within the profile card.

The following shows an example of the changes made to the gig page:

Before	After

In the next release where I visit the post editors, I will look to make adjustments surrounding how gigs are added to the blockchain, this should improve both how gigs look on the Steem Gigs website and other Steem front ends.

1. User Profile

Previously when no results could be found in any of the tabs a user would have no indication surrounding as to why the page was blank, in order to tackle this I added placeholder information that would allow a user to easily see when no data is available.

The following shows an example of the changes made to the gig page:

Before	After

In Page Search

Previously the search feature was contained in a modal that appeared over the top of the page, overall the experience felt clunky and didn't follow a similar styling as the other pages. It provided minimal feedback to the user surrounding when searches were taking place and didn't handle when no search results could be provided. An example of how it looked previously can be seen here:

During this piece of work, I adjusted the search so that it would appear in-page rather than within the modal, within the end product looking like so:

There are three main parts within the search template, these can be broken down into what happens when it's searching when the data has loaded and when there is no data to show. This can be seen here:

In order to trigger a search the following method is called:

Note: From reading this through I noticed that I would never hide the content placeholders upon error, as I don't set this.isSearching = false upon error. I will resolve this in the next pull request.

In order to trigger the search, I created the following method within nav.vue

This method is called when a user submits the search input field shown within the navigation bar. Upon the initSearch() method being called it will first commit the searchTerm to the store using a mutation and then push the user to the search page. Upon mounting of the page it will then carry out the search. In order to allow a user to carry out multiple searches, I also monitor the search using a watch as seen here:

This allows the search function to be triggered multiples times even when the page is already mounted.

Currently, the data returned from the search API method has some limitations in terms of the data it provides, this is why currently all searches will use the default card image. In the future, I will adjust this to pull the data from the blockchain once the search from Steem Gigs has been returned. This will be completed server side rather than client side.

What's next?

As mentioned previously, one of the my goals was to find the problem areas of the code, in doing so, one of the main areas that need improvement is the editor pages on SteemGigs, currently they're written in a way which makes them hard to style consistently and overall issues with the method of validation causes confusion in the end user experience.

I still also believe that I need to revisit a number of areas in the UI and continue to remove materialize.css from the design as overall it doesn't allow for a quick and itterative development.

I will also be helping @surpassinggoogle with task requests in the coming weeks.

Contributing

Although this isn't my project, I know @surpassinggoogle wouldn't mind my saying this, if your interested in helping out Steem Gigs, getting stuck in both with the front end (Vue.js) or the API (Node.js) I know he'd be more than happy to have you onboard. Simply contact him on Discord to find out more :)

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1