KURE Community Curation App Update - Unvoting Posts and Comments, Showing Payout Differences, Upvote Percentages and More Changes

in #utopian-io5 years ago (edited)

A number of additions and changes have been made to the site, from new functionality that enhances and empowers users, to UI/UX improvements that give users a better experience.

While being able to upvote a post is crucial to have, being able to remove an upvote, otherwise known as unvoting, is also highly valuable. Without this feature, a mistaken upvote could not be removed. Until now, that was the case. Unvoting has been added to KURE, enabling a user to have great control of their votes and the content they wish to support or not support. This is a greatly significant feature which further empowers users of KURE.

Some changes to the UI have been made which bring a elevated user experience. When viewing upvotes across Steem, a user can now see what the percentage was applied to a vote. You can sometimes know how much a voter values the content by the weight they put into an upvote, which makes this valuable to see.

Another change was to show which posts are using different payout options. When a post is 100% SP or payout declined, now you can know. This also enhances user experience and empowering an individual to better choose where and how to apply their vote. One may want to apply a lesser vote on content that will not have any curation rewards, or may appreciate a post where the author is banking all the rewards as SteePower.

The grid layout has seen a significant improvement as it's been overhauled to show the text outside of the image, not overlayed into the image. This gives an better UX as well, with easier to read text and a full view of the image.

The grid layout also has a new feature to enhance the user experience, which is to remember what view you prefer and load it for you on your next visit to the site (from the same browser). That way, if you prefer the list layout, it will always be that way when you go to KURE, as opposed to the default grid layout.

Any feedback or criticism is welcome and appreciated. I am looking to improve the app and your experience using it.

What do you want to see next?


Repository

https://github.com/KrNel/kure

Site

https://thekure.net/


Index

  1. What is KURE?
  2. What's new?
    2.1 Added unvoting posts and comments
    2.2 Added upvote percentage to the popup for votes made
    2.3 Added payout display changes for 100% SP and Declined
    2.4 Stored grid or list layout preference for next page visit
  3. Bugs, Tweaks and Other Changes
    3.1 Changed Steem grid layout arrangement of data
    3.2 Changed position of 100% SP payout symbol
    3.3 Changed Show to Hide Descriptions, descriptions default on
  4. Roadmap
  5. Contact

1. What is KURE?

Kindred United to Reward Everyone.

A Community Platform and Curation Network Remedy for Steem

Do you want to find content that other people really value, based on topics that interest you? How?

Upvotes don't do it, because so many upvotes come from autovoting, autobots, or curation trails. You don't know if a vote for content is done by a real person, or some automation. The content isn't being evaluated when it's automated.

Plus, you can upvote so many things, which can be unrelated.

Imagine a curation network where people are interacting through community groups to share and value content, and you can really see what they value globally through various communities that people organize and collaborate together to build.

KURE provides a network hub for people to create their own community groups for evaluating content to curate. It will also develop into communities to create posts within.

Create your own communities and have others join to contribute. Make up your own criteria. Manage who can add curation links to your community group. Anyone else can follow your community and engage.

My goal is to make content easier for everyone to find by all of us sharing the content we like trough communities. Others can find communities they are interested in and see what is being curated within that community to also support it with upvotes, resteems and comments.

Maybe you want to share what you value, and get others to see it or support it, but don't want to resteem it, or want more people to see it. On KURE, the community you create and those who are involved in it will popularize content you value and allow others to see it. Another way of thinking about it, is it's kind of like having a custom community feed, based on a community that engages in creating it, rather than just one person.

KURE empowers the Steem community to coordinate their curation efforts through building community networks of their own.


2. What's new

Video Demonstration


2.1 Added unvoting posts and comments

When you hover over a post or comment you've already upvoted, it will tell you that you can "Unvote" the post.

Clicking on the upvote icon will display a popup where a confirmation is presented to "Confirm unvote". You are asked "Are you sure you want to remove the vote and curation rewards?".

After confirming, the upload icon will spin around until the upvote is removed.

Once the upvote is removed, the upvote icon will be black to indicate a vote was previously made but is no longer applied. The upvote count will go down by one, and the post payout value will decrease if you applied sufficient weight to affect the value.

To send an unvote, it's the same as a regular upvote, with the only difference being the weight applied. It just needs to be 0.

The post still has a vote applied, but a 0% vote. So it's not like there is no vote anymore. To display the unvote changes, I check to see if the upvoters of the current post include the current user. If the current user has a vote equal to 0, that means that they removed a vote that was previously set on the post.


2.2 Added upvote percentage to the popup for votes made

