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

in utopian-io •  9 months ago  (edited)

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 @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:

carbon (10).png

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 @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:

BeforeAfter
STEEMGIGS_Alpha.pngSTEEMGIGS_Alpha.png

When checking with @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.

BeforeAfter
STEEMGIGS_Alpha 4.pngSTEEMGIGS_Alpha.png

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

BeforeAfter
STEEMGIGS_Alpha 3.pngSTEEMGIGS_Alpha.png

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:

STEEMGIGS_Alpha.png

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

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:  
  • Great post with good code samples, explanations of improvements. Good structure.
  • Good use of before and after images.
  • Not one line of comments this time, but awesome commit messages.
  • Could use an image at the top of the post to improve eye candy.

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]

Thank you for your review, @helo! Keep up the good work!

Looks a lot better! Great work once again, Tobias!

Is this possible to fix some issue if I’m a beginner ? I want to participate to Open source

Of course, you can get involved and fix issues. In this case, I'm not the project owner. @surpassinggoogle manages this project, I simply help him with improving the site. I would recommend getting in touch with him if you want to contribute. He has projects in both Vue & React. I'm not sure if you know already, if you follow @utopian.tasks they provide regular updates surrounding tasks the community need solving :)

What languages are you starting to learn or know?

Thank you for your answer! I’m attending a Coding bootcamp next week and we’ll cover React! I’m currently getting some solids foundations in JavaScript

Hi, @tobias-g!

You just got a 1.43% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

This post has been included in today's SOS Daily News - a digest of all you need to know about the State of Steem.



Hi @tobias-g!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @tobias-g!

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

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

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

Vote for Utopian Witness!

Congratulations @tobias-g! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 3000 as payout for your posts. Your next target is to reach a total payout of 4000

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemWhales has officially moved to SteemitBoard Ranking
SteemitBoard - Witness Update

Support SteemitBoard's project! Vote for its witness and get one more award!