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

in #utopian-io2 years ago



Pull Request

About the project:

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.


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.


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.



read more does not link to anymore but instead changes the activeReport property in the store and opens a modal /
that displays this report. This modal also lives in it's own component and receives the activeReport property from the store.


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


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!

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

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!

great post you definitely need to join here
images (1).jpg

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,

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

Want to chat? Join us on Discord

Vote for Utopian Witness!