Repository
https://github.com/mcfarhat/actifit-landingpage
Pull Request
https://github.com/mcfarhat/actifit-landingpage/pull/9
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 account somewhere on the page. I decided to use VueCarousel to add a simple slider to the bottom of the page.
- https://github.com/mcfarhat/actifit-landingpage/pull/9/commits/468580437553317019aad05afef47293085e06d8
- https://github.com/mcfarhat/actifit-landingpage/pull/9/commits/a39f964ca5708c7d2d1fa52bcc863f2f1a4e3e5c
- https://github.com/mcfarhat/actifit-landingpage/pull/9/commits/2e369fe6df2a167bb3f635ce48d03334cc6548fe
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.
The read more does not link to steemit.com 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.
Voting
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.