New Discussion Timeline in Vue.js UserCP Mockup

Applications Web Development
1

Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.23 of the UserCP Mockup:

Wow! I'm really impressed with Vue.js.

https://www.unix.com/cp/index.php#/pages/timeline

In this version:

  • Created database, and PHP model for the remote AJAX (Axios) call to retrieve 100 more recent posts.
  • Identified the first post in a thread by comparing the firstpostid with the postid for each entry.
  • Positioned the timeline entries based on either "starting" or "replying" to a discussion.
  • Added links back to the post for each entry in the timeline.

It's working fine for me :slight_smile: Hope it works a fine for you (in Chrome and Safari.. FF suxs, LOL)

ENJOY!

1011×709 46 KB

Reference:

Version 0.24:

  • Added link to each UIM / badge page to each timeline entry.
2

Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.25 of the UserCP Mockup:

https://www.unix.com/cp/index.php#/pages/timeline

Cosmetic changes:

  • Removed icon in the center of the timeline (for the time being), for mobile.
  • Made the name of the discussion thread in the timeline bold (experimenting).
  • Changed the style of the date in the timeline slightly so it was not too small on mobile.