On any post on KURE's Steem sections (such as the Blog or Feed pages, or any Steem post), you can hover over the upvote count and see a popup with a list of who voted on a post. In addition to the name and value of the upvote, the percentage is now also displayed.

The vote percentage value is sent to the PercentDisplay component to be formatted. First, it is divided by 10,000 as the vote percentage is needs to be in a deceimal format.

The PercentDisplay component adds the % formatting to 2 decimals places as a whole number, rather than a decimal.


2.3 Added payout display changes for 100% SP and Declined

Post payouts are differntiated. The default of a 50/50 SP/SBD split has no change to it. When using a 100% SP payout, that's when you will an additional symbol show up next to the payout value. That being the Steem symbol.

For the Delcine Payout option, there isn't a symbol to denote that. What changes in the color being greyed out, and a line striked through the payout value.

The Steem Power symbol is added by a new component, FullPower. When a post has percent_steem_dollars set to 0, that means no SBD is being rewarded on the post, because all the rewards are being sent as SP.

Payout declined is determined when max_accepted_payout === '0.000 SBD'. No rewards are set to be received from the post. When that is set, the declined class and a title is set on the payout value.


2.4 Stored grid or list layout preference for next page visit

When choosing a layout view, rather than it resetting when you open a new page or when you go back to the site later after closing it, it now is stored/saved for reuse. This makes your preferred layour view persist across visits, rather than always having to change and pick the view you like. This is done through localStorage in the browser.

The settings are handled in Redux where both the state (through a dispatch), and the localStorage is updated.

When a page for Steeem content loads, it calls the initViewStorage to get the stored layout view settings. If this is the first time you visit the site or have never changed the view, then the stored value doesn't exist and will return null. If there is a boolean value, then the layout view is set in the broswer via a Redux dispatch.


3. Bugs, Tweaks and Other Changes


3.1 Changed Steem grid layout arrangement of data

When viewing Steem, Feed or Blog content, the default layout view is grid. Previously, the grid was sized to the image, with text on a dark overlay of the image. The grid layout has been changed to show the text around the image, and the image is shown in full, not cropped.

You might notice the description is also longer. This allows more to be read about the post rather than a much shorter description.


3.2 Changed position of 100% SP payout symbol

I had originally put the 100% SP payyout icon to display on the title. I thought it better to put by the actual payout value, since we are talking about payouts and to put all the payout deta in the same area.


3.3 Changed Show to Hide Descriptions, descriptions default on

The grid layout used to hide the descriptions when it had the overlay mode. I decided to put the description by default when I changed the grid layout design. Now the text is hide instead of show if you want to have less space taken up by the description text.


4. Pull Request / Latest Commits

PR 19


5. Roadmap

This past week has been busy with a new job and some interviews. I still managed to get some coding done and tasks accomplished. I'm thinking I need to tackle a wallet sometime soon in order to promote the currency aspect of the site and make that more usable for SMTs/SCOTs and the community token future. But maybe some performance improvements would better to tackle sooner.

Working on:

  • Improved UI/UX, landing page, code splitting, PRPL
  • Liking Kurated post submissions in communities
  • Rating Kurated post submissions in communities
  • Tweak comments (limit to 20, show more option, max nested depth)
  • Implement PRPL Pattern for better performance
  • Viewing comments in their own page view
  • Adding infinite scroll to the Communities page
  • Adding sort functions to the Home, Communities and Kurated pages
  • About page
  • Dark skin for the site
  • Selecting posts to vote at a later time
  • Improve Blog page, with rep, description and location
  • Add a settings page
  • Add nsfw filtering
  • Add progressive image loading
  • Payouts shown in different ways
  • Flag a post
  • Wallet features

6. Contact

If you want to contact me, you can reach me on Discord at https://discord.gg/ApUp4jJ, or email at [email protected]. I'm not really on steem.chat, but I think I get emails if you send me a message.

Contributions can be submitted as pull requests to https://github.com/KrNel/kure


Thank you for your time, attention and support. I appreciate it. Every vote matters.

Peace.


Posted from KURE

Sort:  
  • Awesome article with a lot of work done. All of the magic ingredients are present, video, images, code samples & explanations.
  • Great commit messages all around.
  • Code is good, I like your new mapped variable names.

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? Chat with us on Discord.

[utopian-moderator]

Thanks for the review :)

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

Hi @krnel!

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, @krnel!

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!

Coin Marketplace

STEEM 0.18
TRX 0.14
JST 0.029
BTC 57893.29
ETH 3130.56
USDT 1.00
SBD 2.44