[Steem Gigs] Editor rewrite, UI Improvements & Social Share Buttons

Repository

https://github.com/steemgigs/steemgigs

This post is partially related to the following task request, however, I conducted some further work that I believe would benefit both the completion of the tasks as well as provide the site an easier to use experience.

https://steemit.com/steemgigs/@surpassinggoogle/task-request-kindly-help-us-tend-to-14-micro-programming-tasks-to-enhance-the-overall-steemgigs-org-ux

Introduction

If you've been following my recent work on SteemGigs you will know that one main piece of work I've been looking to complete was the improvement of the editors, with this post you'll be able to see the improvements I made to the editors combined with the completion of some tasks that @surpassinggoogle made within this recent post request.

Pull Request

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

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

The site is live at the following URL:

https://steemgigs.org/

New Features/Improvements

The items I completed from the task request were as follows:

1. Resolve issue with post-payout not being displayed past 7 days
2. Fix A UI Bug On Our Homepage Prior To Login, That Doesn't Allow The Page To Scroll Up/Down
3. Adjust meta description
4. Add Social Share Button To Post
5. Revamp Some Areas Of Each Editor Under steemgigs.org/surpassing-google
6. Add Some Styling & Text-Formatting To The Style-Guide Area (on the right-side) Of Each Editor Across

In addition to the above I completed the following:

1. Rewrite all editors
2. Improve reply text area styling
3. Resolve issue where markdown comments weren't being displayed correctly

Rewrite editors

The largest piece of work that I will mention within this post is the rewrite of all of the various different editors available on Steem Gigs. My main driver for this was future maintainability of the code and overall simplify the overall experience when developing within these pages. Within this piece I was able to considerably simplify the validation that is applied to each editor, create a mixin that allows multiple methods to be shared across the different editors and overall improve the simplicity of the pages for the end user. I do however believe that further improvements could be made to reduce duplication within these pages and will be something that I will look to improve in the future, however at this current time I believe the changes made should allow improvement in the speed of development when working those pages.

First, we can take a look at all of the different editors that are currently available on Steem Gigs, these are as follows:

1. Steem Gig
2. Untalented
3. SurpassingGoogle
4. Feature Request
5. Testimonial

As you can see there are quite a few different editors available, previously no code was shared across these pages despite them being of a very similar function, in to help improve this I create a new mixin called form.js. This can be seen here:

This mixin currently holds methods that deal with the submission of each form, adding user tags to an editor as well as the removal and adding of tags to the page. I believe that this will continue to grow in future releases as more functions can be moved into here.

Prior to this release, the validation for each of item that makes up a form was handled in a computed property, this overall create a lot of unneeded code and overall would be hard to maintain across all editors, one option was to move this into the newly created mixin, however instead of this I opted to use in the validation that is built into element UI by default, this is because both the styling and the configuration is handled in a way that is both scalable and easy to maintain. Instead of the previously used computed properties, validation can now be configured using the rules object that has been configured in each of the editors. The following shows an example of the rules object within the Steem gig editor:

As you can see the rules are both easy to understand and configure, and although I cannot take credit for the functionality that the element UI validation creates, I do believe this addition should simplify the process when creating new validation rules to the various different editors and overall improve the readability of the code considerably.

From a UI perspective, considerable changes were made to all of the editors, this was because overall as the site progressed in the past couple of weeks, only minimal work has been done on these editor pages, this has lead the editors to becoming inconsistent with other pages.

The following shows how the Testimonial editor looked before and after the UI adjustments:

Before	After

The following shows how the Surpassing Google editor looked before and after the UI adjustments:

Before	After

The following shows how the Steem Gig editor looked before and after the UI adjustments, as you can see, prior to this work this editor was split into multiple steps, as overall I didn't believe this was necessary for the tasks being completed on this page, I instead opted for a collapsible area that would hold each section of the editor.

Before	After

Add social share buttons to post

In order to implement the social share buttons I used a plugin called vue-social-sharing, the reason I chose this plugin is that it has a large selection of different providers and overall looked like it would be easy to implement into the platform. In order to implement this feature I built a simple component that wraps the plugin so that I apply the styling that is consistent with the page, this also allows this to be reused extremely easily in multiple different areas of the site. The component I built can be found in share-options.vue.

Currently, the site allows you to share your post on the following channels:

1. Facebook
2. Google+
3. Pinterest
4. Reddit
5. Twitter
6. Whatsapp
7. Weibo

The following shows how it looks when you share your post via twitter:

and how it looks when you share via Reddit:

Resolve issue with post-payout not being displayed past 7 days

In order to resolve this issue I adjusted the payout () computed property to the following:

Within this property, I first calculate the time since the post was made and based if it was greater than 10080 minutes (7 days) I will return a particular value for the payout. In the scenario it is less than 7 days I will return this.gigData.pending_payout_value and if it's greater than 7 days I will return the sum of this.gigData.curator_payout_value and this.gigData.total_payout_value.

What's next?

Over the next week, I hope to complete the remaining tasks within the task request, as some of the tasks remaining require API changes I will also take the opportunity to restructure the APIs as currently I believe this could be improved considerably and from there I will continue to work on further features that pop up.

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1