Actifit: Landingpage Update (News/Report Details/Voting)

in utopian-io •  2 months ago

image.png

Repository

https://github.com/mcfarhat/actifit-landingpage

Pull Request

https://github.com/mcfarhat/actifit-landingpage/pull/9

About the project:

https://steemit.com/actifit/@actifit/announcing-actifit-innovative-smt-for-rewarding-fitness-activity

https://actifit.io/

This is a rather small updated. It includes the following changes:

  • VueSteemconnect Update
  • News Slider
  • Activity Report Detail View
  • Voting

VueSteemconnect Update

Since I updated my VueSteemeconnect plugin recently, to add some actual functionality, I updated the plugin for the Actifit landingpage, thus getting rid of some code.

The plugin is now at version 0.2.2, removing the necessity for own login/logout actions in the Vuex store. Read more about it here.

I removed those parts that are now handled by the plugin. This also means I cannot dispatch other actions from those actions that are now part of the plugin code. Therefore I had to subscriber to the login action to fetch user related data after login.

News Slider

One requirement was to show the latest news posts from the @actifit account somewhere on the page. I decided to use VueCarousel to add a simple slider to the bottom of the page.

image.png

For the news items I added a new component that is then used in the carousel.

The read more button opens a modal with the full post.

image.png

The modal always shows the activeNews item from the store, which changes whenever the read more button is clicked

Activity Report Detail View

Similar to the news modal, the activity reports now also have a full view in a modal.

image.png

The

read more does not link to steemit.com anymore but instead changes the activeReport property in the store and opens a modal / https://github.com/mcfarhat/actifit-landingpage/pull/9/commits/11343128f0cc2408cbe22e9e739c0b461f80785f#diff-941a2260d493a563bac6dbfd71b01d5cR47
that displays this report. This modal also lives in it's own component and receives the activeReport property from the store.

Voting

Another requirement was to make it possible to vote on those reports directly from the website.

image.png

Therefore another new component was added, containing a modal to adjust the voting weight and then broadcast the vote.

Similar to the news and activity report modals, there is only one state property called postToVote and one for the voteWeight. postToVote gets updated whenever the like button of a activity report is clicked.

To give the user some feedback, I added the VueNotification plugin and added notifications for success or failure.

Disclaimer: Those changes are really just very basic. There's more to come and the UI was not that important this time, because it's likely that there will be a task request for creating a truly professional interface, which I would then implement.

That's it for now. More updates are coming soon. Over and out!

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:  
  • There is more here than meets the eye, a lot of coding.
  • Not a lot of comments this time around.
  • Nice touch with images in the PR.

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!

So far this week you've reviewed 9 contributions. Keep up the good work!

Hi @mkt! We are @steem-ua, a new Steem dApp, computing UserAuthority for all accounts on Steem. We are currently in test modus upvoting quality Utopian-io contributions! Nice work!

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 6 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 11 SBD worth and should receive 99 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

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

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

Vote for Utopian Witness!

great post you definitely need to join here
https://steemit.com/@alexsandr
images (1).jpg